:root{--paper: #f6f1e4;--paper-soft: rgba(246, 241, 228, .9);--ink: #2b2620;--ink-soft: #7a7060;--line: #ddd3bf;--accent: #e57a1a;--mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", monospace}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden;font-family:var(--mono)}.app{position:relative;height:100%;color:var(--ink)}.viewport{position:absolute;top:0;right:0;bottom:0;left:0}.viewport canvas{cursor:grab}.viewport canvas:active{cursor:grabbing}.grain{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:radial-gradient(rgba(43,38,32,.11) 1px,transparent 1px);background-size:24px 24px;opacity:1;transition:opacity .9s ease}.night .grain{opacity:0}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,transparent 55%,rgba(2,8,14,.6) 100%);opacity:0;transition:opacity 1.2s ease}.night .vignette{opacity:1}.brand{position:absolute;top:30px;left:34px;-webkit-user-select:none;user-select:none;animation:rise .9s cubic-bezier(.2,.9,.25,1) both}.brand h1{font-size:21px;letter-spacing:.34em;font-weight:700}.brand h1 span{color:var(--accent);letter-spacing:.08em;font-weight:400}.brand p{margin-top:6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}.night .brand{color:#efe6d3}.night .brand p{color:#efe6d38c}.panel{position:absolute;top:50%;right:26px;transform:translateY(-50%);width:292px;max-height:calc(100vh - 48px);overflow-y:auto;background:var(--paper-soft);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:18px;padding:20px 20px 16px;display:flex;flex-direction:column;gap:18px;box-shadow:0 30px 70px #190f0538;animation:panelIn .85s cubic-bezier(.2,.9,.25,1) both;animation-delay:.15s}.panel section{display:flex;flex-direction:column;gap:12px}.panel h4{font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:8px}.silgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sil{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);border-radius:12px;background:transparent;padding:7px 4px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:border-color .25s ease,background .25s ease,transform .15s ease}.sil:hover{transform:translateY(-1px);border-color:var(--ink-soft)}.sil svg{width:30px;height:36px}.sil path{fill:#beb29a;transition:fill .25s ease}.sil span{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}.sil.active{border-color:var(--accent);background:#e57a1a17}.sil.active path{fill:var(--accent)}.sil.active span{color:var(--accent)}.sil.draw{border-style:dashed;border-color:#c9bda3}.sil.draw:hover{border-color:var(--accent)}.sil.draw .plus{font-size:19px;line-height:34px;height:36px;color:var(--accent)}.sil span svg{width:9px;height:9px;vertical-align:-1px;stroke:currentColor}.editor{display:flex;flex-direction:column;gap:10px;animation:rise .4s ease both}.editor-head{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);padding-bottom:8px}.editor-head h4{flex:1;border:none;padding:0}.modebtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:30px;height:26px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease}.modebtn svg{width:15px;height:15px}.modebtn:hover{color:var(--ink);border-color:var(--ink-soft)}.modebtn.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.modebtn.done{background:var(--accent);border-color:var(--accent);color:#fff7ea}.editor svg.editor-canvas{width:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;border:1px solid var(--line);border-radius:14px;background:#ffffff59}.editor svg.editor-canvas.pencil{cursor:crosshair}.editor .axis{stroke:#c9bda3;stroke-width:1;stroke-dasharray:3 4}.editor .gridline{stroke:#2b26200f;stroke-width:1}.editor .shape{fill:#e57a1a1a;stroke:var(--ink);stroke-width:1.5}.editor .dot{fill:var(--paper);stroke:var(--accent);stroke-width:2;cursor:grab;transition:r .15s ease}.editor .dot:hover{fill:var(--accent)}.editor .dot.mirror{fill:#c9bda3;stroke:none;pointer-events:none}.editor .dot.mini{fill:var(--accent);stroke:none;pointer-events:none}.editor .stroke{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.editor .hint{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-soft)}.slider{display:flex;flex-direction:column;gap:7px}.slider-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}.slider-head .val{color:var(--accent);font-weight:600;letter-spacing:.06em}.slider-head .val em{font-style:normal;color:var(--ink-soft);margin-left:3px;font-weight:400}.slider input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:2px;border-radius:2px;background:var(--line);outline:none;cursor:pointer}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--ink);border:3.5px solid var(--paper);box-shadow:0 0 0 1px var(--line),0 2px 6px #140c0440;transition:transform .15s ease,background .2s ease}.slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--accent)}.slider input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:3.5px solid var(--paper);box-shadow:0 0 0 1px var(--line)}.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;border:none;background:transparent;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding:9px 0;cursor:pointer;transition:background .25s ease,color .25s ease}.seg button+button{border-left:1px solid var(--line)}.seg button:hover{color:var(--ink)}.seg button.active{background:var(--ink);color:var(--paper)}.actions{display:flex;gap:8px;padding-top:2px}.iconbtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:44px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .12s ease}.iconbtn svg{width:20px;height:20px}.iconbtn:hover{border-color:var(--ink-soft);transform:translateY(-1px)}.iconbtn:active{transform:translateY(0) scale(.96)}.iconbtn.on{background:var(--accent);border-color:var(--accent);color:#fff7ea;box-shadow:0 4px 18px #e57a1a73}.roll{display:flex;animation:roll .6s cubic-bezier(.3,1.4,.4,1)}.status{position:absolute;left:34px;bottom:26px;display:flex;align-items:center;gap:10px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);animation:rise .9s .3s cubic-bezier(.2,.9,.25,1) both}.night .status{color:#efe6d380}.status .flash{color:var(--accent);animation:rise .4s ease both}.hint{position:absolute;bottom:26px;left:50%;transform:translate(-50%);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);pointer-events:none;animation:hintfade 7s ease forwards}.night .hint{color:#efe6d373}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes panelIn{0%{opacity:0;transform:translateY(calc(-50% + 8px)) translate(26px)}to{opacity:1;transform:translateY(-50%) translate(0)}}@keyframes roll{0%{transform:rotate(-200deg) scale(.6)}to{transform:rotate(0) scale(1)}}@keyframes hintfade{0%{opacity:0}12%{opacity:1}75%{opacity:1}to{opacity:0}}@media(max-width:760px){.panel{right:12px;left:12px;top:auto;bottom:12px;transform:none;width:auto;max-height:46vh;animation:rise .8s cubic-bezier(.2,.9,.25,1) both}.brand{top:18px;left:20px}.status,.hint{display:none}}