:root { --ink:#252a2e; --soft:#69737a; --line:#d5dde0; --blue:#1480c1; --paper:#f6f7f5; --canvas:#fbfcfb; --accent:#ef5a43; }
body { min-width:1120px; background:#e7edef; color:var(--ink); font-family:Inter,"Microsoft YaHei",Arial,sans-serif; }
.top { height:74px; padding:0 42px; border:0; background:#262b2f; color:#fff; }
.brand { color:#fff; font-size:25px; font-weight:500; letter-spacing:.02em; }.brand small { color:#bdc8ce; font-size:11px; letter-spacing:.12em; }
.top nav { display:flex; align-items:center; gap:20px; }.top nav a { color:#d6dde0; font-size:12px; letter-spacing:.08em; text-decoration:none; }.top nav a:hover,.top nav a[aria-current="page"] { color:#fff; }
.shell { grid-template-columns:300px minmax(0,1fr); min-height:calc(100vh - 74px); background:var(--paper); }
.sidebar { position:sticky; top:0; height:calc(100vh - 74px); padding:43px 0 28px; border:0; border-right:1px solid #cbd4d8; background:#edf2f3; }
.sidebar > .eyebrow,.sidebar > h1,.sidebar > p,.sidebar-foot { margin-left:34px; margin-right:34px; }.eyebrow { color:#267eaf; font-size:10px; font-weight:700; letter-spacing:.2em; }
.sidebar h1 { margin-top:15px; margin-bottom:13px; font:500 45px/.9 Georgia,"Noto Serif SC",serif; letter-spacing:0; }.sidebar p { max-width:205px; color:#6e7a82; font-size:12px; line-height:1.85; }
.toolnav { margin:42px 0 0; border-top:1px solid #cbd4d8; }.toolnav button { height:56px; padding:0 34px; border:0; border-bottom:1px solid #cbd4d8; background:transparent; color:#63717a; font-size:13px; letter-spacing:.03em; }
.toolnav button:hover { color:#1e303a; background:rgba(255,255,255,.42); }.toolnav button.on { color:#172e3a; background:#fbfcfb; box-shadow:inset 4px 0 #1681be; font-weight:700; }.toolnav i { color:#8da1aa; font:11px/1 ui-monospace,Consolas,monospace; }
.sidebar-foot { position:absolute; bottom:28px; color:#839198; font:10px/1.5 ui-monospace,Consolas,monospace; letter-spacing:.11em; }
.main { width:auto; max-width:1440px; min-height:calc(100vh - 74px); padding:58px 66px 74px; background:var(--paper); }
.view-head { align-items:flex-end; padding:0 0 27px; border-bottom:2px solid #272d31; }.view-head h2 { font:500 54px/.9 Georgia,"Noto Serif SC",serif; }.view-head p { max-width:310px; color:#69757b; font-size:12px; line-height:1.7; text-align:right; }
.tool-layout { grid-template-columns:286px minmax(0,1fr); gap:46px; padding-top:34px; }.group-layout,.dice-layout { grid-template-columns:330px minmax(0,1fr); }.controls { gap:18px; }.control-kicker { margin:0 0 4px; color:#267eaf; font:10px/1 ui-monospace,Consolas,monospace; letter-spacing:.17em; }.field { gap:9px; color:#59676f; font-size:11px; letter-spacing:.07em; }
textarea,input,select { border:1px solid #c8d2d6; border-radius:0; background:#fff; box-shadow:none; }.field textarea { min-height:202px; padding:15px; color:#273940; font-size:13px; line-height:1.8; }.field input,.field select { height:49px; padding:0 14px; }.field textarea:focus,.field input:focus,.field select:focus { border-color:#1681be; box-shadow:0 0 0 3px rgba(20,128,193,.11); }
.primary { height:52px; border:0; border-radius:0; background:#222a2f; font-size:11px; letter-spacing:.16em; }.primary:hover { background:#1681be; box-shadow:none; transform:none; }.secondary { height:46px; border:1px solid #bfcbd0; border-radius:0; background:transparent; color:#34464f; font-size:11px; letter-spacing:.08em; }.secondary:hover { border-color:#1681be; color:#1681be; }
.helper,.ai-brief { color:#77848b; font-size:11px; line-height:1.8; }.ai-brief { padding:18px 0; border-color:#cad4d7; }.checkline { min-height:25px; color:#59676f; }
.empty { min-height:500px; border:1px solid #cbd7da; background:#f1f3ef; color:#859399; }.group-stage { display:grid; place-items:center; }.result-placeholder { width:min(76%,410px); padding:30px 0; border-top:2px solid #27363b; border-bottom:1px solid #c5ced0; color:#59676f; }.result-placeholder span { display:block; margin-bottom:24px; color:#267eaf; font:12px/1 ui-monospace,Consolas,monospace; letter-spacing:.15em; }.result-placeholder p { margin:0; font:500 24px/1.55 Georgia,"Noto Serif SC",serif; }.groups { gap:1px; padding:20px; border:1px solid #cbd7da; background:#d3dbdc; }.group { min-height:220px; padding:26px; border:0; background:#fbfcfb; box-shadow:none; }.group h3 { margin-bottom:19px; font-size:22px; }.group ol { gap:10px; font-size:13px; }
.wheel-stage,.dice-area,.timer-stage,.suika-stage,.lock-stage { min-height:570px; border:1px solid #cbd7da; background:#f1f3ef; }.wheel-stage:before { width:76%; border-color:rgba(37,50,55,.13); }.wheel-wrap { width:min(100%,495px); }.wheel-svg { filter:drop-shadow(0 26px 20px rgba(25,38,42,.16)); }.wheel-rim { stroke:#27363b; stroke-width:3; }.wheel-slice { stroke:rgba(249,248,242,.78); stroke-width:1.25; }.wheel-label { fill:#f8f7f2; stroke:none; paint-order:normal; }.wheel-label.light { fill:#26353b; }.hub { fill:#f7f5ef; stroke:#27363b; stroke-width:2; }.hub-text { fill:#27363b; }.pointer { border-bottom-color:var(--accent); }.wheel-status { right:24px; bottom:21px; font:10px ui-monospace,Consolas,monospace; letter-spacing:.08em; }.winner { color:#2076a9; font-size:22px; text-align:left; }
.dice-area { display:grid; place-items:center; position:relative; overflow:hidden; }.dice-area::before,.dice-area::after { position:absolute; content:""; border:1px solid rgba(39,54,59,.12); border-radius:50%; }.dice-area::before { width:430px; height:430px; }.dice-area::after { width:280px; height:280px; }.dice-surface { position:relative; z-index:1; display:grid; justify-items:center; gap:22px; width:min(75%,430px); padding:31px 0 26px; border-top:2px solid #27363b; border-bottom:1px solid #c5ced0; }.dice-label,.dice-caption { color:#68777c; font:10px/1 ui-monospace,Consolas,monospace; letter-spacing:.15em; }.die { width:190px; height:190px; display:grid; place-items:center; border:1px solid #27363b; border-radius:0; background:#f8f7f2; box-shadow:14px 15px 0 #cbd4d3,0 20px 28px rgba(25,38,42,.13); color:#27363b; font:500 92px/.8 Georgia,"Noto Serif SC",serif; font-style:normal; }.die.rolling { animation:roll .64s ease-in-out; }
.timer-stage { background:#f1f3ef; }.timer-stage:before { width:336px; height:336px; border-color:rgba(39,54,59,.18); }.timer-face { width:252px; height:252px; border:9px solid #d5dddd; border-top-color:#267eaf; background:#f8f7f2; box-shadow:0 18px 28px rgba(24,65,91,.09); color:#27363b; }.timer-face strong { font-size:58px; }.timer-face span { color:#69757b; }.timer-stage.finished .timer-face { border-color:#ef735f; }
.preset { border-radius:0; background:#fff; }.preset.on { border-color:#1681be; background:#eff8fb; }.stat { padding:15px; border-color:#cbd5d8; background:#fff; }.stat strong { font-size:27px; }.suika-stage { background:#edf6f5; }.suika-canvas { border:1px solid #9db5bb; border-radius:0; box-shadow:16px 18px 0 rgba(125,163,166,.18); }.mine-board { border:1px solid #a9bbc1; border-radius:0; background:#dbe9e9; }
.lock-stage { display:grid; place-items:center; padding:28px; overflow:hidden; }.lock-screen { position:relative; display:grid; width:100%; min-height:480px; place-items:center; overflow:hidden; background:#3e7897; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); transition:background 1s ease; }.lock-screen.night { background:#1c2b3b; }.lock-screen:before { position:absolute; width:68%; aspect-ratio:1; content:""; border:1px solid rgba(255,255,255,.25); border-radius:50%; transform:translate(18%,-24%); }.lock-screen.update { background:#0873bf; }.lock-screen.update:before { display:none; }.lock-screen.update .lock-content { display:none; }.lock-screen.update .update-content { display:block; }.lock-time { font-size:92px; }
.ai-canvas { min-height:590px; border:1px solid #c9d4d7; background-color:#fbfcfb; background-image:linear-gradient(rgba(38,91,113,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(38,91,113,.055) 1px,transparent 1px); background-size:24px 24px; }.map-stage { min-width:800px; min-height:590px; padding:70px 74px; }.map-root { min-width:220px; min-height:80px; border:0; border-left:5px solid #1681be; border-radius:0; background:#252d31; color:#fff; font-size:22px; text-align:left; box-shadow:12px 13px 0 #d9e4e6; }.map-branches { grid-template-columns:repeat(3,minmax(170px,1fr)); gap:30px 22px; margin-top:58px; }.map-branch { min-height:145px; padding:20px; border:1px solid #b8c7cc; border-left:0; background:#fff; box-shadow:8px 9px 0 rgba(196,211,214,.58); }.map-branch::before { top:-31px; left:24px; height:31px; background:#759ba9; }.map-branch strong { color:#1f313a; font:500 18px Georgia,"Noto Serif SC",serif; }.map-branch span { color:#66767d; font-size:12px; line-height:1.75; }.map-empty { color:#63757d; font-size:22px; line-height:1.6; }
.life-grid { display:block; margin:0; border-top:1px solid #c6d1d5; }.life-card { display:flex; justify-content:space-between; align-items:baseline; width:100%; min-height:0; padding:17px 0; border:0; border-bottom:1px solid #c6d1d5; background:transparent; }.life-card:hover { transform:none; box-shadow:none; color:#1476b2; }.life-card b { font:500 17px Georgia,"Noto Serif SC",serif; }.life-card span { margin:0; max-width:122px; color:#74828a; font-size:10px; text-align:right; }.life-card.on { color:#1476b2; }.studio-output { min-height:590px; margin:0; padding:62px 70px; border:0; background:transparent; color:#35444b; font:18px/2 Georgia,"Noto Serif SC",serif; white-space:pre-line; }
@media(max-width:850px) { body { min-width:0; }.top { height:64px; padding:0 20px; }.shell { grid-template-columns:1fr; }.sidebar { position:static; height:auto; padding:28px 0 0; }.sidebar-foot { display:none; }.main { padding:38px 22px 58px; }.tool-layout { grid-template-columns:1fr; gap:28px; }.view-head h2 { font-size:42px; }.view-head p { text-align:left; }.wheel-stage,.dice-area,.timer-stage,.lock-stage { min-height:430px; }.lock-screen { min-height:374px; } }

/* Tactile tool surfaces: preserve the editorial shell while giving physical
   interactions a distinct material and motion language. */
.fd-workbench .wheel-stage{isolation:isolate;background:radial-gradient(circle at 50% 42%,rgba(240,247,240,.58),rgba(207,224,223,.3) 47%,rgba(120,164,172,.16));}
.fd-workbench .wheel-stage::before{display:block;width:78%;border-color:rgba(33,74,84,.16);box-shadow:0 0 0 18px rgba(255,255,255,.075),0 0 0 34px rgba(43,89,96,.045);}
.fd-workbench .wheel-wrap{width:min(100%,510px);padding:13px;filter:drop-shadow(0 26px 24px rgba(25,57,64,.2));}
.fd-workbench .wheel-svg{filter:none;overflow:visible;}.fd-workbench .wheel-slice{stroke:rgba(239,246,239,.9);stroke-width:1.55;}
.fd-workbench .wheel-rim-outer{stroke:rgba(35,61,67,.82);stroke-width:4;fill:rgba(241,246,240,.23);}.fd-workbench .wheel-rim-inner{stroke:rgba(247,250,245,.82);stroke-width:2;fill:none;}
.fd-workbench .wheel-label{font:600 13px Inter,"Microsoft YaHei",sans-serif;letter-spacing:.02em;paint-order:stroke;stroke:rgba(24,50,56,.16);stroke-width:.4;}.fd-workbench .wheel-label.light{fill:#183d46;stroke:rgba(246,250,245,.42);}
.fd-workbench .hub{fill:#f5f1e9;stroke:#234650;stroke-width:2.4;filter:drop-shadow(0 4px 6px rgba(18,52,58,.15));}.fd-workbench .hub-text{fill:#1e4049;font-size:14px;letter-spacing:.05em;}
.fd-workbench .pointer{top:-4px;width:42px;height:48px;border:0;filter:drop-shadow(0 6px 5px rgba(49,57,55,.2));transform:translateX(-50%);}.fd-workbench .pointer::before{position:absolute;inset:0;content:"";clip-path:polygon(50% 100%,6% 10%,94% 10%);background:linear-gradient(135deg,#f2aa82,#c95f51 58%,#853f42);}.fd-workbench .pointer span{position:absolute;z-index:1;top:8px;left:50%;width:8px;height:8px;border:1px solid rgba(255,255,255,.78);border-radius:50%;background:#ffe7d3;transform:translateX(-50%);}
.fd-workbench .wheel-status{right:22px;bottom:18px;padding:7px 9px;border-top:1px solid rgba(39,70,76,.26);border-bottom:1px solid rgba(39,70,76,.16);color:#506c72;background:rgba(250,253,250,.22);}

.fd-workbench .dice-area{perspective:920px;background:radial-gradient(ellipse at 50% 40%,rgba(252,253,248,.74),rgba(199,218,219,.24) 58%,rgba(119,159,168,.11));}.fd-workbench .dice-area::before{display:block;width:350px;height:350px;border:1px solid rgba(42,84,91,.12);box-shadow:0 0 0 24px rgba(255,255,255,.05);}.fd-workbench .dice-area::after{display:block;width:172px;height:24px;border:0;background:radial-gradient(ellipse,rgba(25,54,59,.28),rgba(25,54,59,0) 72%);filter:blur(5px);transform:translateY(112px);}
.fd-workbench .dice-surface{width:min(78%,430px);gap:18px;padding:24px 0 22px;border-top:1px solid rgba(34,67,74,.48);border-bottom:1px solid rgba(34,67,74,.22);}
.fd-workbench .die{position:relative;width:174px;height:174px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(36,57,63,.54);border-radius:24px;background:linear-gradient(137deg,#ffffff 0%,#fdfdf9 42%,#d8e5e2 100%);box-shadow:inset 12px 12px 16px rgba(255,255,255,.94),inset -12px -14px 19px rgba(58,88,89,.16),15px 20px 0 rgba(80,120,121,.2),0 29px 35px rgba(22,54,60,.19);color:#223d43;transform-style:preserve-3d;font-style:normal;}.fd-workbench .die::before{position:absolute;z-index:0;inset:8px;content:"";border:1px solid rgba(255,255,255,.82);border-radius:18px;box-shadow:inset 0 0 12px rgba(31,67,73,.08);}.fd-workbench .die::after{position:absolute;z-index:0;top:9px;left:14px;width:69%;height:31%;content:"";border-radius:50%;background:rgba(255,255,255,.54);filter:blur(11px);transform:rotate(-24deg);}
.fd-workbench .die-face{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:112px;height:112px;padding:10px;}.fd-workbench .pip{display:block;align-self:center;justify-self:center;width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 34% 29%,#5d7071,#263c41 59%,#13292f);box-shadow:inset 2px 2px 2px rgba(255,255,255,.18),0 1px 1px rgba(255,255,255,.75);}
.fd-workbench .die.is-poly{border-radius:0;clip-path:polygon(50% 0,92% 22%,100% 70%,69% 100%,31% 100%,0 70%,8% 22%);background:linear-gradient(140deg,#fcfcf5,#d8e5e2 68%,#9ebfc2);box-shadow:0 29px 35px rgba(22,54,60,.19);}.fd-workbench .die.is-poly::before{inset:13px;clip-path:polygon(50% 0,92% 22%,100% 70%,69% 100%,31% 100%,0 70%,8% 22%);border:1px solid rgba(47,78,82,.38);border-radius:0;}.fd-workbench .die.is-poly::after{top:25px;left:38px;width:52%;height:25%;}.fd-workbench .die.is-poly strong,.fd-workbench .poly-top,.fd-workbench .poly-bottom{position:relative;z-index:1;}.fd-workbench .die.is-poly strong{font:600 64px/.8 Georgia,serif;text-shadow:0 1px rgba(255,255,255,.8);}.fd-workbench .poly-top,.fd-workbench .poly-bottom{position:absolute;color:#31575e;font:700 10px/1 Inter,"Microsoft YaHei",sans-serif;letter-spacing:.16em;}.fd-workbench .poly-top{top:37px}.fd-workbench .poly-bottom{bottom:36px;color:#688a8e;}.fd-workbench .die-wait{position:relative;z-index:1;color:#7f999b;font:500 62px/1 Georgia,serif;}
.fd-workbench .die.rolling{animation:die-roll .92s cubic-bezier(.18,.74,.19,1) both;}.fd-workbench .die.landed{animation:die-land .35s cubic-bezier(.2,.8,.25,1) both;}@keyframes die-roll{0%{transform:translateY(0) rotateX(0) rotateY(0) rotateZ(0)}23%{transform:translateY(-54px) rotateX(210deg) rotateY(140deg) rotateZ(-18deg)}55%{transform:translateY(8px) rotateX(520deg) rotateY(335deg) rotateZ(19deg)}76%{transform:translateY(-18px) rotateX(680deg) rotateY(438deg) rotateZ(-8deg)}100%{transform:translateY(0) rotateX(720deg) rotateY(540deg) rotateZ(0)}}@keyframes die-land{50%{transform:translateY(-8px) scale(1.035)}100%{transform:none}}