@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Work+Sans:wght@300;400;600&display=swap";:root{color-scheme:only light;font-family:Work Sans,sans-serif;--ink: #1f1a15;--muted: #5c5248;--accent: #ef7f39;--accent-dark: #c25d22;--surface: #fff4e6;--surface-2: #f7e7d1;--border: #e2cdb2}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#fff7ed,#f7e2c4 40%,#f1d6b8);color:var(--ink)}.app{min-height:100vh;padding:48px 6vw 96px}.top-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:48px}.brand{display:flex;align-items:center;gap:12px;font-family:Space Grotesk,sans-serif;font-weight:700;font-size:1rem}.logo-dot{width:16px;height:16px;border-radius:4px;border:1px solid var(--border);background-image:linear-gradient(90deg,rgba(0,0,0,.18) 1px,transparent 1px),linear-gradient(rgba(0,0,0,.18) 1px,transparent 1px),linear-gradient(135deg,#fde7d1,#f6d4b7);background-size:4px 4px,4px 4px,cover}.nav-links{display:flex;gap:20px}.text-button{background:transparent;color:var(--muted);font-weight:600;padding:8px 12px;text-decoration:none;display:inline-flex;align-items:center}.text-button:hover{color:var(--ink);box-shadow:none;transform:translateY(-1px)}.lang-toggle{display:flex;gap:8px}.chip{background:var(--surface);border:1px solid var(--border);padding:6px 12px;font-size:.9rem}.chip.active{border-color:var(--accent);color:var(--accent-dark)}.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;align-items:center}.eyebrow{text-transform:uppercase;font-weight:600;letter-spacing:.18em;color:var(--accent-dark);margin-bottom:16px;font-size:.8rem}h1{font-family:Space Grotesk,sans-serif;font-size:clamp(2.8rem,4vw,4.5rem);margin:0 0 16px}.tagline{color:var(--muted);font-size:1.1rem;line-height:1.6;max-width:40ch}.hero-note{margin-top:18px;color:var(--muted);font-size:.95rem}.cta-row{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}button{border:none;padding:12px 20px;border-radius:999px;font-size:1rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}button:disabled,button:disabled:hover{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}.muted{color:var(--muted)}.status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.status-ready{background:#e5f4e8;color:#1f6a3a;border:1px solid #b7dbc1}.status-pending{background:#fff2d7;color:#8a5a12;border:1px solid #f0d3a1}.status-error{background:#fde8e8;color:#a3362b;border:1px solid #f0bcbc}.disabled-link{display:inline-flex;align-items:center;color:var(--muted);font-weight:600;opacity:.7}.disabled-link[aria-disabled=true]{cursor:not-allowed}input:disabled,select:disabled{cursor:not-allowed;opacity:.7}.primary{background:var(--accent);color:#fff}.ghost{background:transparent;border:1px solid var(--border);color:var(--ink)}.hero-card{background:linear-gradient(145deg,#fff,var(--surface));border-radius:28px;padding:16px;border:1px solid var(--border);box-shadow:0 20px 60px #1f1a151f;max-width:220px;justify-self:end;align-self:start}.grid-preview{width:100%;max-width:160px;aspect-ratio:1;opacity:.55;background-image:linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(135deg,#fde7d1,#f6d4b7);background-size:20px 20px,20px 20px,cover;border-radius:18px}.editor-panel{margin-top:64px;background:#ffffffb3;border-radius:32px;padding:28px;border:1px solid var(--border);box-shadow:0 24px 60px #1f1a151a}.auth-panel{margin-top:48px;background:var(--surface);border-radius:24px;padding:24px;border:1px solid var(--border);display:grid;gap:16px}.auth-form{display:grid;gap:12px}.auth-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--muted)}.auth-form input{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fffaf4;font-size:.95rem}.auth-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.auth-error{color:#a3362b;font-weight:600}.captcha-wrap{display:grid;gap:8px}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}.convert-panel{margin-top:48px;background:#ffffffb3;border-radius:28px;padding:24px;border:1px solid var(--border)}.convert-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}.convert-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--muted)}.convert-form input,.convert-form select{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fffaf4;font-size:.95rem}.custom-palette{grid-column:1 / -1;display:grid;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--border);background:#fffaf4}.custom-color-list{display:grid;gap:10px}.custom-color{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.custom-color input[type=color]{width:36px;height:36px;border:none;background:transparent}.custom-color input[type=text]{border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:#fff;font-size:.9rem}.ratio-toggle{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--muted)}.ratio-toggle input{width:16px;height:16px}.convert-result{margin-top:20px;display:grid;grid-template-columns:minmax(220px,340px) minmax(320px,1fr);gap:20px;align-items:center}.result-status{margin-top:12px;display:grid;gap:8px}.preview-controls{margin-top:12px;display:grid;gap:10px}.preview-controls label{display:grid;gap:8px;font-weight:600;color:var(--muted)}.preview-controls input[type=range]{width:100%}.pattern-preview{width:100%;height:auto;border-radius:18px;background:#fffaf4;display:block}.preview-scroll{overflow:auto;padding:8px;border-radius:20px;background:#fffaf4;border:1px solid var(--border)}.projects-panel{margin-top:48px;background:#ffffffa6;border-radius:28px;padding:24px;border:1px solid var(--border)}.projects-header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.projects-form{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}.projects-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--muted)}.projects-form input{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fffaf4;font-size:.95rem}.projects-list{margin-top:20px;display:grid;gap:12px}.projects-list article{background:#fffaf4;border-radius:18px;padding:14px 16px;border:1px solid var(--border);display:grid;gap:10px}.project-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.project-preview{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#fff}.project-preview img{width:100%;display:block}.preview-placeholder{padding:18px;color:var(--muted);font-weight:600;text-align:center}.project-actions{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;align-items:center}.project-actions button{padding:8px 14px}.project-actions .danger{border-color:#d9a1a1;color:#a3362b}.project-actions .ghost.active{border-color:var(--accent);color:var(--accent-dark)}.project-actions a{text-decoration:none;color:var(--accent-dark);font-weight:600}.project-actions a:hover{text-decoration:underline}.editor-pending{display:grid;gap:12px;background:#fffaf4;border-radius:18px;padding:16px;border:1px solid var(--border)}.editor-empty{display:grid;gap:12px}.editor-header{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:20px}.editor-actions{display:flex;gap:12px}.editor-meta{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(160px,1fr);gap:16px;align-items:center;margin-bottom:20px}.editor-meta label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--muted)}.editor-meta input{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fffaf4;font-size:.95rem}.meta-readonly{display:grid;gap:6px;font-weight:600;color:var(--muted)}.meta-status{display:grid;gap:6px}.editor-body{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:20px}.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(28px,1fr));gap:10px;align-content:start}.swatch{border-radius:10px;min-height:28px;border:2px solid transparent;font-size:.7rem;font-weight:600;padding:4px;color:var(--ink)}.swatch.erase{background:#fffaf4;border:2px dashed var(--border);grid-column:1 / -1;min-height:32px}.swatch.active{border-color:var(--ink)}.swatch:disabled{cursor:not-allowed;opacity:.6}.canvas-wrap{background:#fffaf4;border-radius:20px;padding:16px;border:1px solid var(--border);overflow:auto}.canvas-wrap.disabled{opacity:.6;filter:grayscale(.15);pointer-events:none}.canvas-wrap canvas{width:100%;height:auto;touch-action:none;display:block}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:64px}.features article{background:#fff9;border:1px solid var(--border);border-radius:22px;padding:20px 22px;box-shadow:0 16px 40px #1f1a1514}.features h2{margin-top:0;font-family:Space Grotesk,sans-serif}.features p{margin-bottom:0;color:var(--muted);line-height:1.5}@media(max-width:900px){.top-nav{flex-direction:column;align-items:flex-start}.nav-links{flex-wrap:wrap}.editor-body,.editor-meta,.convert-result{grid-template-columns:1fr}}@media(max-width:720px){.app{padding:32px 5vw 72px}.top-nav{margin-bottom:32px;gap:16px}.nav-links{width:100%;justify-content:center;gap:12px}.lang-toggle{align-self:flex-end}.hero{gap:24px}h1{font-size:clamp(2.2rem,8vw,3.2rem)}.cta-row{gap:12px}button{padding:10px 16px;font-size:.95rem}.hero-card{max-width:180px;justify-self:start}.grid-preview{max-width:120px}.editor-panel,.convert-panel,.projects-panel,.auth-panel{padding:20px;border-radius:24px}.convert-form,.projects-form{grid-template-columns:1fr}.editor-body{gap:16px}.canvas-wrap{padding:12px}}@media(max-width:520px){.app{padding:24px 5vw 64px}.brand{font-size:.95rem}.hero-card{max-width:160px}.grid-preview{max-width:110px}.project-actions{flex-direction:column;align-items:stretch}.project-actions a,.project-actions button{justify-content:center}}