| :root { |
| --bg: #060505; |
| --ink: #ffb347; |
| --gpu: #5ef0ff; |
| --fg: #ece6db; |
| --dim: #8d857a; |
| --line: rgba(236, 230, 219, 0.14); |
| --line-strong: rgba(236, 230, 219, 0.32); |
| --panel: rgba(10, 9, 8, 0.72); |
| --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; |
| --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; |
| --gut: clamp(16px, 2.4vw, 32px); |
| } |
| * { box-sizing: border-box; } |
| html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; } |
| body { font-family: var(--mono); -webkit-font-smoothing: antialiased; } |
| #gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; } |
| #gl:active { cursor: grabbing; } |
| .scrim { position: fixed; z-index: 2; pointer-events: none; } |
| .scrim.top { left: 0; top: 0; width: min(760px, 100vw); height: 330px; background: radial-gradient(120% 100% at 0 0, rgba(6,5,5,.82), rgba(6,5,5,0) 70%); } |
| .scrim.bot { left: 0; right: 0; bottom: 0; height: 190px; background: linear-gradient(to top, rgba(6,5,5,.85), rgba(6,5,5,0)); } |
| .grain { |
| position: fixed; inset: -50%; pointer-events: none; opacity: .06; z-index: 1; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); |
| animation: grain 1.2s steps(3) infinite; |
| } |
| @keyframes grain { 0% { transform: translate(0,0) } 33% { transform: translate(-3%,2%) } 66% { transform: translate(2%,-3%) } } |
| .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; } |
| .dim { color: var(--dim); } |
| .small { font-size: 10.5px; } |
| a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); } |
| a:hover { color: var(--ink); border-color: var(--ink); } |
| button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } |
|
|
| .hud { position: fixed; z-index: 5; } |
| .tl { top: var(--gut); left: var(--gut); max-width: min(560px, calc(100vw - 2 * var(--gut))); pointer-events: none; } |
| .tl a, .tl button { pointer-events: auto; } |
| .kicker { margin-bottom: 14px; } |
| .kicker .sep { color: var(--line-strong); padding: 0 .4em; } |
| h1 { |
| font-family: var(--serif); font-weight: 400; margin: 0; line-height: .98; |
| font-size: clamp(30px, 4.6vw, 64px); letter-spacing: -.01em; text-wrap: balance; |
| } |
| h1 em { color: var(--ink); font-style: italic; } |
| .lede { margin: 16px 0 0; max-width: 430px; font-size: 12.5px; line-height: 1.6; color: #b9b1a5; letter-spacing: .01em; } |
|
|
| .tr { top: var(--gut); right: var(--gut); display: flex; gap: 10px; align-items: center; } |
| .seg { display: flex; border: 1px solid var(--line-strong); background: var(--panel); backdrop-filter: blur(6px); } |
| .chip { padding: 8px 13px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); position: relative; } |
| .chip + .chip { border-left: 1px solid var(--line); } |
| .chip.on { color: var(--bg); background: var(--ink); } |
| .chip.gpu.on { background: var(--gpu); } |
| .chip:not(.on):hover { color: var(--fg); } |
| .tools { display: flex; gap: 6px; } |
| .icon { |
| width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid var(--line-strong); |
| background: var(--panel); font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--fg); |
| } |
| .icon:hover { border-color: var(--ink); color: var(--ink); } |
|
|
| .bl { left: var(--gut); bottom: calc(var(--gut) + 74px); display: grid; gap: 5px; } |
| .readout b { font-weight: 500; color: var(--fg); margin-left: .6em; } |
|
|
| .bottom { left: var(--gut); right: var(--gut); bottom: var(--gut); display: flex; gap: 16px; align-items: center; } |
| .play { |
| flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ink); color: var(--ink); |
| display: grid; place-items: center; background: rgba(255, 179, 71, .06); |
| box-shadow: 0 0 0 0 rgba(255, 179, 71, .35); animation: pulse 2.6s ease-out infinite; |
| } |
| .play.playing { animation: none; } |
| @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,179,71,.35) } 80%,100% { box-shadow: 0 0 0 14px rgba(255,179,71,0) } } |
| .scrub { position: relative; flex: 1; height: 46px; cursor: ew-resize; touch-action: none; user-select: none; } |
| .track { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--line-strong); } |
| .track i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--ink); box-shadow: 0 0 12px rgba(255,179,71,.7); } |
| .ticks { position: absolute; inset: 12px 0 auto 0; height: 21px; } |
| .ticks i { position: absolute; top: 0; width: 1px; height: 7px; background: var(--line-strong); } |
| .ticks i.gpu { background: var(--gpu); height: 11px; top: -2px; } |
| .knob { |
| position: absolute; top: 15px; width: 15px; height: 15px; margin-left: -7px; border: 1px solid var(--ink); |
| background: var(--bg); transform: rotate(45deg); box-shadow: 0 0 14px rgba(255,179,71,.5); |
| } |
| .band { position: absolute; top: 20px; height: 5px; background: rgba(94, 240, 255, .18); border-left: 1px solid var(--gpu); border-right: 1px solid var(--gpu); pointer-events: none; } |
| .chip .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gpu); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 8px var(--gpu); } |
| .chip.gpu.on .dot { background: var(--bg); box-shadow: none; } |
| #rGpuRow.live b { color: var(--gpu); } |
| .ends .short { display: none; } |
| .ends { position: absolute; left: 0; right: 0; bottom: -2px; display: flex; justify-content: space-between; font-size: 9.5px; } |
|
|
| .credit { position: fixed; z-index: 5; right: var(--gut); bottom: calc(var(--gut) + 74px); font-size: 10px; } |
|
|
| .tip { |
| position: fixed; z-index: 6; pointer-events: none; padding: 6px 9px; background: var(--panel); |
| border: 1px solid var(--line-strong); font-size: 10.5px; white-space: nowrap; transform: translate(12px, 12px); |
| } |
|
|
| #loader { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--bg); transition: opacity .9s ease; } |
| #loader.gone { opacity: 0; pointer-events: none; } |
| .loader-inner { width: min(360px, 80vw); display: grid; gap: 14px; } |
| .loader-title { font-family: var(--serif); font-size: 34px; font-style: italic; } |
| .bar { height: 1px; background: var(--line-strong); position: relative; } |
| .bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--ink); transition: width .2s; } |
|
|
| .sheet { |
| position: fixed; z-index: 10; inset: var(--gut); display: flex; flex-direction: column; |
| background: rgba(6, 5, 5, .94); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); |
| } |
| .sheet[hidden] { display: none; } |
| .sheet-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px; border-bottom: 1px solid var(--line); gap: 12px; } |
| .sheet-head h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; margin: 4px 0 0; } |
| .sheet-tools { display: flex; gap: 10px; align-items: center; } |
| .seg.small .chip { padding: 7px 10px; font-size: 10.5px; text-transform: none; letter-spacing: .04em; } |
| .viewer { flex: 1; position: relative; overflow: hidden; cursor: grab; touch-action: none; background: #000; } |
| .viewer img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; max-width: none; image-rendering: auto; } |
| .viewer.gpu-on img { filter: none; } |
| .sheet-foot { padding: 12px 20px; border-top: 1px solid var(--line); line-height: 1.7; } |
| .about { inset: auto var(--gut) var(--gut) auto; width: min(560px, calc(100vw - 2 * var(--gut))); max-height: calc(100vh - 2 * var(--gut)); } |
| .about-body { padding: 6px 20px 18px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: #c9c1b5; } |
| .about-body b { color: var(--fg); font-weight: 500; } |
| .about-body code { font-size: 10.5px; color: var(--fg); } |
|
|
| @media (max-width: 720px), (max-height: 480px) { |
| .lede { display: none; } |
| h1 { font-size: 30px; max-width: 78vw; } |
| .tr { top: auto; bottom: calc(var(--gut) + 64px); right: var(--gut); } |
| .bl { bottom: calc(var(--gut) + 124px); display: block; } |
| .bl > div { display: none; } |
| .credit { right: auto; left: var(--gut); top: calc(var(--gut) + 116px); bottom: auto; max-width: none; } |
| .ends { font-size: 9px; } |
| .ends .long { display: none; } |
| .ends .short { display: inline; } |
| .chip { padding: 8px 10px; } |
| } |
| @media (prefers-reduced-motion: reduce) { .grain { animation: none; } .play { animation: none; } } |
|
|
| |
| body.shot .bottom, body.shot .tr, body.shot .bl, body.shot .lede, body.shot .grain, body.shot .scrim.bot { display: none !important; } |
| body.shot .credit { bottom: var(--gut); } |
|
|
| |
| .scrub-in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } |
| .scrub:focus-within .knob { outline: 2px solid var(--fg); outline-offset: 4px; } |
| button:focus-visible, a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } |
| .readout .read { margin-top: 6px; justify-self: start; border: 1px solid var(--line-strong); background: var(--panel); color: var(--fg); padding: 7px 11px; } |
| .readout .read:hover { border-color: var(--ink); color: var(--ink); } |
| .readout { pointer-events: auto; } |
|
|
| |
| .sheet-head { position: relative; } |
| .sheet-head > :first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } |
| .sheet-head > .icon, .sheet-tools .icon { flex: none; } |
| .sheet-tools .seg { flex: 0 1 auto; min-width: 0; } |
| @media (max-width: 720px) { |
| .sheet-head { flex-wrap: wrap; } |
| .sheet-head > :first-child { flex-basis: 100%; padding-right: 48px; } |
| .sheet-tools { flex: 1 1 100%; justify-content: space-between; } |
| .sheet-tools .icon, .sheet-head > .icon { position: absolute; top: 14px; right: 14px; } |
| .seg.small .chip { white-space: nowrap; } |
| .sheet-head h2 { font-size: 28px; } |
| } |
|
|
| |
| @media (pointer: coarse) { |
| .icon { width: 44px; height: 44px; } |
| .tools { gap: 8px; } |
| .chip { min-height: 44px; } |
| .seg.small .chip { min-height: 40px; } |
| .readout .read { min-height: 40px; } |
| } |
| @media (pointer: coarse) and (max-width: 360px) { |
| .chip { padding-left: 8px; padding-right: 8px; } |
| } |
|
|
| .credit { text-shadow: 0 0 8px #000, 0 0 2px #000; } |
|
|
| .tr { flex-wrap: wrap; justify-content: flex-end; } |
| .layer-hint { order: 3; flex-basis: 100%; margin: 6px 2px 0; font-size: 10.5px; line-height: 1.35; color: var(--dim); max-width: 300px; text-align: right; } |
| .layer-why { order: 4; flex-basis: 100%; max-width: 300px; margin-left: auto; font-size: 10.5px; line-height: 1.35; color: var(--dim); text-align: right; } |
| .layer-why summary { cursor: pointer; } |
| .layer-why p { margin: 4px 0 0; } |
| @media (max-width: 700px) { .layer-hint, .layer-why { display: none; } } |
| .tear-seg { order: 5; margin-left: auto; margin-top: 6px; } |
| body.tearing .bottom, body.tearing #readout { opacity: .35; pointer-events: none; } |
| .load-err { margin-top: 14px; max-width: 340px; line-height: 1.5; color: var(--fg); } |
| .load-err p { margin: 0 0 10px; } |
| #loader.failed .bar { opacity: .3; } |
| .viewer img.cmp { pointer-events: none; } |
| .swipe-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gpu); box-shadow: 0 0 6px var(--gpu); pointer-events: none; } |
| .swipe { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; font-size: 11px; padding: 6px 12px; background: rgba(0,0,0,.6); border: 1px solid var(--line); color: var(--fg); } |
| .swipe input { width: 180px; } |
| .scalebar { position: absolute; left: 16px; bottom: 16px; font-size: 10.5px; color: var(--fg); pointer-events: none; text-shadow: 0 0 4px #000; } |
| .scalebar i { display: block; height: 4px; border: 1px solid var(--fg); border-top: 0; margin-bottom: 4px; } |
| .img-err { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } |
| .layer-why summary { display: block; text-align: right; } |
| [hidden] { display: none !important; } |
|
|
| |
| .vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 85% 80% at 55% 52%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); } |
| body.shot .vignette { display: none; } |
|
|
| |
| .help { inset: auto auto var(--gut) var(--gut); width: min(440px, calc(100vw - 2 * var(--gut))); max-height: calc(100vh - 2 * var(--gut)); } |
| .keys { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; padding: 16px 20px 6px; overflow: auto; font-size: 11.5px; color: #c9c1b5; } |
| .keys dt { white-space: nowrap; color: var(--dim); } |
| .keys dd { margin: 0; } |
| kbd { display: inline-block; min-width: 20px; padding: 2px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; font: inherit; color: var(--fg); text-align: center; } |
| .help-foot { padding: 4px 20px 16px; margin: 0; } |
| @media (pointer: coarse) { #btnHelp { display: none; } } |
|
|
| |
| @media (max-width: 720px) { |
| .tr { left: var(--gut); justify-content: space-between; row-gap: 8px; } |
| .tr > .seg[role=tablist] { flex: 1 1 100%; } |
| .tr > .seg[role=tablist] .chip { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 10px; letter-spacing: .06em; line-height: 1.25; } |
| .tear-seg { margin-top: 0; order: 2; } |
| .tools { order: 1; } |
| .bl { bottom: calc(var(--gut) + 64px + 44px + 8px + 44px + 14px); } |
| .tear-seg { flex-wrap: wrap; justify-content: flex-end; } |
| } |
| |
| @media (min-width: 721px) { .tr { max-width: 600px; } } |
| |
| .scroll-pick { display: flex; align-items: center; gap: 8px; margin-top: 12px; pointer-events: auto; } |
| .scroll-pick select { background: rgba(12,10,9,0.8); color: #ece6db; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; max-width: 240px; } |
| .local-tag { color: #7fd8ff; } |
| .open-own .o-private { border-left: 2px solid #7fd8ff; padding-left: 10px; } |
| .o-drop { border: 1.5px dashed rgba(255,255,255,0.28); border-radius: 12px; padding: 22px 16px; text-align: center; cursor: pointer; margin: 10px 0; transition: background .2s, border-color .2s; } |
| .o-drop.over, .o-drop:focus-visible { background: rgba(255,179,71,0.08); border-color: #ffb347; outline: none; } |
| .o-drop-btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; } |
| .o-drop-btns label { cursor: pointer; } |
| .o-url { display: flex; gap: 8px; margin-top: 8px; } |
| .o-url input { flex: 1; min-width: 0; background: rgba(0,0,0,0.4); color: inherit; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; } |
| .o-status { padding: 10px 12px; border-radius: 8px; font-size: 12px; margin: 8px 0; background: rgba(255,255,255,0.05); } |
| .o-status.err { background: rgba(255,80,60,0.12); color: #ffb4a8; } |
| .o-status.ok { background: rgba(80,200,255,0.1); color: #a8e6ff; } |
| .o-status ul { margin: 6px 0 0; padding-left: 18px; } |
| .o-list { list-style: none; padding: 0; margin: 6px 0 12px; } |
| .o-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } |
| .o-list li > span:last-child { display: flex; gap: 6px; } |
| .mu { text-transform: none; } |
| @media (min-width: 721px) { .hud.tr .seg[role=tablist] .chip { letter-spacing: .07em; padding: 8px 11px; } } |
|
|
| |
| body.destroy.tool-tear #gl { cursor: crosshair; } |
| body.destroy.tool-crush #gl { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23f3e6cf' stroke='%231a120c' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 13c0-2 1.4-3.2 3-3.2s2.8 1.1 2.8 2.6c0-1.9 1.3-3 2.9-3s2.8 1.1 2.8 2.8c.1-1.6 1.4-2.6 2.9-2.6 1.6 0 2.8 1.2 2.8 2.9v.9c.4-.7 1.2-1.1 2-1.1 1.4 0 2.3 1 2.3 2.5v5.2c0 4.7-3.7 8.1-8.6 8.1h-3.4C10 28.1 6 24.6 6 20.4z'/%3E%3Cpath d='M11.8 12.4v3.6M17.5 12.2v3.6M23.2 12.5v3.4M6.4 17.4c2.3-1.6 5.4-1.6 7.4.4' fill='none'/%3E%3C/g%3E%3C/svg%3E") 16 11, pointer; } |
| body.destroy.tool-crush.pressing #gl, body.destroy.tool-crush #gl:active { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='-1 -4 34 38'%3E%3Cg fill='%23f3e6cf' stroke='%231a120c' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 13c0-2 1.4-3.2 3-3.2s2.8 1.1 2.8 2.6c0-1.9 1.3-3 2.9-3s2.8 1.1 2.8 2.8c.1-1.6 1.4-2.6 2.9-2.6 1.6 0 2.8 1.2 2.8 2.9v.9c.4-.7 1.2-1.1 2-1.1 1.4 0 2.3 1 2.3 2.5v5.2c0 4.7-3.7 8.1-8.6 8.1h-3.4C10 28.1 6 24.6 6 20.4z'/%3E%3Cpath d='M11.8 12.4v3.6M17.5 12.2v3.6M23.2 12.5v3.4M6.4 17.4c2.3-1.6 5.4-1.6 7.4.4' fill='none'/%3E%3C/g%3E%3C/svg%3E") 16 12, pointer; } |
| body.destroy.tool-burn #gl { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 3c1 5 7.5 8 7.5 15.5a7.5 7.5 0 0 1-15 0c0-4.2 2-6.5 3.2-8.6.4 3 1.8 4.3 3 4.4-1-4.2 0-8.3 1.3-11.3z' fill='%23ff8a2a' stroke='%231a120c' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16 15c.6 3 3.6 4.4 3.6 7.6a3.6 3.6 0 0 1-7.2 0c0-2.2 2-4.4 3.6-7.6z' fill='%23ffd56a'/%3E%3C/svg%3E") 16 4, pointer; } |
| body.destroy.tool-water #gl { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C12.4 9.6 8 13.8 8 19.4a8 8 0 0 0 16 0C24 13.8 19.6 9.6 16 3z' fill='%2378b8e8' stroke='%230c1620' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12.4 19.6a3.8 3.8 0 0 0 3 3.6' fill='none' stroke='%23e8f6ff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 16 27, pointer; } |
| .touch-pop { position: fixed; z-index: 8; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; background: center / contain no-repeat; animation: pop .65s ease-out forwards; } |
| .touch-pop.crush { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='-1 -4 34 38'%3E%3Cg fill='%23f3e6cf' stroke='%231a120c' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 13c0-2 1.4-3.2 3-3.2s2.8 1.1 2.8 2.6c0-1.9 1.3-3 2.9-3s2.8 1.1 2.8 2.8c.1-1.6 1.4-2.6 2.9-2.6 1.6 0 2.8 1.2 2.8 2.9v.9c.4-.7 1.2-1.1 2-1.1 1.4 0 2.3 1 2.3 2.5v5.2c0 4.7-3.7 8.1-8.6 8.1h-3.4C10 28.1 6 24.6 6 20.4z'/%3E%3Cpath d='M11.8 12.4v3.6M17.5 12.2v3.6M23.2 12.5v3.4M6.4 17.4c2.3-1.6 5.4-1.6 7.4.4' fill='none'/%3E%3C/g%3E%3C/svg%3E"); } |
| .touch-pop.burn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 3c1 5 7.5 8 7.5 15.5a7.5 7.5 0 0 1-15 0c0-4.2 2-6.5 3.2-8.6.4 3 1.8 4.3 3 4.4-1-4.2 0-8.3 1.3-11.3z' fill='%23ff8a2a' stroke='%231a120c' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16 15c.6 3 3.6 4.4 3.6 7.6a3.6 3.6 0 0 1-7.2 0c0-2.2 2-4.4 3.6-7.6z' fill='%23ffd56a'/%3E%3C/svg%3E"); } |
| .touch-pop.water { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C12.4 9.6 8 13.8 8 19.4a8 8 0 0 0 16 0C24 13.8 19.6 9.6 16 3z' fill='%2378b8e8' stroke='%230c1620' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12.4 19.6a3.8 3.8 0 0 0 3 3.6' fill='none' stroke='%23e8f6ff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } |
| .touch-pop.tear { display: none; } |
| @keyframes pop { 0% { transform: scale(.6); opacity: 0 } 25% { transform: scale(1.05); opacity: 1 } 100% { transform: scale(.9); opacity: 0 } } |
| .chip.tool.on { background: var(--fg); color: var(--bg); } |
| .chip:disabled { opacity: .35; cursor: default; } |
| .roll-up { flex: none; border: 1px solid var(--line-strong); background: var(--panel); color: var(--fg); min-height: 34px; } |
| .roll-up.on { background: var(--ink); color: var(--bg); border-color: var(--ink); } |
| @media (max-width: 720px) { .roll-up { padding: 8px; font-size: 10px; } } |
| @media (max-width: 720px) { body.destroy #readout { display: none; } } |
|
|
| .prize-badge { font-size: 11px; color: #f2c66d; border: 1px solid rgba(242,198,109,0.45); border-radius: 999px; padding: 3px 9px; text-decoration: none; white-space: nowrap; } |
| .prize-badge:hover { background: rgba(242,198,109,0.12); } |
| .scroll-pick .prize-only { font-size: 11px; padding: 3px 9px; } |
| .scroll-pick .prize-only.on { border-color: rgba(242,198,109,0.7); color: #f2c66d; } |
| .scroll-pick { flex-wrap: wrap; } |
| .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } |
| #gl:focus-visible, .viewer:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } |
| .about-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; opacity: .75; } |
| .about-foot a { color: inherit; } |
| .about-foot .version { letter-spacing: .02em; } |
|
|
| |
| #btnFull, .embed-full, .embed-gate { display: none; } |
| .embed #btnFull { display: inline-flex; } |
| .embed .embed-full { display: block; position: fixed; left: 14px; top: 56px; z-index: 30; font-size: 11px; color: var(--dim, #9a8f80); text-decoration: none; padding: 4px 8px; border-radius: 999px; background: rgba(6, 5, 5, .6); } |
| .embed .embed-full:hover, .embed .embed-full:focus-visible { color: #fff; } |
| .embed .embed-gate:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 5; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; touch-action: pan-x pan-y; } |
| .embed .embed-gate span { padding: 8px 14px; border-radius: 999px; background: rgba(6, 5, 5, .72); border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; letter-spacing: .06em; } |
| .embed .embed-gate:hover span, .embed .embed-gate:focus-visible span { border-color: rgba(255, 255, 255, .5); } |
| .embed .hud.tl .kicker, .embed .hud.tl .lede, .embed .vignette { display: none; } |
| .embed .hud.tl h1 { font-size: clamp(16px, 4.2vw, 24px); line-height: 1.1; max-width: 60vw; } |
| .embed .layer-hint, .embed .layer-why { display: none; } |
| .embed .readout { display: none; } |
| .embed-nocontrols .hud, .embed-nocontrols .scrub, .embed-nocontrols .dock { display: none !important; } |
| @media (max-height: 420px) { .embed .hud.tl h1 { display: none; } } |
| .embed-code { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .05); color: inherit; border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; padding: 8px; font-size: 11px; resize: vertical; overflow: hidden; } |
| #embedSheet label { display: block; margin: 4px 0; } |
|
|
| .toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; max-width: min(560px, 90vw); padding: 8px 14px; border-radius: 10px; background: rgba(6, 5, 5, .88); border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; line-height: 1.4; } |
| .toast[hidden] { display: none; } |
|
|
