:root{--paper: #f7f6f3;--card: #fffdf7;--ink: #14120d;--ink-soft: #6b6455;--accent: #ffd23f;--danger: #ff5a52;--warn: #f08c1a;--ok: #2fa36b;--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 13px/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;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 11px ui-monospace,monospace;color:var(--ink-soft)}.hint summary:hover{color:var(--ink)}.hint .sub{margin:6px 0 0}.panel section{margin:0 0 20px}.panel h3,.buildcard h3,.sidecard h3{display:table;font-size:10px;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:11px;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:#b8560a;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:11px;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%}.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 11px/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:11px}.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:74px 1fr 56px;align-items:center;gap:6px;margin-bottom:7px}.slabel{font-size:11px;font-weight:600}.sval{font-size:10px;font-family:ui-monospace,monospace;text-align:right;color:var(--ink-soft)}.slider input[type=range]{width:100%;accent-color:var(--ink)}.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:11px;font-weight:700;margin-bottom:18px;transition:transform .08s,background .08s}.dropzone.over{background:var(--accent);border-style:solid;transform:rotate(-1deg) scale(1.02)}.dropzone label{cursor:pointer;display:block}.panel button,.stage-actions button,.sidecard button,.samples .cta button{background:var(--accent);color:var(--ink);border:var(--line);border-radius:5px;box-shadow:var(--pop-sm);padding:6px 12px;font:inherit;font-size:11px;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){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){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{background:#ddd7c8;color:#9c958a;border-color:#9c958a;box-shadow:none;cursor:not-allowed}.panel button.ghost{background:var(--card);font-weight:600}.palette{list-style:none;margin:10px 0;padding:0}.pal{display:flex;align-items:center;gap: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);transform:rotate(-.7deg)}.pal .chip{width:26px;height:26px;flex:0 0 auto;border:var(--line);border-radius:4px}.palmeta{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}.palmeta select,.palmeta input[type=text]{width:100%;background:var(--paper);color:var(--ink);border:var(--line);border-radius:4px;padding:4px 5px;font:inherit;font-size:11px;font-weight:600}.raise{display:grid;grid-template-columns:30px 1fr 42px;align-items:center;gap:5px}.raise>span:first-child{font-size:10px;font-weight:600;opacity:.7}.raise input[type=range]{width:100%;accent-color:var(--ink)}.palacts{display:flex;gap:5px;flex:0 0 auto}.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],.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:11px;font-weight:600}.tag{font-size:10px;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:10px;font-weight:700;font-family:ui-monospace,monospace;background:var(--card);border:var(--line);border-radius:4px;padding:3px 6px}.swatch i{width:13px;height:13px;border-radius:2px;border:var(--line)}button.swatch{box-shadow:var(--pop-sm);cursor:pointer}.picksrc{cursor:crosshair}.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:#9c958a;border-color:#9c958a;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-demo{display:flex;flex-direction:column;gap:14px}.frame{border:var(--line);border-radius:6px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;background:var(--card)}.frame-bar{display:flex;align-items:center;gap:7px;padding:8px 11px;background:var(--ink)}.frame-bar i{width:10px;height:10px;border-radius:50%}.frame-bar i:nth-child(1){background:var(--danger)}.frame-bar i:nth-child(2){background:var(--accent)}.frame-bar i:nth-child(3){background:var(--paper)}.frame-bar span{margin-left:8px;font:500 11px ui-monospace,monospace;color:var(--paper)}.frame img{display:block;width:100%;height:auto}.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}.home-foot a{font-size:12px;font-weight:700;color:var(--ink)}