*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f5f5f5;color:#333;line-height:1.6}a{color:#4a6cf7;text-decoration:none}a:hover{text-decoration:underline}.page{max-width:980px;margin:0 auto;padding:24px 20px 56px}h1{font-size:1.9rem;line-height:1.25;margin:8px 0 10px;color:#1a1a1a}.lead{font-size:1.05rem;color:#555;margin-bottom:24px;max-width:720px}.site-header{background:#fff;border-bottom:1px solid #e5e5e5;padding:12px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;position:sticky;top:0;z-index:10}.brand{font-weight:700;color:#1a1a1a;font-size:1.05rem}.brand:hover{text-decoration:none}.brand-sub{font-weight:500;color:#888;font-size:.95rem}.brand-sub:hover{color:#4a6cf7;text-decoration:none}.site-nav{display:flex;gap:16px;margin-left:auto}.site-nav a{color:#555;font-weight:500}.site-nav a:hover{color:#4a6cf7}.tool-card{background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:20px;box-shadow:0 2px 16px #0000000d}.controls{display:flex;flex-direction:column;gap:18px;align-items:stretch;margin-bottom:20px}.group{display:flex;flex-direction:column;gap:8px}.group-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#999}.btn{border:none;border-radius:8px;font-size:.88rem;cursor:pointer;font-weight:500;transition:all .12s;padding:9px 16px;white-space:nowrap}.btn:active{transform:scale(.97)}.btn:disabled{background:#ececec!important;color:#bbb!important;cursor:not-allowed;border-color:#e0e0e0!important}.btn-load{background:#f0f4ff;color:#4a6cf7;border:1.5px dashed #c4d0f7;font-weight:600}.btn-load:hover{background:#e4ebff;border-color:#4a6cf7}.btn-primary{background:#4a6cf7;color:#fff}.btn-primary:hover{background:#3b5de7}.btn-accent{background:#e85d3a;color:#fff}.btn-accent:hover{background:#d14a28}.btn-outline{background:#fff;border:1.5px solid #ddd;color:#666}.btn-outline:hover{border-color:#aaa;color:#333}.btn-save{background:#f0fdf4;border:1.5px solid #bbf7d0;color:#16a34a;font-weight:600}.btn-save:hover{background:#dcfce7}.btn-row{display:flex;gap:6px;flex-wrap:wrap}.btn-mode{flex:1 1 auto;padding:8px;border:2px solid #e5e5e5;border-radius:8px;font-size:.8rem;cursor:pointer;background:#fafafa;color:#888;transition:all .12s;text-align:center}.btn-mode:hover{background:#f0f0f0}.btn-mode:disabled{opacity:.5;cursor:not-allowed}.active-fg{border-color:#22c55e;color:#16a34a;background:#f0fdf4}.active-bg{border-color:#ef4444;color:#dc2626;background:#fef2f2}.active-eraser{border-color:#f59e0b;color:#d97706;background:#fffbeb}.active-box{border-color:#4a6cf7;color:#3b5de7;background:#f0f4ff}.param-row{display:flex;align-items:center;gap:8px}.param-label{font-size:.8rem;color:#888;flex-shrink:0;white-space:nowrap;min-width:56px}.slider{flex:1 1 auto;min-width:0;accent-color:#4a6cf7;cursor:pointer}.num-input{width:56px;padding:4px;border:1.5px solid #ddd;border-radius:6px;font-size:.82rem;text-align:center;color:#333;background:#fafafa}.num-input:focus{outline:none;border-color:#4a6cf7}.color-pick-row{display:flex;align-items:center;gap:10px}.color-input{width:52px;height:38px;border:2px solid #ddd;border-radius:8px;cursor:pointer;padding:2px;background:#fff}.color-input:hover{border-color:#aaa}.color-hex{font-family:ui-monospace,SF Mono,Consolas,monospace;font-size:.88rem;font-weight:600;color:#555}.canvas-area{text-align:center}.canvas-wrap{display:inline-block;position:relative;max-width:100%;line-height:0}.main-canvas{display:block;max-width:100%;height:auto;border-radius:4px;background:#fff}.cursor-draw{cursor:crosshair}.cursor-eraser{cursor:cell}.empty-overlay{position:absolute;top:8px;right:8px;bottom:8px;left:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fafafa;border-radius:6px;border:2px dashed #e0e0e0;pointer-events:none;line-height:1.35;text-align:center;padding:12px}.empty-icon{font-size:3rem;margin-bottom:8px}.empty-text{font-size:1rem;font-weight:600;color:#999;margin-bottom:4px}.empty-hint{font-size:.78rem;color:#ccc}.status{margin-top:14px;padding:10px 14px;background:#f8f9fb;border:1px solid #eee;border-radius:8px;font-size:.82rem;color:#666}.actions-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.hint{font-size:.78rem;color:#aaa}.seo-section{margin-top:44px}.seo-section h2{font-size:1.35rem;margin-bottom:12px;color:#1a1a1a}.seo-section h3{font-size:1.02rem;margin:18px 0 6px;color:#222}.seo-section p,.seo-section li{color:#444}.seo-section ol,.seo-section ul{padding-left:22px}.seo-section li{margin-bottom:6px}.seo-section p{margin-bottom:10px}.site-footer{border-top:1px solid #e5e5e5;background:#fff;padding:20px;text-align:center;font-size:.85rem;color:#888}.site-footer nav{margin-top:6px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.section-tag{display:inline-block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:#4a6cf7;background:#eef2ff;border-radius:999px;padding:4px 12px;margin-bottom:10px}.tool-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:24px 0}.tool-card-link{display:block;background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:24px;box-shadow:0 2px 12px #0000000d;transition:transform .12s,box-shadow .12s;color:inherit}.tool-card-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000017;text-decoration:none}.tool-card-link h2{font-size:1.15rem;color:#1a1a1a;margin-bottom:6px}.tool-card-link p{color:#666;font-size:.92rem}.tool-card-link .cta{display:inline-block;margin-top:12px;color:#4a6cf7;font-weight:600}.hero{padding:48px 0 16px;text-align:center}.hero h1{font-size:2.4rem;margin-bottom:12px}.hero .lead{margin:0 auto}.discipline-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:24px 0}.discipline-card{display:block;background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:24px;box-shadow:0 2px 12px #0000000d;color:inherit;position:relative;transition:transform .12s,box-shadow .12s}.discipline-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000017;text-decoration:none}.discipline-card .emoji{font-size:1.9rem;line-height:1}.discipline-card h2{font-size:1.12rem;margin:10px 0 6px;color:#1a1a1a}.discipline-card p{color:#666;font-size:.9rem}.discipline-card .tag{display:inline-block;margin-top:12px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#16a34a;background:#f0fdf4;border-radius:999px;padding:3px 10px}.discipline-card .tag.soon{color:#d97706;background:#fffbeb}.discipline-card.disabled{opacity:.55;cursor:default}.discipline-card.disabled:hover{transform:none;box-shadow:0 2px 12px #0000000d}.discipline-list{display:flex;flex-direction:column;gap:24px;margin:24px 0}.discipline-section{background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:24px;box-shadow:0 2px 12px #0000000d}.discipline-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}.discipline-head .emoji{font-size:1.9rem;line-height:1}.discipline-title{display:flex;align-items:center;gap:10px}.discipline-title h2{font-size:1.25rem;color:#1a1a1a}.discipline-title .tag{display:inline-block;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#16a34a;background:#f0fdf4;border-radius:999px;padding:3px 10px}.discipline-title .tag.soon{color:#d97706;background:#fffbeb}.discipline-title a{color:#1a1a1a}.discipline-title a:hover{color:#4a6cf7;text-decoration:none}.discipline-section.disabled{opacity:.55}.discipline-desc{color:#666;font-size:.95rem;margin-bottom:16px}.tool-links{display:flex;flex-wrap:wrap;gap:12px}.tool-link{display:flex;align-items:flex-start;gap:12px;background:#f8faff;border:1px solid #e4e9f7;border-radius:10px;padding:14px 16px;color:inherit;min-width:220px;flex:1 1 260px;transition:border-color .12s,box-shadow .12s,transform .12s}.tool-link:hover{border-color:#4a6cf7;box-shadow:0 4px 14px #4a6cf71f;transform:translateY(-1px);text-decoration:none}.tool-link__emoji{font-size:1.4rem;line-height:1.2}.tool-link__body{display:flex;flex-direction:column;gap:2px}.tool-link__name{font-weight:600;color:#1a1a1a;font-size:.95rem}.tool-link__desc{color:#777;font-size:.82rem}.crop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.crop-overlay.active{pointer-events:auto;cursor:crosshair}.crop-box{position:absolute;border:2px dashed #4a6cf7;box-shadow:0 0 0 1px #ffffffb3;pointer-events:none}.example-steps{display:flex;flex-direction:column;gap:20px}.example-step{background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:20px}.example-step h3{margin:0 0 8px;font-size:1.05rem;color:#1a1a1a}.example-step p{color:#444;margin-bottom:12px}.example-step .note{font-size:.85rem;color:#666;font-style:italic;margin:12px 0 0}.example-figure{margin:0 0 4px}.example-figure img,.example-compare img{display:block;border:1px solid #eee;border-radius:8px;background:repeating-conic-gradient(#ececec,#ececec 25%,#fff 0%,#fff 50%) 0 0 / 18px 18px}.example-figure img{max-width:100%;height:auto;margin:0 auto}.example-figure figcaption{font-size:.8rem;color:#888;text-align:center;margin-top:6px}.example-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:4px}.example-compare figure{margin:0}.example-compare img{width:100%;height:auto}.example-compare figcaption{font-size:.78rem;color:#777;text-align:center;margin-top:6px}