:root{--bg:#11130f;--bg-soft:#171a14;--panel:#1b1d17;--panel-soft:#24271f;--panel-warm:#2c281c;--border:#43483a;--border-soft:#fff4d61a;--text:#f3efe1;--muted:#a9a38f;--accent:#d8a93b;--accent-strong:#f0be4d;--danger:#e57c65;--shadow:0 24px 70px #20180a57;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Avenir Next,Trebuchet MS,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 16% 8%, #d8a93b33, transparent 28rem), radial-gradient(circle at 84% 4%, #76906029, transparent 34rem), linear-gradient(180deg, #151711, var(--bg) 62%);min-width:320px;min-height:100dvh;margin:0;position:relative}body:before{z-index:0;content:"";pointer-events:none;background-image:linear-gradient(#fff4d608 1px,#0000 1px),linear-gradient(90deg,#fff4d608 1px,#0000 1px);background-size:24px 24px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 82%);mask-image:linear-gradient(#000,#0000 82%)}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--border-soft);color:var(--text);background:linear-gradient(#fff4d614,#fff4d608);border-radius:12px;padding:10px 13px;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;box-shadow:inset 0 1px #ffffff12}button:hover:not(:disabled){background:linear-gradient(#d8a93b29,#fff4d60d);border-color:#d8a93b75;transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(1px)scale(.99)}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,.file-drop:focus-within,.option-card:focus-within{outline-offset:3px;outline:2px solid #f0be4db3}h1,h2,p{margin:0}h1{letter-spacing:-.065em;text-wrap:balance;max-width:760px;margin-top:10px;font-size:clamp(42px,6vw,76px);line-height:.94}h2{letter-spacing:-.02em;font-size:19px}input{min-width:0;color:var(--text);border:1px solid var(--border-soft);background:#0c0d0ac2;border-radius:12px;transition:border-color .18s,box-shadow .18s,background .18s}input[type=checkbox]{accent-color:var(--accent-strong)}input[type=number],.name-input,.sheet-meta dd,.export-summary strong,.frame-toggle span,small{font-variant-numeric:tabular-nums}#app{z-index:1;min-height:100dvh;position:relative}.app-shell{width:min(1500px,100%);margin:0 auto;padding:clamp(18px,3vw,40px)}.hero{border:1px solid var(--border-soft);box-shadow:var(--shadow);background:linear-gradient(135deg,#fff4d614,#0000 48%),radial-gradient(circle at 88% 24%,#d8a93b2e,#0000 16rem),#13150fc2;border-radius:32px;grid-template-columns:minmax(0,1fr) minmax(240px,360px);align-items:end;gap:clamp(22px,5vw,72px);margin-bottom:28px;padding:clamp(18px,3vw,32px);display:grid;position:relative;overflow:hidden}.hero:after{content:"";opacity:.45;background-color:#0000;background-image:linear-gradient(45deg,#d8a93b1f 25%,#0000 25%),linear-gradient(-45deg,#d8a93b1f 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d8a93b1f 75%),linear-gradient(-45deg,#0000 75%,#d8a93b1f 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border:1px solid #d8a93b2e;border-radius:36px;width:260px;height:260px;position:absolute;bottom:-92px;right:-72px;transform:rotate(-8deg)}.hero-copy,.hero-card{z-index:1;position:relative}.hero p:last-child{max-width:680px;color:var(--muted);text-wrap:pretty;margin-top:14px;font-size:17px;line-height:1.75}.hero-card{border:1px solid var(--border-soft);background:#0c0d0a8a;border-radius:24px;grid-template-columns:1fr 1fr;gap:10px;padding:12px;display:grid;box-shadow:inset 0 1px #ffffff12,0 20px 45px #0000002e}.hero-card span{min-height:76px;color:var(--text);letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(135deg,#d8a93b24,#0000 54%),#fff4d60a;border:1px solid #fff4d614;border-radius:16px;padding:14px;font-size:13px;font-weight:700}.workspace{grid-template-columns:minmax(290px,350px) minmax(0,1fr);align-items:start;gap:20px;display:grid}.sidebar,.main-area{flex-direction:column;gap:18px;min-width:0;display:flex}.panel{border:1px solid var(--border-soft);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px)saturate(120%);backdrop-filter:blur(18px)saturate(120%);background:linear-gradient(#fff4d60f,#0000 140px),#181a13d1;border-radius:24px;padding:18px}.eyebrow{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;font-size:12px;font-weight:800}.muted,.hint,small{color:var(--muted)}.hint{font-size:13px;line-height:1.6}.error{color:var(--danger);line-height:1.55}.file-drop{color:var(--accent-strong);cursor:pointer;background:radial-gradient(circle at 50% 0,#d8a93b29,#0000 72%),#d8a93b0f;border:1px dashed #d8a93b66;border-radius:18px;place-items:center;margin:16px 0;padding:30px 18px;transition:transform .18s,border-color .18s,background .18s;display:grid}.file-drop:hover{background:radial-gradient(circle at 50% 0,#d8a93b3d,#0000 76%),#d8a93b14;border-color:#f0be4dc2;transform:translateY(-1px)}.file-drop span{letter-spacing:.04em;font-weight:800}.file-drop input{display:none}.sheet-meta{grid-template-columns:1fr;gap:8px;margin:0;padding-top:6px;display:grid}.sheet-meta div{border-top:1px solid #fff4d612;justify-content:space-between;gap:12px;padding:9px 0;display:flex}.sheet-meta dt{color:var(--muted)}.sheet-meta dd{text-align:right;color:var(--text);margin:0;font-weight:700}.mode-toggle,.button-row,.preview-header,.editor-toolbar{align-items:center;gap:10px;display:flex}.mode-toggle{border:1px solid var(--border-soft);background:#0c0d0a8f;border-radius:16px;margin:16px 0;padding:4px}.mode-toggle button{box-shadow:none;background:0 0;border-color:#0000;flex:1}.mode-toggle .active,.primary{color:#1b170d;background:linear-gradient(135deg, var(--accent-strong), #c48c2b), var(--accent-strong);border-color:#f0be4d8f;box-shadow:inset 0 1px #ffffff57,0 12px 28px #d8a93b38}.primary{min-height:46px;font-weight:800}.field-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;display:grid}.field-grid label,.editor-toolbar label{color:var(--muted);gap:7px;font-size:13px;display:grid}.field-grid input,.name-input{width:100%;padding:10px 11px}.field-grid input:hover,.name-input:hover{background:#0c0d0ae0;border-color:#d8a93b5c}.controls,.export-panel{gap:14px;display:grid}.export-summary{border:1px solid var(--border-soft);background:#0c0d0a8a;border-radius:18px;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;display:grid}.export-summary span{background:#fff4d60a;border-radius:12px;gap:3px;min-width:0;padding:10px;display:grid}.export-summary strong{font-size:20px;line-height:1}.export-summary small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.option-card{border:1px solid var(--border-soft);cursor:pointer;background:#0c0d0a75;border-radius:16px;align-items:flex-start;gap:12px;padding:13px;transition:transform .18s,border-color .18s,background .18s;display:flex}.option-card:hover:not(.disabled){background:#d8a93b12;border-color:#d8a93b61;transform:translateY(-1px)}.option-card.disabled{cursor:not-allowed;opacity:.55}.option-card input{margin-top:4px}.option-card span{gap:4px;display:grid}.option-card small{line-height:1.45}.editor-panel{min-height:560px}.editor-toolbar{justify-content:space-between;margin-bottom:16px}.canvas-scroll{border:1px solid var(--border-soft);background-color:#10120e;background-image:linear-gradient(45deg,#fff4d612 25%,#0000 25%),linear-gradient(-45deg,#fff4d612 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#fff4d612 75%),linear-gradient(-45deg,#0000 75%,#fff4d612 75%),none;background-position:0 0,0 8px,8px -8px,-8px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;border-radius:20px;max-height:66vh;overflow:auto}.canvas-stage{margin:24px;position:relative}.canvas-stage canvas,.overlay{display:block;position:absolute;inset:0}.overlay{touch-action:none}.frame-rect{fill:#d8a93b1f;stroke:#f0be4d66;stroke-width:1px;vector-effect:non-scaling-stroke}.guide-line{pointer-events:none;stroke:#f0be4d;stroke-dasharray:6 4;stroke-width:1.5px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px #f0be4d6b)}.guide-hit{opacity:0;stroke:#0000;stroke-width:14px;vector-effect:non-scaling-stroke}.guide-hit.x{cursor:ew-resize}.guide-hit.y{cursor:ns-resize}.preview-panel{min-height:260px}.preview-header{justify-content:space-between;margin-bottom:16px}.frame-grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:12px;max-height:420px;display:grid;overflow:auto}.frame-card{border:1px solid var(--border-soft);background:linear-gradient(#fff4d60d,#0000),#0c0d0a8a;border-radius:18px;gap:8px;padding:10px;transition:transform .18s,border-color .18s,opacity .18s;display:grid}.frame-card:hover{border-color:#d8a93b57;transform:translateY(-1px)}.frame-card.disabled{opacity:.45}.frame-toggle{color:var(--muted);justify-content:space-between;align-items:center;gap:8px;font-size:13px;display:flex}.thumb{cursor:zoom-in;background:#10120e;border:0;border-radius:12px;place-items:center;width:100%;min-height:86px;padding:0;display:grid}.thumb:disabled{cursor:default}.thumb img{max-width:100%;max-height:120px;image-rendering:pixelated;background-color:#10120e;background-image:linear-gradient(45deg,#fff4d629 25%,#0000 25%),linear-gradient(-45deg,#fff4d629 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#fff4d629 75%),linear-gradient(-45deg,#0000 75%,#fff4d629 75%),none;background-position:0 0,0 6px,6px -6px,-6px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:12px 12px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box}.lightbox{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0b08c7;place-items:center;padding:32px;display:grid;position:fixed;inset:0}.lightbox-card{border:1px solid var(--border-soft);background:var(--panel);width:min(900px,92vw);max-height:92vh;box-shadow:var(--shadow);border-radius:22px;gap:16px;padding:18px;display:grid}.lightbox-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.lightbox-header div{gap:4px;display:grid}.lightbox-stage{background:#10120e;border-radius:16px;place-items:center;min-height:240px;max-height:calc(92vh - 120px);display:grid;overflow:auto}.lightbox-stage img{max-width:100%;max-height:calc(92vh - 150px);image-rendering:pixelated;background-color:#10120e;background-image:linear-gradient(45deg,#fff4d626 25%,#0000 25%),linear-gradient(-45deg,#fff4d626 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#fff4d626 75%),linear-gradient(-45deg,#0000 75%,#fff4d626 75%),none;background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box}.empty-state{min-height:220px;color:var(--muted);text-align:center;background:radial-gradient(circle at 50% 0,#d8a93b17,#0000 68%),#0c0d0a61;border:1px dashed #d8a93b47;border-radius:20px;place-items:center;display:grid}@media (width<=980px){.hero,.workspace{grid-template-columns:1fr}.hero-card{max-width:520px}}@media (width<=620px){.app-shell{padding:12px}.hero{border-radius:24px;padding:20px}.hero-card,.field-grid,.export-summary{grid-template-columns:1fr}.preview-header,.editor-toolbar,.button-row{flex-direction:column;align-items:stretch}}