:root{--bg:#f4efe7;--panel:#fffdf9;--ink:#2d2420;--muted:#7b6e66;--line:#e6ddd2;--accent:#b5543a;--accent-ink:#fff;--accent-soft:#f6e3da;--warn:#a8471f;--error-bg:#fbe4dd;--info-bg:#e9efe4;--radius:10px;--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-display:"Fraunces", Georgia, serif}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--font-ui);-webkit-font-smoothing:antialiased}h1,h2{font-family:var(--font-display);margin:0;font-weight:600}h2{margin-bottom:10px;font-size:16px}button,input,select{font:inherit;color:inherit}.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.muted{color:var(--muted)}.small{font-size:12px}.studio{flex-direction:column;min-height:100vh;display:flex}.topbar{background:var(--panel);border-bottom:1px solid var(--line);z-index:5;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;display:flex;position:sticky;top:0}.brand{font:600 20px var(--font-display);letter-spacing:.2px;align-items:center;gap:10px;display:flex}.brand-mark{background:radial-gradient(circle at 25% 25%, var(--accent) 22%, transparent 24%), radial-gradient(circle at 75% 75%, var(--accent) 22%, transparent 24%), radial-gradient(circle at 75% 25%, #d9a441 14%, transparent 16%), radial-gradient(circle at 25% 75%, #6f8a55 14%, transparent 16%), var(--accent-soft);border-radius:5px;width:22px;height:22px}.topbar-actions{align-items:center;gap:12px;display:flex}.busy{color:var(--muted);font-size:13px}.busy:before{content:"";border:2px solid var(--accent);vertical-align:-1px;border-right-color:#0000;border-radius:50%;width:10px;height:10px;margin-right:8px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.banner{border-radius:var(--radius);justify-content:space-between;align-items:center;gap:12px;margin:12px 20px 0;padding:10px 14px;display:flex}.banner.info{background:var(--info-bg)}.banner.error{background:var(--error-bg);color:var(--warn)}.layout{flex:1;grid-template-columns:300px minmax(0,1fr) 300px;align-items:start;gap:16px;padding:16px 20px 32px;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:18px;max-height:calc(100vh - 88px);padding:16px;display:flex;position:sticky;top:72px;overflow:auto}.panel section{flex-direction:column;gap:10px;display:flex}.panel-head{justify-content:space-between;align-items:baseline;display:flex}.panel-head h2{margin:0}.btn{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:8px;padding:8px 14px;font-weight:500}.btn:hover:not(:disabled){border-color:var(--muted)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.primary:hover:not(:disabled){filter:brightness(1.05);border-color:var(--accent)}.btn.small{padding:5px 10px;font-size:13px}.btn.danger{color:var(--warn)}.link{color:var(--accent);cursor:pointer;text-underline-offset:2px;background:0 0;border:none;padding:0;text-decoration:underline}.link:disabled{opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible,.swatch:focus-within{outline:2px solid var(--accent);outline-offset:2px}.dropzone{border:1.5px dashed var(--line);border-radius:var(--radius);text-align:center;color:var(--muted);flex-direction:column;align-items:center;gap:8px;padding:16px;display:flex}.dropzone p{margin:0}.dropzone.over{border-color:var(--accent);background:var(--accent-soft)}.image-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.image-card{border-bottom:1px solid var(--line);grid-template-columns:64px 1fr;gap:10px;padding-bottom:12px;display:grid}.image-card:last-child{border-bottom:none}.thumb{width:64px;height:64px;box-shadow:inset 0 0 0 1px var(--line);background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:8px}.image-body{flex-direction:column;gap:6px;min-width:0;display:flex}.image-title{justify-content:space-between;gap:8px;font-weight:600;display:flex}.image-title span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.image-title .link{font-size:12px;font-weight:400}.warn{color:var(--warn);margin:0;font-size:12px}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line);background:var(--panel);cursor:pointer;text-transform:capitalize;border-radius:999px;padding:3px 10px;font-size:12px}.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}.field{flex-direction:column;gap:4px;font-weight:500;display:flex}.field-row{justify-content:space-between;display:flex}.field select,.mini select{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 8px}.mini{color:var(--muted);grid-template-columns:62px 1fr;align-items:center;gap:8px;font-size:12px;display:grid}.mini.inline{display:flex}.check{cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}.check.inline{font-size:13px}input[type=range]{width:100%;accent-color:var(--accent)}.swatches{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.swatch{cursor:pointer;border:1px solid #00000026;border-radius:50%;width:30px;height:30px;padding:0;position:relative;overflow:hidden}.swatch.on{box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--ink)}.swatch.custom{background:conic-gradient(#e66,#ec6,#6c6,#6ce,#66e,#e6c,#e66)}.swatch input[type=color]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.stage{flex-direction:column;gap:10px;min-width:0;display:flex}.stage-bar,.selection-bar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;display:flex}.selection-bar{background:#f3f7fe;border-color:#b8cff5}.spacer{flex:1}.overlap-note{color:var(--warn);font-weight:500}.overlap-note:before{content:"⚠ "}.canvas-wrap{border-radius:var(--radius);width:100%;box-shadow:0 1px 0 var(--line), 0 8px 24px #3c281e14;overflow:hidden}.canvas-wrap canvas{display:block}.hint{margin:0;font-size:12px}.empty{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);text-align:center;flex-direction:column;align-items:center;gap:12px;padding:64px 32px;display:flex}.empty h1{max-width:520px;font-size:28px}.empty p{max-width:480px;color:var(--muted);margin:0}.ai-box{background:var(--accent-soft);border-radius:var(--radius);padding:12px}.ai-box h2{margin-bottom:0}.ai-box p{margin:0}.ai-box form{gap:6px;display:flex}.ai-box input{border:1px solid var(--line);background:#fff;border-radius:8px;flex:1;min-width:0;padding:7px 10px}@media (max-width:1100px){.layout{grid-template-columns:1fr;padding:12px 16px 24px}.panel{max-height:none;position:static}.stage{order:-1}}@media (max-width:520px){.topbar{padding:10px 16px}.brand{font-size:17px}.banner{margin:10px 16px 0}}.unlock{place-items:center;min-height:100vh;padding:16px;display:grid}.unlock-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:14px;width:100%;max-width:360px;padding:28px;display:flex}.unlock-card p{margin:0}.unlock-card input{border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px 12px}.page{flex-direction:column;min-height:100vh;display:flex}.page-body{flex-direction:column;gap:16px;width:100%;max-width:1040px;margin:0 auto;padding:28px 20px 48px;display:flex}.page-body.narrow{max-width:520px}.page-body h1{font-size:30px}.page-title-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.lede{max-width:640px;margin:0}.brand{color:inherit;text-decoration:none}.account-nav{align-items:center;gap:14px;font-size:14px;display:flex}.account-nav a{color:var(--ink);text-decoration:none}.account-nav a:hover{text-decoration:underline}.usage-pill{background:var(--accent-soft);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500}.pattern-name input{background:0 0;border:1px solid #0000;border-radius:8px;width:220px;min-width:0;padding:6px 8px;font-weight:500}.pattern-name input:hover,.pattern-name input:focus{border-color:var(--line);background:#fff}.banner a{color:inherit;font-weight:600}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:10px;padding:18px;display:flex}.card p{margin:0}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:14px;padding:28px;display:flex}.auth-card h1{font-size:24px}.auth-card input{border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px 12px;font-weight:400}.auth-card p{margin:0}.auth-links{flex-wrap:wrap;gap:14px;font-size:13px;display:flex}.plan-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.plan-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:12px;padding:22px;display:flex}.plan-card h2{margin:0;font-size:22px}.plan-card p{margin:0}.plan-card ul{flex-direction:column;gap:6px;margin:0;padding-left:18px;display:flex}.price{font:600 32px var(--font-display)}.price .muted{font:400 15px var(--font-ui)}.meter{flex-direction:column;gap:6px;display:flex}.meter-track{background:var(--line);border-radius:999px;height:8px;overflow:hidden}.meter-fill{background:var(--accent);border-radius:999px;height:100%}.library-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.library-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden}.library-thumb{aspect-ratio:1;background:var(--accent-soft) center / cover no-repeat;display:block}.library-meta{flex-direction:column;gap:2px;padding:10px 12px 4px;display:flex}.library-meta a{color:var(--ink);font-weight:600;text-decoration:none}.library-card>.link{align-self:flex-start;margin:0 12px 12px}@media (max-width:720px){.topbar{flex-wrap:wrap}.pattern-name{order:3;width:100%}.pattern-name input{width:100%}.account-nav{gap:10px}}.plan-signup{flex-direction:column;gap:8px;display:flex}.plan-signup input{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 12px;font-weight:400}.card.highlight{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.password-form{flex-direction:column;gap:10px;width:100%;display:flex}.card input[type=password]{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 12px;font-weight:400}