:root{--ink: #0a0a0a;--ink-deep: #050505;--parchment: #d9c9a3;--parchment-soft: #b8a884;--parchment-dim: #6e6448;--gold: #c9a85a;--gold-bright: #e6c876;--rule: #3a3528;--display: "Cormorant Garamond", "EB Garamond", Georgia, serif;--mono: "JetBrains Mono", "Courier New", monospace;--gutter: clamp(16px, 2vw, 28px);--rule-w: 1px;--corner-len: 28px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--ink-deep);color:var(--parchment);font-family:var(--display);-webkit-font-smoothing:antialiased;overflow:hidden}#app{position:relative;width:100vw;height:100vh}#stage{display:block;width:100%;height:100%}.corner{position:absolute;width:var(--corner-len);height:var(--corner-len);pointer-events:none;z-index:2}.corner--tl{top:var(--gutter);left:var(--gutter);border-top:var(--rule-w) solid var(--gold);border-left:var(--rule-w) solid var(--gold)}.corner--tr{top:var(--gutter);right:var(--gutter);border-top:var(--rule-w) solid var(--gold);border-right:var(--rule-w) solid var(--gold)}.corner--bl{bottom:var(--gutter);left:var(--gutter);border-bottom:var(--rule-w) solid var(--gold);border-left:var(--rule-w) solid var(--gold)}.corner--br{bottom:var(--gutter);right:var(--gutter);border-bottom:var(--rule-w) solid var(--gold);border-right:var(--rule-w) solid var(--gold)}.overlay{position:absolute;inset:0;pointer-events:none;z-index:1}.overlay:before{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(to top,rgba(5,5,5,.6),transparent);pointer-events:none}.title-card{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;animation:titleCard 9s ease forwards}.title-card__name{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(34px,5vw,64px);color:var(--parchment);letter-spacing:.02em;line-height:1}.title-card__rule{width:60px;height:1px;background:var(--gold);margin:18px auto}.title-card__desc{font-family:var(--mono);font-weight:300;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--parchment-soft)}.title-card__mark{font-family:var(--mono);font-weight:300;font-size:9px;letter-spacing:.3em;color:var(--gold);margin-top:22px}@keyframes titleCard{0%{opacity:0}12%{opacity:1}68%{opacity:1}to{opacity:0}}.dial{position:absolute;left:50%;bottom:calc(var(--gutter) + 14px);transform:translate(-50%);width:min(38vw,420px);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:auto}.dial__label{font-family:var(--mono);font-size:9px;font-weight:300;letter-spacing:.4em;color:var(--parchment-dim);text-indent:.4em}.dial__input{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--rule);outline:none;cursor:ew-resize}.dial__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--gold);border:1px solid var(--ink);border-radius:0;cursor:ew-resize}.dial__input::-moz-range-thumb{width:12px;height:12px;background:var(--gold);border:1px solid var(--ink);border-radius:0;cursor:ew-resize}.hint{position:absolute;left:50%;bottom:calc(var(--gutter) + 48px);transform:translate(-50%);font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;color:var(--parchment-dim);opacity:0;transition:opacity .8s ease;white-space:nowrap}.hint.is-visible{opacity:1}
