:root{--cream: #f3ead6;--paper: #fff8e9;--ink: #282322;--muted: #796f62;--red: #c83129;--yellow: #e5bb55;--font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;color:var(--ink);background-color:var(--cream);background-image:radial-gradient(#5c4c2c18 .8px,transparent .8px);background-size:7px 7px;font-family:var(--font);min-width:320px}button,input{font-family:inherit}.wrap{max-width:1280px;margin:auto;padding:0 28px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:2px solid var(--ink);padding:18px 0 14px}.brand{font-weight:900;font-size:14px;letter-spacing:.08em;display:flex;align-items:center;gap:12px}.brand-mark{width:31px;height:31px;background:var(--red);color:#fff8ee;border:2px solid var(--ink);display:grid;place-items:center;transform:rotate(-8deg);box-shadow:3px 3px 0 var(--ink)}.top-note{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--muted);text-align:right}.intro{padding:14px 0 12px;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:18px 26px}.kicker{margin:0 0 6px;font-size:12px;font-weight:900;letter-spacing:.24em;color:var(--red)}h1{margin:0;font-size:clamp(30px,3.6vw,48px);font-weight:900;letter-spacing:-.04em;line-height:1.15}h1 em{font-style:normal;color:var(--red);border-bottom:5px solid var(--yellow);white-space:nowrap}.desc{font-size:13px;line-height:1.7;color:#61594f;max-width:440px;margin:0}.stage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,.7fr);gap:22px;align-items:start}.picture-frame{position:relative;border:3px solid var(--ink);background:#fff;box-shadow:8px 9px 0 var(--ink);overflow:hidden}.canvas-wrap{position:relative;width:100%;aspect-ratio:1536 / 837;background:#e8e2d8}.canvas-wrap canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-weight:900;color:var(--muted)}.panel{border:3px solid var(--ink);padding:20px 22px 18px;background:var(--paper);box-shadow:8px 9px 0 var(--yellow);display:flex;flex-direction:column;gap:12px;min-width:0}.panel-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-top strong{font-size:12px;letter-spacing:.16em}.pill{border:1.5px solid var(--ink);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:900;white-space:nowrap;background:#f4e1b2}.result-row{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:10px}.dial{width:100%;height:auto;overflow:visible}.dial .tick{stroke:#b9a789;stroke-width:2}.dial .tick.major{stroke:#7c6956;stroke-width:3.5}.dial .angle-fill{fill:#e5bb558c}.dial .static-ray{stroke:var(--ink);stroke-linecap:round;stroke-width:5}.dial .ray{stroke:var(--red);stroke-linecap:round;stroke-width:8}.result{display:flex;justify-content:center;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;line-height:1}.result-value{font-size:clamp(76px,8.6vw,132px);font-family:Impact,"Arial Black",var(--font);font-weight:900;letter-spacing:-.04em;min-width:3ch;text-align:right}.result-unit{font-size:34px;font-weight:900;color:var(--red)}.result.pop{animation:pop .38s cubic-bezier(.2,1.6,.4,1)}@keyframes pop{0%{transform:scale(.82)}70%{transform:scale(1.12)}to{transform:scale(1)}}.readout{margin:0;border:2px solid var(--ink);background:#fffef6;display:grid}.readout div{display:flex;justify-content:space-between;gap:10px;padding:7px 11px;font-size:12px}.readout div+div{border-top:1px dashed #b9a789}.readout dt{font-weight:700;color:var(--muted)}.readout dd{margin:0;font-weight:900;font-variant-numeric:tabular-nums}.roll-btn{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;cursor:pointer;border:2.5px solid var(--ink);background:var(--red);color:#fffdf4;font-weight:900;font-size:19px;padding:16px 12px;box-shadow:4px 5px 0 var(--ink);transition:transform .1s,box-shadow .1s,background .1s}.roll-btn:hover:not(:disabled){background:#ac201a;transform:translateY(-2px);box-shadow:4px 7px 0 var(--ink)}.roll-btn:active:not(:disabled){transform:translate(4px,5px);box-shadow:0 0 0 var(--ink)}.roll-btn:disabled{cursor:wait;opacity:.85}.roll-btn:disabled .die{animation:spin .4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.secondary{padding:9px 6px;font-weight:900;font-size:12px;cursor:pointer;background:#fff;border:1.5px solid var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}.secondary:hover{background:#fff1cf}.secondary:active{transform:translate(2px,2px);box-shadow:none}.status{min-height:18px;margin:0;color:var(--red);font-size:12px;font-weight:700;white-space:pre-wrap}button:focus-visible,input:focus-visible{outline:3px solid #3381c7;outline-offset:3px}.below{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,.7fr);gap:22px;padding:18px 0 12px}.section-title{font-weight:900;font-size:15px;margin:0 0 8px;display:flex;align-items:center;gap:10px}.section-title:before{content:"";width:7px;height:19px;background:var(--red);display:inline-block;transform:rotate(10deg)}.slider-row{display:flex;align-items:center;gap:12px}.slider-row input[type=range]{flex:1;accent-color:var(--red);height:28px;min-width:0}.slider-row input[type=number]{width:78px;padding:6px 8px;font-size:18px;font-weight:900;border:2px solid var(--ink);background:#fff;text-align:right}.deg{font-weight:900;font-size:18px}.presets{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}.presets button{padding:7px 10px;min-width:54px;font-weight:900;font-size:13px;cursor:pointer;background:var(--paper);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}.presets button:hover{background:var(--yellow)}.toggle{font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer}.toggle input{accent-color:var(--red);width:18px;height:18px}.history{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}.history button{padding:8px 12px;border:1.5px solid var(--ink);background:var(--paper);font-weight:900;font-size:14px;min-width:64px;cursor:pointer}.history .latest button{background:var(--yellow)}.history .empty{font-size:12px;color:var(--muted);border:1.5px dashed var(--muted);padding:8px 12px}.rule{border-top:2px solid var(--ink);display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 24px;padding:8px 0 12px;color:var(--muted);font-size:10.5px;line-height:1.6}.rule strong{color:var(--ink)}.notice{flex-basis:100%;margin:0}@media(min-width:901px){.wrap{--chrome: 365px;max-width:max(1080px,calc((100vh - var(--chrome)) * 1536 / 837 + 22px + 330px + 56px));max-width:max(1080px,calc((100dvh - var(--chrome)) * 1536 / 837 + 22px + 330px + 56px))}.stage,.below{grid-template-columns:minmax(0,1fr) 330px}.presets button{min-width:0;padding:6px 8px}.panel{padding:14px 18px;gap:9px}.result-value{font-size:clamp(56px,9vh,80px)}.result-unit{font-size:26px}.readout div{padding:4px 11px}.roll-btn{padding:12px}}@media(max-width:900px){.stage,.below{grid-template-columns:1fr}}@media(max-width:560px){.wrap{padding:0 16px}.top-note{display:none}.intro{padding:22px 0 16px}.picture-frame{box-shadow:5px 6px 0 var(--ink)}.panel{padding:16px;box-shadow:5px 6px 0 var(--yellow)}.result-value{font-size:84px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}