*,*:before,*:after{box-sizing:border-box}:root{--void: #050607;--panel: #090b0d;--panel-2: #0f1215;--line: #2b3035;--line-hot: #ff2b16;--signal: #ff2b16;--signal-alt: #42ff18;--ice: #00e5ff;--alert: #ffe600;--paper: #f1f4ef;--ink: #e7ebe8;--ink-soft: #747b80;--tap: 44px;--visual-viewport-height: 100dvh;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-mono: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace}html{min-height:100%;background:var(--void);-webkit-text-size-adjust:100%}body{min-height:100vh;min-height:100dvh}body{margin:0;color:var(--ink);font:15px/1.55 var(--font-ui);background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),radial-gradient(circle at 78% 18%,rgba(0,229,255,.09),transparent 26%),radial-gradient(circle at 12% 74%,rgba(255,43,22,.1),transparent 30%),var(--void);background-size:36px 36px,36px 36px,auto,auto,auto;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;overflow-x:hidden;overflow-x:clip}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;user-select:none}:focus-visible{outline:2px solid var(--signal);outline-offset:3px}.app{min-height:100vh;min-height:100dvh;min-height:var(--visual-viewport-height, 100dvh);display:flex;flex-direction:column}.masthead{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:13px;min-height:calc(58px + env(safe-area-inset-top));padding:calc(10px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:#050607e8;backdrop-filter:blur(16px)}.wordmark{margin:0;color:var(--paper);font:800 15px/1 var(--font-mono);letter-spacing:.22em}.wordmark span{color:var(--signal)}.masthead .spacer{flex:1}.local-badge{color:var(--signal-alt);font:700 8px/1 var(--font-mono);letter-spacing:.15em;text-transform:uppercase;padding:6px 8px;border:1px solid rgba(66,255,24,.35)}.local-badge:before{content:"●";margin-right:6px;animation:blink 1.6s steps(1) infinite}.lang-toggle{min-width:58px;min-height:var(--tap);padding:7px 10px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-soft);font:700 9px/1 var(--font-mono);letter-spacing:.11em}.lang-toggle:hover{border-color:var(--signal);color:var(--paper)}.landing{flex:1;width:min(1080px,100%);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:34px max(18px,env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));text-align:center}.eyebrow{margin:0;color:var(--signal);font:700 9px/1 var(--font-mono);letter-spacing:.26em;text-transform:uppercase}.landing h2{max-width:720px;margin:0;color:var(--paper);font:800 clamp(28px,6vw,58px)/1.02 var(--font-ui);letter-spacing:-.045em}.lede{max-width:650px;margin:0;color:#92999e;font:400 clamp(13px,2vw,16px)/1.65 var(--font-ui)}.sample{position:relative;width:min(420px,86vw);margin:8px 0 0;background:#020303;border:1px solid #4a4f54;box-shadow:0 0 0 1px #000,0 0 36px #ff2b161c,0 20px 64px #00000094}.sample:before,.sample:after{content:"";position:absolute;z-index:2;pointer-events:none;width:34px;height:34px;border-color:var(--signal);border-style:solid}.sample:before{left:-2px;top:-2px;border-width:3px 0 0 3px}.sample:after{right:-2px;bottom:-2px;border-width:0 3px 3px 0}.sample img{display:block;width:100%;height:auto;aspect-ratio:636 / 798;object-fit:cover}.sample figcaption{position:absolute;left:10px;bottom:10px;z-index:3;color:var(--void);background:var(--signal);padding:6px 9px;font:800 8px/1 var(--font-mono);letter-spacing:.15em;text-transform:uppercase}.dropzone{position:relative;width:min(420px,90vw);padding:18px 20px;border:1px solid var(--signal);background:#ff2b160e;cursor:pointer;display:block;text-align:left;transition:background .16s,box-shadow .16s}.dropzone:before{content:"↑";position:absolute;right:18px;top:50%;transform:translateY(-52%);color:var(--signal);font:800 22px/1 var(--font-mono)}.dropzone:hover,.dropzone.over{background:#ff2b1621;box-shadow:inset 0 0 0 1px var(--signal)}.dropzone strong{display:block;color:var(--paper);padding-right:34px;font:750 13px/1.35 var(--font-ui)}.dropzone span{display:block;margin-top:5px;color:var(--ink-soft);font:9px/1.4 var(--font-mono);letter-spacing:.08em}.dropzone input{display:none}.landing .privacy{margin:0;display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);font:700 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.landing .privacy:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal-alt);box-shadow:0 0 10px #42ff188c}@media (min-width: 900px){.landing{display:grid;grid-template-columns:minmax(340px,1fr) 420px;grid-template-areas:"eyebrow sample" "title sample" "lede sample" "drop sample" "privacy sample";column-gap:clamp(52px,8vw,112px);row-gap:18px;padding:62px 24px 72px;text-align:left}.eyebrow{grid-area:eyebrow;justify-self:start;align-self:end}.landing h2{grid-area:title}.lede{grid-area:lede}.sample{grid-area:sample;width:420px;margin:0}.dropzone{grid-area:drop;width:100%}.landing .privacy{grid-area:privacy;justify-self:start;align-self:start}}.workspace{flex:1;display:none;flex-direction:column;min-height:calc(100vh - 58px);min-height:calc(var(--visual-viewport-height, 100dvh) - 58px - env(safe-area-inset-top))}body.ready .workspace,body.working .workspace{display:flex}body.ready .landing,body.working .landing{display:none}.stage{flex:1;min-height:0;padding:18px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,rgba(255,43,22,.045),transparent 42%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px}#stage{display:block;touch-action:none;max-width:100%;max-height:72vh;max-height:72dvh;width:auto;height:auto;cursor:crosshair;background:#000;-webkit-touch-callout:none;border:1px solid #40464b;box-shadow:0 0 0 1px #000,0 0 28px #ff2b1612,0 18px 54px #000000b8}.statusbar{min-height:31px;padding:7px 16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:#070809;border-top:1px solid var(--line);color:var(--ink-soft);font:9px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.gesture-hint{margin-left:auto;color:#7f878c}.statusbar .mode{color:var(--signal-alt)}.statusbar .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:var(--signal-alt);box-shadow:0 0 8px #42ff18b3}.statusbar .mode.l3{color:var(--alert)}.statusbar .mode.l3 .dot{background:var(--alert);box-shadow:0 0 8px #ffe600a6}.controls{display:flex;flex-direction:column;gap:14px;background:#080a0cfa;border-top:1px solid #373c41;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}.group h3{margin:0 0 9px;padding-bottom:7px;border-bottom:1px solid var(--line);color:#686f74;font:700 8.5px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase}.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:5px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:4px;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}.filters::-webkit-scrollbar{display:none}.fbtn{flex:0 0 76px;scroll-snap-align:start;padding:4px;border:1px solid var(--line);background:#080a0c;cursor:pointer;display:flex;flex-direction:column;min-height:var(--tap);color:#777e83;transition:border-color .12s,color .12s,transform .12s}.fbtn:hover{border-color:#62686d;color:var(--paper);transform:translateY(-1px)}.fbtn img{width:100%;display:block;aspect-ratio:84/106;object-fit:cover;filter:contrast(1.04)}.fbtn span{padding:6px 2px 3px;background:#080a0c;font:700 7px/1 var(--font-mono);letter-spacing:.07em}.fbtn.on{border-color:var(--signal);color:var(--signal);box-shadow:inset 0 0 0 1px #ff2b1652}.sheet-row{display:flex;gap:7px;align-items:center}.sheet-row.wrap{flex-wrap:wrap}.btn{flex:1 1 auto;min-height:var(--tap);padding:10px 12px;cursor:pointer;border:1px solid #454b50;background:#0a0c0e;color:#9ba1a5;font:700 9.5px/1.25 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;transition:border-color .12s,background .12s,color .12s}.btn:hover,.btn.on{border-color:var(--paper);color:var(--paper);background:#15191c}.btn.primary{border-color:var(--signal);background:#ff2b161f;color:var(--signal)}.btn.primary:hover{background:var(--signal);color:#090a0b}.btn.danger{border-color:#ad3226;color:#e45447}.btn.danger:hover{background:#ad3226;color:var(--paper)}.btn.tiny{flex:0 0 auto;min-height:34px;padding:6px 9px;font-size:8px}.btn[disabled]{opacity:.42;cursor:not-allowed}.swatch{min-height:var(--tap);padding:5px 8px 5px 6px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#080a0c;color:#858c91}.swatch.on{border-color:var(--paper);color:var(--paper)}.swatch-ink{width:13px;height:13px;border:1px solid rgba(255,255,255,.24);display:inline-block}.swatch-name{font:700 8px/1 var(--font-mono);letter-spacing:.08em}.custom-row{margin-top:8px}.colour-field{display:inline-flex;align-items:center;gap:6px}.colour-field span{color:#7d8489;font:700 8px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.colour-field input{width:var(--tap);height:var(--tap);padding:0;border:1px solid var(--line);background:#080a0c}.edit-toggle{display:none}@media (min-width: 900px){.controls{flex-direction:row;align-items:flex-start;gap:22px;padding:14px 18px 16px}.controls>.group{flex:1 1 0;min-width:0}.controls>.group:first-child{flex:1.8 1 0}.controls>.group.actions{flex:0 0 175px}.fbtn{flex-basis:72px}}.sheet-wrap{position:fixed;inset:0;z-index:40}.sheet-backdrop{position:absolute;inset:0;background:#000000b8;opacity:0;transition:opacity .2s}.sheet-wrap.in .sheet-backdrop{opacity:1}.sheet{position:absolute;left:0;right:0;bottom:0;max-height:84vh;max-height:min(84dvh,calc(var(--visual-viewport-height, 100dvh) - env(safe-area-inset-top) - 12px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#090b0d;border-top:1px solid #4a5055;padding:15px 16px calc(17px + env(safe-area-inset-bottom));transform:translateY(102%);transition:transform .22s cubic-bezier(.22,.7,.3,1);box-shadow:0 -12px 42px #000000a6}.sheet-wrap.in .sheet{transform:translateY(0)}.sheet-head{position:sticky;top:-15px;z-index:2;display:flex;justify-content:space-between;align-items:baseline;padding:15px 0 10px;margin:-15px 0 12px;border-bottom:1px solid var(--line);background:#090b0d}.sheet-head strong{color:var(--paper);font:700 12px/1 var(--font-ui)}.sheet-id{color:var(--signal);font:9px/1 var(--font-mono)}.sheet-group{margin-bottom:14px}.sheet-group-title{display:block;margin-bottom:7px;color:#6f767b;font:700 8px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase}.chip-grid{display:flex;flex-wrap:wrap;gap:6px}.chip{min-height:var(--tap);padding:7px 10px;cursor:pointer;border:1px solid var(--line);background:#0d1012;color:#939a9f;font:700 9px/1 var(--font-mono);letter-spacing:.06em}.chip.on{background:var(--signal);color:#050607;border-color:var(--signal)}.sheet-input{width:100%;min-height:var(--tap);padding:10px 11px;border:1px solid var(--line);background:#060708;color:var(--paper);font:11px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.sheet-foot{position:sticky;bottom:calc(-17px - env(safe-area-inset-bottom));z-index:2;display:flex;gap:8px;margin:15px -16px calc(-17px - env(safe-area-inset-bottom));padding:10px 16px calc(17px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#090b0ddb,#090b0d 26%)}body.sheet-open{overflow:hidden}@media (min-width: 720px){.sheet{left:50%;right:auto;bottom:50%;width:470px;transform:translate(-50%,60%);border:1px solid #4a5055}.sheet-wrap.in .sheet{transform:translate(-50%,50%)}}.toast-host{position:fixed;left:0;right:0;z-index:60;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none;padding:0 14px}.toast{display:inline-flex;align-items:center;gap:12px;max-width:92vw;background:#111416;color:var(--paper);border:1px solid #4a5055;padding:11px 14px;pointer-events:auto;font:12px/1.3 var(--font-ui);box-shadow:0 12px 32px #0000009e;opacity:0;transform:translateY(9px);transition:opacity .18s,transform .18s}.toast.in{opacity:1;transform:translateY(0)}.toast-action{min-height:var(--tap);padding:6px 9px;cursor:pointer;border:1px solid var(--signal);background:transparent;color:var(--signal);font:700 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.progress{position:fixed;inset:0;z-index:50;display:none;height:var(--visual-viewport-height, 100dvh);align-items:center;justify-content:center;flex-direction:column;gap:14px;background:#030405f0}body.working .progress{display:flex}.progress p{margin:0;color:var(--signal-alt);font:700 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase}.spinner{width:42px;height:42px;border:1px solid #30402f;border-top-color:var(--signal-alt);border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 20px #42ff181f}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{50%{opacity:.28}}@media (prefers-reduced-motion: reduce){.spinner,.local-badge:before{animation:none}.toast,.sheet,.sheet-backdrop{transition:none}}@media (max-width: 520px){.local-badge{display:none}.landing{justify-content:flex-start;padding-top:30px}.landing h2{max-width:12em}#stage{max-height:66vh;max-height:66dvh}}@media (max-width: 899px){body{overscroll-behavior-y:auto}.stage{padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))}#stage{touch-action:pan-y pinch-zoom;cursor:default}body.edit-mode #stage{touch-action:none;cursor:crosshair}body.edit-mode .stage{box-shadow:inset 0 0 0 1px #ff2b166b}.statusbar{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}.gesture-hint{order:3;flex:1 0 100%;margin-left:0;color:#656d72;font-size:8px}.controls{padding:14px max(16px,env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.fbtn{flex-basis:84px}.actions{position:fixed;z-index:28;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid #454b50;background:#050607f0;backdrop-filter:blur(18px);box-shadow:0 -12px 30px #00000094}.actions h3{display:none}.actions .btn{min-height:48px}.actions .edit-toggle{display:block;flex:.78 1 0}.actions #save{flex:1.22 1 0}.sheet-input{font-size:16px}}@media (max-height: 520px) and (orientation: landscape) and (max-width: 899px){.masthead{position:relative}.stage{align-items:flex-start}#stage{max-height:calc(var(--visual-viewport-height, 100dvh) - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
