@layer components{.dg-page{--ink: #e8e8e8;--line-1: #7a7a7a;--line: #5c5c5c;--line-2: #333;--shade: #000;--accent: #ff4d00;--paper: #000;--card: #060606;--fade: .38s;background:var(--paper);min-height:100vh;box-sizing:border-box;padding:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-content:center;max-width:1440px;margin:0 auto;transition:background var(--fade) ease}html[data-theme=light] .dg-page{--ink: #1a1a1a;--line-1: #9a9a9a;--line: #b5b5b5;--line-2: #dedede;--shade: #ececec;--paper: #ececec;--card: #fff}.dg{background:var(--card);transition:background var(--fade) ease;aspect-ratio:800 / 560;display:grid;place-items:center;overflow:hidden}.dg-fig{width:100%;user-select:none;-webkit-user-select:none}.dg-fig svg{display:block;width:100%;height:auto;touch-action:none}.dg svg .ln{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}.dg svg .ln-1{fill:none;stroke:var(--line-1);stroke-width:1;vector-effect:non-scaling-stroke}.dg svg .ln-2{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}.dg svg .ln-3{fill:none;stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}.dg svg .dash{stroke-dasharray:2 4}.dg svg .acc{fill:none;stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke}.dg svg .acc-fill{fill:var(--accent)}.dg svg .shade{fill:var(--shade)}.dg svg .dot{fill:var(--ink)}.dg svg .dot-2{fill:var(--line)}.dg svg line,.dg svg path,.dg svg circle,.dg svg rect{transition:opacity var(--fade) ease,fill var(--fade) ease,stroke var(--fade) ease,r var(--fade) ease}.dg svg .handle{cursor:grab}.dg-fig[data-dragging=true] svg .handle{cursor:grabbing}.dg svg .hit{fill:transparent;stroke:none;pointer-events:all}.dg svg .dg-hatch{stroke:var(--line);stroke-width:1}.dg svg .dg-draft{pointer-events:none}.dg svg .dg-draft line{vector-effect:non-scaling-stroke}[data-draft] .dg svg .dash{stroke-dasharray:8 3 1 3}[data-draft] .dg svg .ring-back{stroke:var(--line)}[data-draft] .dg-fig[data-scene=swarm] svg :is(.ring-front,.ring-back){stroke:var(--line-2)}.dg-switch{position:fixed;top:16px;right:16px;z-index:10;width:36px;height:20px;padding:0;border:1px solid var(--line-1);border-radius:4px;background:var(--card);cursor:pointer;-webkit-appearance:none;appearance:none;transition:background var(--fade) ease,border-color var(--fade) ease}.dg-switch:after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--ink);transition:transform var(--fade) cubic-bezier(.2,.8,.2,1),background var(--fade) ease}.dg-switch[aria-pressed=true]:after{transform:translate(16px)}.dg-switch:focus-visible{outline:1px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){.dg-switch:after{transition:none}}@media(max-width:1100px){.dg-page{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.dg-page{grid-template-columns:1fr;padding:12px;gap:12px}}}@layer components{.dgt-page{display:grid;grid-template-columns:1fr;justify-items:center;max-width:none}.dgt{width:min(1100px,100%);display:grid;gap:20px}.dgt .dg{width:100%}.dgt svg line,.dgt svg path,.dgt svg circle,.dgt svg rect{transition:fill var(--fade) ease,stroke var(--fade) ease}.dgt svg .earth-bg{fill:var(--card);stroke:none}.dgt .dg-fig[data-drag=none] svg .hit{cursor:default}.dgt-nav{display:flex;justify-content:center;gap:6px}.dgt-nav button{width:32px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;-webkit-appearance:none;appearance:none}.dgt-nav button:after{content:"";width:100%;height:1px;background:var(--line);transform-origin:center;transition:background var(--fade) ease,transform .22s cubic-bezier(.16,1,.3,1)}.dgt-nav button:hover:after{background:var(--line-1)}.dgt-nav button[aria-current=true]:after{background:var(--accent);transform:scaleY(2)}.dgt-nav button:focus-visible{outline:1px solid var(--accent);outline-offset:2px}}@layer components{.roll-text{white-space:pre}.roll-text__c{position:relative;display:inline-block}.roll-text__win{position:absolute;inset:-.45lh 0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(transparent 6%,rgb(0 0 0 / 35%) 16%,#000 24%,#000 76%,rgb(0 0 0 / 35%) 84%,transparent 94%);mask-image:linear-gradient(transparent 6%,rgb(0 0 0 / 35%) 16%,#000 24%,#000 76%,rgb(0 0 0 / 35%) 84%,transparent 94%)}.roll-text__strip{position:absolute;left:0;top:.45lh;display:flex;flex-direction:column;will-change:transform,filter}}
