:root{--paper: #f7f6f3;--card: #fffdf7;--ink: #14120d;--ink-soft: #6b6455;--accent: #ffd23f;--danger: #c92318;--warn: #f08c1a;--ok: #1e7a4e;--line: 2px solid var(--ink);--pop: 3px 3px 0 var(--ink);--pop-sm: 2px 2px 0 var(--ink)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font:500 14px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink)}.shell{display:grid;grid-template-rows:auto 1fr;height:100%}.shell>.app,.shell>.samples,.shell>.home{min-height:0}.nav{display:flex;align-items:center;gap:18px;padding:10px 16px;background:var(--card);border-bottom:3px solid var(--ink)}.nav a.wordmark{text-decoration:none;color:inherit}.nav .links{margin-left:auto;display:flex;gap:8px}.nav a.navlink{background:#ffeeb8;color:var(--ink);border:var(--line);border-radius:5px;padding:8px 16px;font-size:13px;font-weight:800;text-decoration:none;box-shadow:var(--pop-sm);transition:transform .06s,box-shadow .06s}.nav a.navlink:hover{box-shadow:var(--pop);transform:translate(-1px,-1px)}.nav a.navlink:active{box-shadow:none;transform:translate(2px,2px)}.nav a.navlink.active{background:var(--accent);box-shadow:var(--pop-sm)}.app{display:grid;grid-template-columns:320px 1fr;grid-template-rows:minmax(0,1fr);height:100%}.panel{padding:18px 16px 40px;border-right:3px solid var(--ink);background:var(--paper);background-image:linear-gradient(#14120d0d 1px,transparent 1px),linear-gradient(90deg,#14120d0d 1px,transparent 1px);background-size:22px 22px;overflow-y:auto}.nav h1{display:inline-block;font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0;padding:3px 9px;background:var(--accent);border:var(--line);box-shadow:var(--pop);transform:rotate(-1.5deg)}.sub{color:var(--ink-soft);margin:0 0 14px}.hint{margin:-4px 0 14px}.hint summary{cursor:pointer;font:500 12px ui-monospace,monospace;color:var(--ink-soft)}.hint summary:hover{color:var(--ink)}.hint .sub{margin:6px 0 0}.panel section{margin:0 0 24px}.panel h3,.buildcard h3,.sidecard h3{display:table;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--paper);background:var(--ink);padding:3px 8px;margin:0 0 9px;border-radius:3px}.err,.warn{border:var(--line);border-radius:5px;padding:6px 9px;margin:0 0 8px;font-size:12px;font-weight:600;box-shadow:var(--pop-sm)}.err{background:var(--danger);color:#fff}.warn{background:var(--warn);color:var(--ink)}.sub .warn{border:0;box-shadow:none;padding:0;margin:0;background:none;color:#a04a08;display:inline}.busy{display:inline-block;background:var(--accent);border:var(--line);border-radius:5px;box-shadow:var(--pop-sm);padding:4px 10px;margin:0 0 12px;font-size:12px;font-weight:800;animation:busy-pulse .9s ease-in-out infinite}@keyframes busy-pulse{50%{transform:translate(-1px,-1px);box-shadow:var(--pop)}}@media (prefers-reduced-motion: reduce){.busy{animation:none}}.stage{position:relative;min-width:0}.viewport{width:100%;height:100%}.viewport>canvas{display:block;width:100%;height:100%}.stage-status{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px}.stage-status .busy{margin:0}.stage-name{font-size:12px;font-weight:500;color:var(--ink-soft)}.stage-side{position:absolute;top:14px;right:14px;bottom:14px;width:280px;display:flex;flex-direction:column;gap:10px;pointer-events:none}.stage-side>*{pointer-events:auto}.buildcard{flex:none;background:var(--card);border:var(--line);border-radius:6px;box-shadow:var(--pop);padding:10px 12px}.sidecard{flex:0 1 auto;min-height:0;overflow-y:auto;background:var(--card);border:var(--line);border-radius:6px;box-shadow:var(--pop);padding:12px}.sidecard section{margin:0}.buildcard .mono{font:500 12px/1.7 ui-monospace,monospace;margin:0}.buildcard .fils{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}.buildcard .fils i{width:16px;height:16px;border:var(--line);border-radius:2px}.buildcard .warn{margin:10px 0 0;box-shadow:none}.stage-actions{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;gap:6px}@media (max-width: 900px){.nav{flex-wrap:wrap;gap:10px;row-gap:8px}.nav .links{margin-left:0}.app{grid-template-columns:1fr;grid-template-rows:minmax(0,45vh) 1fr}.panel{border-right:none;border-bottom:3px solid var(--ink)}.qpreview{max-width:240px}.stage{min-height:45vh;display:flex;flex-direction:column}.viewport{flex:1 1 auto;min-height:220px}.stage-side{position:static;width:auto;max-height:40vh;flex:none;margin:10px;order:1;pointer-events:auto}.stage-actions{position:static;left:auto;transform:none;margin:0 auto}}@media (max-width: 560px){.nav h1{font-size:16px}.nav a.navlink{padding:6px 10px;font-size:12px}}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}label.row{font-weight:700;cursor:pointer}input[type=checkbox]{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}.checks{list-style:none;padding:0;margin:0 0 14px}.checks li{padding:2px 0;font-family:ui-monospace,monospace;font-size:12px}.ok{color:var(--ok)}.bad{color:var(--danger)}.modes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.panel button.mode,.stage-actions button.mode{background:var(--card);box-shadow:none;padding:5px 10px;margin:0}.stage-actions button.mode{box-shadow:var(--pop-sm);padding:6px 12px}.panel button.mode.active,.stage-actions button.mode.active{background:var(--accent);box-shadow:var(--pop-sm)}.slider{display:grid;grid-template-columns:80px 1fr 56px;align-items:center;gap:6px;margin-bottom:9px}.slabel{font-size:12px;font-weight:600}.sval{font-size:11px;font-family:ui-monospace,monospace;text-align:right;color:var(--ink-soft)}.slider input[type=range]{width:100%;accent-color:var(--ink)}.field{display:block;margin-bottom:11px}.field>span{display:block;font-size:12px;font-weight:600;margin-bottom:4px}.panel textarea,.panel input[type=text],.panel select{width:100%;box-sizing:border-box;background:var(--card);color:var(--ink);border:var(--line);border-radius:5px;box-shadow:var(--pop-sm);padding:7px 8px;font:inherit;font-size:13px;font-weight:700}.panel textarea{resize:vertical}.panel input[type=text]::placeholder{color:var(--ink-soft);font-weight:500}.fitread{font:500 12px/1.7 ui-monospace,monospace;background:var(--card);border:var(--line);border-radius:6px;box-shadow:var(--pop-sm);padding:7px 9px;margin:4px 0 8px}.sidecard.flush .raise{display:none}.qpreview{display:block;width:100%;image-rendering:pixelated;border:var(--line);border-radius:6px;box-shadow:var(--pop-sm);margin-bottom:10px;background:repeating-conic-gradient(#d8d2c4,#d8d2c4 25%,#fffdf7 0%,#fffdf7 50%) 0 0 / 14px 14px}.dropzone{border:3px dashed var(--ink);border-radius:8px;background:var(--card);padding:22px 12px;text-align:center;font-size:12px;font-weight:700;margin-bottom:18px;transition:transform .08s,background .08s}.dropzone.over{background:var(--accent);border-style:solid;transform:scale(1.02)}.dropzone label{cursor:pointer;display:block}.panel button,.stage-actions button,.sidecard button,.samples .cta button,.account-page button{background:var(--accent);color:var(--ink);border:var(--line);border-radius:5px;box-shadow:var(--pop-sm);padding:7px 13px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;margin:0 6px 6px 0;transition:transform .06s,box-shadow .06s}.panel button:hover:not(:disabled),.stage-actions button:hover:not(:disabled),.sidecard button:hover:not(:disabled),.samples .cta button:hover:not(:disabled),.account-page button:hover:not(:disabled){box-shadow:var(--pop);transform:translate(-1px,-1px)}.panel button:active:not(:disabled),.stage-actions button:active:not(:disabled),.sidecard button:active:not(:disabled),.samples .cta button:active:not(:disabled),.account-page button:active:not(:disabled){box-shadow:none;transform:translate(2px,2px)}.stage-actions button{margin:0;white-space:nowrap}.panel button:disabled,.stage-actions button:disabled,.sidecard button:disabled,.account-page button:disabled{background:#ddd7c8;color:#5c5648;border-color:#a9a294;box-shadow:none;cursor:not-allowed}.panel button.ghost{background:var(--card);font-weight:600}:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.guide-card :focus-visible{outline-color:var(--accent)}.dropzone:focus-within{outline:3px solid var(--ink);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.palette{list-style:none;margin:10px 0;padding:0}.pal{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px 9px;padding:7px;margin-bottom:7px;background:var(--card);border:var(--line);border-radius:6px;box-shadow:var(--pop-sm)}.pal.merging{background:var(--accent);box-shadow:var(--pop)}.pal .chip{grid-area:1 / 1;align-self:start;width:26px;height:26px;border:var(--line);border-radius:4px}.palmeta{grid-area:1 / 2;display:flex;flex-direction:column;gap:3px;min-width:0}.palmeta select,.palmeta input[type=text]{width:100%;background:var(--paper);color:var(--ink);border:var(--line);border-radius:4px;padding:5px 6px;font:inherit;font-size:12px;font-weight:600}.raise{display:grid;grid-template-columns:auto 1fr 46px;align-items:center;gap:6px}.raise>span:first-child{font-size:11px;font-weight:600;opacity:.7}.raise input[type=range]{width:100%;accent-color:var(--ink)}.palacts{grid-area:2 / 1 / 3 / 3;display:flex;gap:5px;justify-content:flex-end}.pal:has(>input[type=color]){grid-template-columns:auto minmax(0,1fr) auto}.pal:has(>input[type=color]) .palacts{grid-area:1 / 3}.palacts button{padding:4px 8px;margin:0;background:var(--card)}.palacts button:last-child:hover:not(:disabled){background:var(--danger);color:#fff}.pal input[type=color]{grid-area:1 / 1;align-self:start;width:30px;height:30px;padding:0;border:var(--line);border-radius:4px;background:none;cursor:pointer}.row input[type=color]{width:30px;height:30px;padding:0;border:var(--line);border-radius:4px;background:none;cursor:pointer}.row input[type=text]{flex:1 1 auto;background:var(--card);color:var(--ink);border:var(--line);border-radius:4px;padding:5px 7px;font:inherit;font-size:12px;font-weight:600}.tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--ok);color:#fff;padding:1px 5px;border-radius:3px}.swatches{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}.swatch{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;font-family:ui-monospace,monospace;background:var(--card);border:var(--line);border-radius:4px;padding:4px 7px}.swatch i{width:13px;height:13px;border-radius:2px;border:var(--line)}button.swatch{box-shadow:var(--pop-sm);cursor:pointer}.picksrc{cursor:crosshair}.brush{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;flex-direction:column;gap:10px;background:var(--paper);padding:14px;overflow-y:auto}.brush-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:none}.brush-bar>strong{font-size:12px}.brush-bar .slider{flex:0 1 200px;margin:0}.brush-targets{display:flex;flex-wrap:wrap;gap:6px}.brush-actions{display:flex;gap:6px;margin-left:auto}.brush-targets .swatch.active{border-color:var(--ink);box-shadow:none;outline:2px solid var(--ink)}.brush-targets .erase{background:repeating-conic-gradient(#d8d2c4,#d8d2c4 25%,#fffdf7 0%,#fffdf7 50%) 0 0 / 8px 8px}.brush-canvas{flex:1 1 0;min-height:0;display:flex;align-items:stretch;justify-content:center;max-height:calc(100vh - 160px)}.brush-frame{position:relative;height:100%;max-width:100%;max-height:100%}.brush-frame .brush-labels{display:block;margin:0;width:100%;height:100%}.brush-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair;touch-action:none}.brush-cursor{position:absolute;pointer-events:none;transform:translate(-50%,-50%);border:1px solid var(--ink);border-radius:50%;box-shadow:0 0 0 1px #fffdf7}.brush>.sub{flex:none;margin:0}.chip.inline{display:inline-block;width:11px;height:11px;border-radius:2px;border:var(--line);vertical-align:-1px}.samples{overflow-y:auto}.samples-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:26px 28px 8px}.samples h2{display:table;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--paper);background:var(--ink);padding:4px 10px;margin:0 0 12px;border-radius:3px}.samples .intro{max-width:520px;font-size:14px;line-height:1.6;margin:0}.samples .busy,.samples .err{margin:0 28px}.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px 28px 30px}@media (max-width: 1100px){.sgrid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 820px){.sgrid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 560px){.sgrid{grid-template-columns:1fr}}.samples .card,.home .card{background:var(--card);border:var(--line);border-radius:6px;box-shadow:var(--pop-sm);padding:10px}.samples button.scard,.home button.scard{display:block;font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:transform .06s,box-shadow .06s}.samples button.scard:hover,.home button.scard:hover{box-shadow:var(--pop);transform:translate(-1px,-1px)}.samples button.scard:active,.home button.scard:active{box-shadow:none;transform:translate(2px,2px)}.samples .imgs,.home .imgs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.samples .imgs img,.home .imgs img{width:100%;aspect-ratio:1;object-fit:contain;border:var(--line);border-radius:4px;background:repeating-conic-gradient(#d8d2c4,#d8d2c4 25%,#fffdf7 0%,#fffdf7 50%) 0 0 / 14px 14px}.samples .name,.home .name{display:block;font-weight:800;font-size:13px}.samples .verdict,.home .verdict{display:block;font-size:12px;color:var(--ink-soft);margin:4px 0 0}.samples .cta{border-left:8px solid var(--accent)}.samples .cta .verdict{margin:6px 0 12px}.samples .credits{margin:0;padding:0 28px 26px;font-size:12px;color:var(--ink-soft)}.samples .credits a{color:var(--ink)}.home{overflow-y:auto;background-image:linear-gradient(#14120d0d 1px,transparent 1px),linear-gradient(90deg,#14120d0d 1px,transparent 1px);background-size:22px 22px}.home h2.sticker{display:table;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--paper);background:var(--ink);padding:4px 10px;margin:0 0 12px;border-radius:3px}.home .btn{display:inline-block;background:var(--card);color:var(--ink);border:var(--line);border-radius:5px;box-shadow:var(--pop-sm);padding:8px 14px;font:inherit;font-size:12px;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .06s,box-shadow .06s}.home .btn:hover:not(:disabled){box-shadow:var(--pop);transform:translate(-1px,-1px)}.home .btn:active:not(:disabled){box-shadow:none;transform:translate(2px,2px)}.home .btn.primary{background:var(--accent)}.home .btn:disabled{background:#ddd7c8;color:#5c5648;border-color:#a9a294;box-shadow:none;cursor:not-allowed}.hero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;padding:44px 42px 38px}@media (max-width: 980px){.hero{grid-template-columns:1fr}}.hero-badges{display:flex;gap:8px;margin-bottom:20px}.home .badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border:var(--line);border-radius:3px;padding:4px 9px}.hero-title{margin:0;font-size:58px;line-height:1.28;font-weight:800;letter-spacing:-.03em;text-wrap:balance}@media (max-width: 560px){.hero-title{font-size:42px}}.hero-title .hl{background:var(--accent);box-shadow:0 0 0 4px var(--accent);border-bottom:5px solid var(--ink)}.hero-sub{max-width:430px;font-size:15px;line-height:1.55;margin:20px 0 0;text-wrap:pretty}.hero-cta{display:flex;gap:12px;align-items:center;margin:22px 0 0}.hero-cta .btn{padding:12px 22px;font-size:14px;box-shadow:var(--pop)}.hero-cta .btn:active:not(:disabled){transform:translate(3px,3px)}.hero-prompt{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0;max-width:430px}.hero-prompt input[type=text]{flex:1 1 220px;min-width:0;box-sizing:border-box;background:var(--card);color:var(--ink);border:var(--line);border-radius:5px;box-shadow:var(--pop);padding:12px 14px;font:inherit;font-size:15px;font-weight:700}.hero-prompt input[type=text]::placeholder{color:var(--ink-soft);font-weight:500}.hero-prompt .btn{padding:12px 22px;font-size:14px;box-shadow:var(--pop)}.hero-prompt .btn:active:not(:disabled){transform:translate(3px,3px)}.hero-note{max-width:430px;font-size:13px;line-height:1.5;color:var(--ink-soft);margin:12px 0 0;text-wrap:pretty}.hero-demo{display:flex;flex-direction:column;gap:14px}.hero-spin{position:relative;max-width:420px;margin:0 auto;aspect-ratio:1;width:100%}.hero-spin picture{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .7s ease-in-out}.hero-spin picture.on{opacity:1}.hero-spin img{display:block;width:100%;height:100%}@media (prefers-reduced-motion: reduce){.hero-spin picture{transition:none}}.steps{display:flex;gap:10px}.step{flex:1;border:var(--line);border-radius:5px;background:var(--card);padding:10px 12px}.step b{display:block;font:800 10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em}.step span{display:block;font-size:12px;margin-top:3px}.band{display:flex;gap:34px;overflow:hidden;white-space:nowrap;padding:10px 42px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:var(--ink)}.band span{font:800 12px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}.library{padding:34px 42px 12px}.library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}.library-title{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}.library .busy,.library .err{margin:0 0 12px}.library-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@media (max-width: 1100px){.library-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 560px){.library-grid{grid-template-columns:1fr}}.home-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;padding:30px 42px 44px;align-items:start}@media (max-width: 820px){.home-cols{grid-template-columns:1fr}}.home-cols .card{padding:20px 22px;box-shadow:var(--pop)}.home .guide-card{background:var(--ink);color:var(--paper)}.guide-card h2.sticker{background:var(--accent);color:var(--ink)}.guide-title{margin:0 0 10px;font-size:20px;font-weight:800;letter-spacing:-.02em}.guide-card ul{list-style:none;margin:0 0 18px;padding:0}.guide-card li{font:500 13px/2 ui-monospace,monospace}.coupon-card{border-left:8px solid var(--accent)}.coupon-card .verdict{margin:0 0 14px}.home-foot{display:flex;align-items:center;gap:18px;padding:18px 42px;border-top:3px solid var(--ink);background:var(--card)}.foot-mark{font-size:13px;font-weight:800;letter-spacing:-.02em;background:var(--accent);border:var(--line);padding:2px 8px;box-shadow:var(--pop);transform:rotate(-1.5deg);margin-right:auto}.account-page{max-width:480px;margin:0 auto;padding:40px 24px}.account-form{display:flex;gap:8px;margin:16px 0}.account-form input{flex:1 1 auto;border:var(--line);border-radius:5px;padding:8px 10px;font:inherit}.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:16px 0 0;padding:10px 16px;background:var(--card);color:var(--ink);border:var(--line);border-radius:5px;font-size:14px;font-weight:800;text-decoration:none;box-shadow:var(--pop-sm);transition:transform .06s,box-shadow .06s}.oauth-btn:hover{box-shadow:var(--pop);transform:translate(-1px,-1px)}.oauth-btn:active{box-shadow:none;transform:translate(2px,2px)}.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0 0;color:var(--ink-soft);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.auth-divider:before,.auth-divider:after{content:"";flex:1 1 0;border-top:var(--line)}.auth-alt{font-size:13px}.auth-alt a,.account-methods a,.auth-foot a,.account-foot a{color:var(--ink);font-weight:800}.auth-foot{margin-top:24px;padding-top:12px;border-top:var(--line);font-size:12px;color:var(--ink-soft)}.account-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:16px 0 24px}.account-meta dt{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}.account-meta dd{margin:0;font-size:14px}.account-h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em}.account-methods{list-style:none;margin:0 0 24px;padding:0}.account-methods li{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border:var(--line);border-radius:5px;background:var(--card);font-size:13px}.account-methods li+li{margin-top:8px}.account-methods li>strong{white-space:nowrap}.account-note{flex:1 1 auto;color:var(--ink-soft);font-size:12px}.account-page button.linkish,.account-page a.linkish{background:none;border:0;padding:0;font:inherit;font-weight:800;color:var(--ink);text-decoration:underline;cursor:pointer}.account-page button.linkish:disabled{color:var(--ink-soft);cursor:not-allowed;text-decoration:none}.ok-note{color:var(--ok);font-weight:700}.account-foot{font-size:12px;color:var(--ink-soft)}.pricing-table{width:100%;border-collapse:collapse;margin:16px 0}.pricing-table th,.pricing-table td{border:var(--line);padding:8px 10px;text-align:left;font-size:13px}.home-foot a{font-size:12px;font-weight:700;color:var(--ink)}
