@import"https://fonts.googleapis.com/css2?family=Archivo+Black&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap";:root{font-family:Manrope,sans-serif;color:#f1e8d6;background:#10131b;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #10131b;--ink-soft: #171c28;--ink-raised: #1d2432;--paper: #f1e8d6;--paper-muted: #b8b1a4;--line: rgba(241, 232, 214, .18);--line-strong: rgba(241, 232, 214, .58);--blue: #2166d1;--magenta: #ff3d81;--orange: #ff5c35;--yellow: #ffc400;--mono: "Space Mono", monospace;--display: "Archivo Black", sans-serif}*{box-sizing:border-box}html{min-width:320px;background:var(--ink)}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden;background:var(--ink)}body,button,input{font-family:inherit}button,input,textarea{font-size:inherit}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}button:disabled{cursor:wait;opacity:.58}::selection{color:var(--ink);background:var(--yellow)}*{scrollbar-color:var(--magenta) var(--ink-soft);scrollbar-width:thin}.app-shell{min-height:100vh;overflow-x:clip;background:var(--ink)}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:56px;padding:0 34px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.brand{display:inline-flex;align-items:center;gap:13px;width:max-content;color:var(--paper);text-decoration:none}.brand-mark{display:grid;grid-template-columns:repeat(3,4px);gap:3px;width:18px}.brand-mark i{display:block;width:4px;height:4px;background:var(--magenta)}.brand-mark i:nth-child(2n){background:var(--orange)}.brand-mark i:nth-child(3n){background:var(--blue)}.brand-name{font-weight:700;letter-spacing:.05em}.brand-name b{color:var(--magenta);font-weight:400}.topbar-center{display:inline-flex;align-items:center;gap:9px;color:var(--paper-muted)}.topbar-slash{color:var(--line-strong)}.status-light{display:inline-block;width:7px;height:7px;background:#9fe870;box-shadow:0 0 12px #9fe870cc}.status-light.small{width:5px;height:5px;box-shadow:none}.export-button{justify-self:end;display:inline-flex;align-items:center;gap:14px;min-height:38px;padding:0 15px;border:1px solid var(--orange);border-radius:2px;background:var(--orange);color:var(--ink);cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;transition:background .18s ease,color .18s ease,transform .18s ease}.export-button:hover{background:transparent;color:var(--orange);transform:translateY(-2px)}.export-button svg,.rail-export svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-linecap:square;stroke-linejoin:miter;stroke-width:1.5}main{width:min(100% - 48px,1600px);margin:0 auto;padding:0 0 20px}.intro{display:flex;min-width:0;align-items:center;gap:28px;padding:14px 0;border-bottom:1px solid var(--line)}.intro h1{flex:0 0 auto;margin:0;color:var(--paper);font-family:var(--display);font-size:clamp(1.7rem,2.4vw,2.4rem);font-weight:900;letter-spacing:-.06em;line-height:.9;text-transform:uppercase;white-space:nowrap}.intro h1 span{color:var(--orange)}.intro p{max-width:440px;margin:0;color:var(--paper-muted);font-size:13px;line-height:1.5}.intro-stamp{display:flex;align-items:center;gap:12px;margin-left:auto;color:var(--paper-muted);font-family:var(--mono);font-size:9px;letter-spacing:.08em;line-height:1.5;text-align:right;text-transform:uppercase}.stamp-ring{display:grid;order:2;width:50px;height:50px;place-items:center;border:1px solid var(--magenta);border-radius:50%;color:var(--magenta);font-size:7px;line-height:1.25;text-align:center;transform:rotate(11deg)}.stamp-caption{max-width:68px}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;padding-top:18px}.workbench{min-width:0;border:1px solid var(--line-strong);background:var(--ink-soft);box-shadow:18px 18px #2166d12e}.workbench-header,.workbench-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:52px;padding:0 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.source-tabs{display:flex;align-items:stretch;align-self:stretch;gap:20px}.source-tabs button{position:relative;min-width:0;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 4px;border:0;background:transparent;color:var(--paper-muted);cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.source-tabs button:after{position:absolute;right:0;bottom:-1px;left:0;height:3px;background:var(--magenta);content:"";transform:scaleX(0);transform-origin:left;transition:transform .18s ease}.source-tabs button:hover,.source-tabs button.active{color:var(--paper)}.source-tabs button.active:after{transform:scaleX(1)}.tab-index{color:var(--line-strong);font-size:9px}.compare-control,.invert-control{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--paper-muted);cursor:pointer;font-family:var(--mono);font-size:9px;letter-spacing:.06em;white-space:nowrap}.invert-control{justify-content:space-between;width:100%;min-height:36px;margin-top:4px;padding:0;font-size:10px;text-transform:uppercase}.compare-control.active,.invert-control.active{color:var(--yellow)}.switch-track{display:inline-flex;align-items:center;width:27px;height:14px;padding:2px;border:1px solid var(--line-strong);background:var(--ink);transition:border-color .16s ease,background .16s ease}.switch-thumb{width:8px;height:8px;background:var(--paper-muted);transition:transform .16s ease,background .16s ease}.compare-control.active .switch-track,.invert-control.active .switch-track{border-color:var(--yellow);background:#ffc40026}.compare-control.active .switch-thumb,.invert-control.active .switch-thumb{background:var(--yellow);transform:translate(12px)}.canvas-stage{position:relative;display:grid;min-width:0;height:clamp(300px,62vw,560px);place-items:center;overflow:hidden;background-color:#1a202d;background-image:radial-gradient(rgba(241,232,214,.09) .75px,transparent .75px);background-size:13px 13px;transition:background-color .18s ease}.canvas-stage.dragging{background-color:#202b3c}.preview-canvas{position:absolute;inset:var(--stage-padding, 40px);display:block;width:auto;height:auto;max-width:calc(100% - var(--stage-padding, 40px) * 2);max-height:calc(100% - var(--stage-padding, 40px) * 2);margin:auto;background:var(--paper);box-shadow:12px 12px #0000003b,0 22px 42px #0000004d;transition:filter .18s ease,transform .18s ease}.preview-canvas.comparing{cursor:ew-resize;touch-action:pan-y}.canvas-stage.dragging .preview-canvas{filter:saturate(.7);transform:scale(.985)}.canvas-status{position:absolute;z-index:2;top:50%;left:50%;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line-strong);background:#10131bd1;color:var(--paper-muted);font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .18s ease}.canvas-status.visible{opacity:1}.canvas-status-dot{width:6px;height:6px;background:var(--yellow);animation:canvas-status-pulse 1.1s steps(2,end) infinite}@keyframes canvas-status-pulse{0%,to{opacity:1}50%{opacity:.25}}.registration-mark{position:absolute;z-index:1;width:24px;height:24px;pointer-events:none}.registration-mark:before,.registration-mark:after{position:absolute;background:var(--magenta);content:""}.registration-mark:before{top:11px;left:0;width:24px;height:1px}.registration-mark:after{top:0;left:11px;width:1px;height:24px}.mark-tl{top:18px;left:18px}.mark-tr{top:18px;right:18px}.mark-bl{bottom:18px;left:18px}.mark-br{right:18px;bottom:18px}.canvas-coordinate{position:absolute;z-index:1;color:#f1e8d699;font-family:var(--mono);font-size:9px;letter-spacing:.08em;pointer-events:none;text-transform:uppercase}.coordinate-top{top:22px;right:56px}.coordinate-bottom{right:56px;bottom:22px}.drag-overlay{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(76%,430px);height:min(76%,390px);border:1px solid var(--yellow);background:#10131be6;color:var(--paper);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-align:center;opacity:0;pointer-events:none;transform:scale(.96);transition:opacity .18s ease,transform .18s ease}.drag-overlay[aria-hidden=false]{opacity:1;transform:scale(1)}.drag-overlay-mark{display:grid;width:42px;height:42px;margin-bottom:18px;place-items:center;border:1px solid var(--yellow);color:var(--yellow);font-family:var(--display);font-size:28px;line-height:1}.drag-overlay strong{margin-bottom:9px;color:var(--yellow);font-size:11px}.drag-overlay span:last-child{color:var(--paper-muted);font-size:9px}.workbench-footer{min-height:44px;border-top:1px solid var(--line);border-bottom:0;color:var(--paper-muted)}.source-readout{display:inline-flex;flex:0 1 auto;align-items:center;gap:10px;min-width:0}.readout-label{color:var(--line-strong);font-size:9px}.source-readout strong{max-width:240px;overflow:hidden;color:var(--paper);font-size:10px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.demo-tag{padding:3px 5px;border:1px solid var(--orange);color:var(--orange);font-size:8px}.control-rail{min-width:0;border-left:1px solid var(--line-strong);padding-left:24px}.section-note,.text-button,.upload-button small,.option-label,.color-field span,.range-field span,.text-source>label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.control-section{border-bottom:1px solid var(--line);padding:18px 0 20px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;margin-bottom:12px;color:var(--paper);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.section-note{max-width:140px;overflow:hidden;color:var(--line-strong);font-size:10px;font-weight:400;text-align:right;text-overflow:ellipsis;white-space:nowrap}.upload-button{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:2px;background:transparent;color:var(--paper);cursor:pointer;text-align:left;transition:border-color .18s ease,background .18s ease}.upload-button:hover{border-color:var(--orange);background:#ff5c3514}.upload-icon{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border:1px solid var(--orange);color:var(--orange)}.upload-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:square;stroke-width:1.3}.upload-button strong,.upload-button small{display:block}.upload-button strong{font-family:var(--mono);font-size:10px;letter-spacing:.06em}.upload-button small{margin-top:4px;color:var(--paper-muted);font-size:9px;letter-spacing:.04em;text-transform:none}.sample-row{align-items:start;margin:12px 0 0}.sample-row .option-label{padding-top:6px}.sample-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.sample-list button{display:grid;gap:5px;min-width:0;padding:4px 4px 6px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--paper-muted);cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-align:left;text-transform:uppercase;transition:border-color .16s ease,color .16s ease}.sample-list button:hover{border-color:var(--line-strong);color:var(--paper)}.sample-list button.active{border-color:var(--magenta);background:var(--ink-raised);color:var(--paper)}.sample-list img{display:block;width:100%;height:52px;object-fit:cover;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}.sample-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-source{display:grid;gap:9px}.text-source>label{color:var(--line-strong)}.text-source input[type=text]{width:100%;padding:11px 12px;border:1px solid var(--line-strong);border-radius:0;outline:none;background:var(--ink-soft);color:var(--paper);font-family:var(--display);font-size:16px;letter-spacing:-.03em}.text-source input[type=text]:focus{border-color:var(--orange)}.inline-fields,.color-pair{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:10px}.option-row .color-pair{margin-top:0}.color-field,.range-field{display:grid;gap:7px;min-width:0}.color-field{display:flex;align-items:center;gap:8px;cursor:pointer}.color-field span,.range-field span{color:var(--paper-muted)}.color-field input[type=color]{order:-1;flex:0 0 auto;width:34px;height:30px;padding:2px;border:1px solid var(--line-strong);border-radius:2px;background:var(--ink-soft);cursor:pointer}.color-field input[type=color]:disabled{cursor:not-allowed;opacity:.35}.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.shape-grid button{display:grid;min-height:66px;padding:7px 4px 6px;place-items:center;gap:6px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--paper-muted);cursor:pointer;font-family:var(--mono);font-size:8px;letter-spacing:.04em;text-transform:uppercase;transition:border-color .16s ease,color .16s ease,background .16s ease}.shape-grid button:hover,.shape-grid button.active{border-color:var(--orange);background:#ff5c3514;color:var(--paper)}.shape-thumb{display:block;width:24px;height:24px;background:var(--blue)}.thumb-orb{border-radius:50%}.thumb-star{clip-path:polygon(50% 0,61% 34%,98% 35%,68% 57%,79% 94%,50% 73%,21% 94%,32% 57%,2% 35%,39% 34%)}.thumb-arch{border-radius:50% 50% 0 0}.thumb-burst{clip-path:polygon(50% 0,60% 34%,79% 10%,72% 43%,100% 35%,76% 58%,98% 76%,67% 70%,61% 100%,46% 73%,26% 97%,32% 63%,0 72%,26% 53%,5% 37%,36% 40%)}.preset-swatch{display:block;width:100%;height:30px;border:1px solid var(--line);background:var(--preset-bg);background-image:radial-gradient(var(--preset-ink) 1.2px,transparent 1.3px);background-size:6px 6px}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}.preset-grid button{display:grid;gap:6px;min-width:0;padding:5px 5px 7px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--paper-muted);cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-align:left;text-transform:uppercase;transition:border-color .16s ease,background .16s ease,color .16s ease}.preset-grid button:hover{border-color:var(--line-strong);color:var(--paper)}.preset-grid button.active{border-color:var(--magenta);background:var(--ink-raised);color:var(--paper)}.preset-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-description{margin:10px 0 0;color:var(--paper-muted);font-size:12px;line-height:1.45}.option-row{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px;margin-bottom:10px}.option-label{color:var(--paper-muted)}.segmented{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:2px;padding:2px;border:1px solid var(--line);border-radius:2px}.segmented button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:30px;padding:0 6px;border:0;border-radius:1px;background:transparent;color:var(--paper-muted);cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;transition:background .16s ease,color .16s ease}.segmented button:hover{color:var(--paper)}.segmented button.active{background:#2166d147;box-shadow:inset 0 0 0 1px var(--blue);color:var(--paper)}.segmented button:disabled{background:transparent;box-shadow:none;color:var(--paper-muted);cursor:not-allowed;opacity:.35}.shape-glyph{flex:0 0 auto;width:8px;height:8px;background:currentColor}.shape-glyph.circle{border-radius:50%}.text-button{min-height:28px;padding:0 4px;border:0;background:transparent;color:var(--orange);cursor:pointer;letter-spacing:.06em}.text-button:hover{color:var(--paper)}.slider-control{display:grid;gap:2px;margin-top:10px}.slider-control:first-of-type{margin-top:0}.control-label{display:flex;align-items:center;justify-content:space-between;color:var(--paper-muted);font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase}.control-label output{color:var(--paper);font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:24px;margin:0;background:transparent;accent-color:var(--orange);cursor:pointer}.rail-export{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 13px;border:1px solid var(--orange);border-radius:2px;background:var(--orange);color:var(--ink);cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-align:left;transition:background .18s ease,color .18s ease}.rail-export:hover{background:transparent;color:var(--orange)}.output-note{margin:10px 0 0;color:var(--paper-muted);font-size:12px;line-height:1.45}.output-section{border-bottom:0}.status-line{display:flex;flex:1 1 auto;align-items:center;justify-content:flex-end;gap:8px;min-width:0;margin:0;color:var(--paper-muted);font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:none}.status-line>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-line[data-kind=error]{color:var(--paper)}.status-line[data-kind=error] .status-light{background:var(--orange);box-shadow:0 0 12px #ff5c35b3}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:821px){.app-shell{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:620px}main{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.editor-grid{flex:1 1 auto;min-height:0;align-items:stretch}.workbench{display:flex;flex-direction:column;min-height:0}.canvas-stage{flex:1 1 auto;height:auto;min-height:0}.control-rail{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:10px}}@media(max-width:1080px){.editor-grid{grid-template-columns:minmax(0,1fr) 300px;gap:22px}.control-rail{padding-left:18px}.intro-stamp{display:none}}@media(max-width:820px){.topbar{grid-template-columns:1fr auto;padding:0 20px}.topbar-center{display:none}main{width:min(100% - 32px,680px)}.intro{flex-wrap:wrap;gap:6px 16px;padding:16px 0}.editor-grid{grid-template-columns:1fr}.control-rail{border-top:1px solid var(--line-strong);border-left:0;padding:4px 0 0}}@media(max-width:560px){.topbar{min-height:52px;padding:0 16px}.topbar .export-button{display:none}.brand-name{font-size:9px}main{width:min(100% - 28px,480px)}.intro p{font-size:12px}.workbench{box-shadow:8px 8px #2166d12e}.workbench-header{align-items:stretch;flex-direction:column;gap:6px;padding:8px 14px 6px}.source-tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:8px}.source-tabs button{justify-content:center}.compare-control{width:100%;justify-content:space-between}.canvas-stage{--stage-padding: 18px;height:clamp(240px,72vw,420px)}.canvas-coordinate{font-size:7px}.coordinate-top{top:6px;right:32px}.coordinate-bottom{right:32px;bottom:6px}.registration-mark{width:14px;height:14px}.registration-mark:before{top:6px;width:14px}.registration-mark:after{left:6px;height:14px}.mark-tl,.mark-tr{top:4px}.mark-bl,.mark-br{bottom:4px}.mark-tl,.mark-bl{left:4px}.mark-tr,.mark-br{right:4px}.workbench-footer{align-items:flex-start;flex-direction:column;gap:6px;padding:10px 14px}.status-line{justify-content:flex-start;width:100%}}@media(pointer:coarse){input[type=range]{height:44px}.segmented button,.text-button{min-height:44px}.color-field input[type=color]{width:44px;height:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}