html,body{margin:0;background:#040713}body:has(.drn){min-height:100vh;overflow-x:hidden;color:#f8f3e8;font-family:Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif}.drn{--accent: #ffd166;--accent-soft: #ff8f70;width:min(100%,860px);min-height:95vh;margin:0 auto;padding:12px 14px 42px;display:flex;flex-direction:column;gap:11px;box-sizing:border-box}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.drn__hud{min-height:58px;display:grid;grid-template-columns:minmax(100px,1fr) minmax(180px,1.35fr) minmax(110px,1fr);align-items:center;gap:12px;padding:3px 7px;font-family:JetBrains Mono,monospace}.drn__score-block{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:8px}.drn__score{color:var(--accent);font:900 clamp(30px,5vw,42px)/.9 "Inter Tight","Inter",sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 0 22px color-mix(in srgb,var(--accent) 55%,transparent)}.drn__score-label,.drn__level-no,.drn__tempo,.drn__flow-line span{color:#8f94aa;font-size:9px;letter-spacing:.17em;text-transform:uppercase}.drn__level-block{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 10px;text-align:center}.drn__level-name{width:100%;color:#f8f3e8;font-size:15px;letter-spacing:.11em;text-transform:uppercase}.drn__tempo{color:var(--accent-soft)}.drn__run-block{display:grid;grid-template-columns:1fr auto;align-items:center;justify-items:end;gap:3px 10px}.drn__flow-line{display:flex;align-items:baseline;gap:6px}.drn__flow-line strong{min-width:24px;color:var(--accent-soft);font-size:16px;font-variant-numeric:tabular-nums}.drn__lives{display:flex;gap:5px}.drn__life{width:14px;height:12px;background:#ff5f7e;border-radius:4px 4px 7px 7px;box-shadow:0 0 10px #ff5f7e8c,inset 0 1px #ffffff59;clip-path:polygon(50% 100%,3% 45%,6% 17%,25% 0,50% 18%,75% 0,94% 17%,97% 45%);transition:opacity .16s ease,transform .16s ease,filter .16s ease}.drn__life--lost{opacity:.2;filter:grayscale(1);transform:scale(.78);box-shadow:none}.drn__best{grid-column:1 / -1;color:#85899b;font-size:9px;font-variant-numeric:tabular-nums}.drn__stage{position:relative;width:100%;height:clamp(430px,66vh,620px);min-height:430px;overflow:hidden;border:2px solid color-mix(in srgb,var(--accent) 28%,#191d30);border-radius:22px;background:#091020;box-shadow:0 25px 70px #00000073,inset 0 0 0 1px #ffffff0d;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;isolation:isolate}.drn__stage:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 12%,transparent 88%,rgba(0,0,0,.24)),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);mix-blend-mode:screen}.drn__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.drn__beat-rail{position:absolute;z-index:4;top:12px;left:50%;width:min(220px,44%);height:5px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;transform:translate(-50%);pointer-events:none}.drn__beat-rail span{border-radius:999px;background:#ffffff24;transition:background 80ms ease,box-shadow 80ms ease,transform 80ms ease}.drn__beat-rail span.is-active{background:var(--accent);box-shadow:0 0 14px var(--accent);transform:scaleY(1.45)}.drn__progress{position:absolute;z-index:4;left:0;right:0;bottom:0;height:4px;background:#ffffff14;pointer-events:none}.drn__progress span{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--accent-soft),var(--accent));box-shadow:0 0 14px var(--accent);transition:width 90ms linear}.drn__phrase{position:absolute;z-index:4;top:25px;left:50%;width:min(330px,58%);display:none;grid-template-columns:repeat(32,1fr);gap:2px;transform:translate(-50%);pointer-events:none}.drn__phrase span{height:3px;border-radius:999px;background:#ffffff1a;transition:background .11s ease,box-shadow .11s ease,transform .11s ease}.drn__phrase span:nth-child(8n+1){height:5px;margin-top:-1px}.drn__phrase span.is-played{background:var(--accent-soft);box-shadow:0 0 8px color-mix(in srgb,var(--accent-soft) 72%,transparent)}.drn__phrase span.is-perfect{background:var(--accent);box-shadow:0 0 11px var(--accent)}.drn__phrase span.is-active{transform:scaleY(1.75);background:#fff}.drn__power{position:absolute;z-index:5;top:11px;right:12px;min-height:24px;display:inline-flex;align-items:center;gap:7px;padding:0 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#050812b8;color:#a0a5b8;font:800 8px/1 JetBrains Mono,monospace;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(8px)}.drn__power-dot{width:7px;height:7px;border-radius:2px;background:#596077;box-shadow:0 0 0 transparent}.drn[data-power=noggles] .drn__power-dot{background:#ffd166;box-shadow:0 0 10px #ffd166}.drn[data-power=tape] .drn__power-dot{background:#ff78c7;box-shadow:0 0 10px #ff78c7}.drn[data-power=bass] .drn__power-dot{background:#78f0ca;box-shadow:0 0 10px #78f0ca}.drn[data-ghost=true] .drn__power{border-color:#9db8ff}.drn__judge{position:absolute;z-index:5;left:50%;top:41px;min-height:22px;transform:translate(-50%);color:#fff;font:900 14px/1 JetBrains Mono,monospace;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;pointer-events:none;text-shadow:0 2px 16px rgba(0,0,0,.75)}.drn__judge--onbeat,.drn__judge--perfect{color:#8fffd1;text-shadow:0 0 18px rgba(143,255,209,.75)}.drn__judge--good{color:#ffd166;text-shadow:0 0 16px rgba(255,209,102,.55)}.drn__judge--offgrid{color:#b7acc9}.drn__judge--clear{color:#7ad7ff}.drn__judge--hit{color:#ff6b86;text-shadow:0 0 18px rgba(255,107,134,.7)}.drn__judge--level{color:var(--accent)}.drn__tap-hint{position:absolute;z-index:4;left:50%;bottom:16px;transform:translate(-50%);color:#ffffff85;font:700 9px/1 JetBrains Mono,monospace;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;pointer-events:none;transition:opacity .18s ease}.drn__tap-hint--gone{opacity:0}.drn__overlay{position:absolute;z-index:8;inset:0;display:grid;place-items:center;padding:12px clamp(12px,3vw,28px);background:#03050ec2;backdrop-filter:blur(9px) saturate(.8);-webkit-backdrop-filter:blur(9px) saturate(.8);opacity:1;visibility:visible;transition:opacity .23s ease,visibility .23s ease}.drn__overlay--hidden{opacity:0;visibility:hidden;pointer-events:none}.drn__card{position:relative;width:min(100%,650px);max-height:100%;overflow:auto;display:grid;grid-template-columns:minmax(155px,.36fr) minmax(0,.64fr);border:2px solid rgba(255,255,255,.82);border-radius:18px;background:#090b16;box-shadow:9px 9px color-mix(in srgb,var(--accent) 78%,#000),0 28px 80px #0009;transform:translateY(0) rotate(-.35deg)}.drn__postcard{min-height:100%;background-position:center 42%;background-size:cover;border-right:2px solid rgba(255,255,255,.82);filter:saturate(.94) contrast(1.06)}.drn__postcard:after{content:"";display:block;width:100%;height:100%;background:linear-gradient(180deg,transparent 35%,rgba(7,8,17,.76))}.drn__card-body{min-width:0;padding:clamp(14px,2.3vw,21px);text-align:center}.drn__eyebrow{display:flex;justify-content:space-between;gap:12px;color:var(--accent);font:800 9px/1.35 JetBrains Mono,monospace;letter-spacing:.18em;text-transform:uppercase}.drn__eyebrow span:last-child{color:#9da2b7;text-align:right}.drn__title{margin:13px 0 8px;color:#fffaf0;font:950 clamp(26px,4vw,44px)/.91 "Inter Tight","Inter",sans-serif;letter-spacing:-.045em;text-transform:uppercase;text-shadow:0 0 34px color-mix(in srgb,var(--accent) 28%,transparent)}.drn__sub{max-width:540px;margin:0 auto;color:#b8b9c7;font-size:clamp(11px,1.6vw,14px);line-height:1.4}.drn__noun-picker{margin:11px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.drn__noun-picker button{min-width:0;padding:6px 7px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:7px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#ffffff09;color:#eef0f7;cursor:pointer;text-align:left}.drn__noun-picker button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,#0a0c18);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 18%,transparent)}.drn__noun-picker button:focus-visible{outline:3px solid #7ad7ff;outline-offset:2px}.drn__noun-picker img{grid-row:1 / 3;width:42px;height:42px;image-rendering:pixelated}.drn__noun-picker span{overflow:hidden;font:800 9px/1.1 JetBrains Mono,monospace;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}.drn__noun-picker small{color:#888ea2;font:700 7px/1.1 JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.drn__card-stats{margin:13px 0 12px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.13);border-radius:12px;overflow:hidden}.drn__card-stats>span{min-width:0;padding:8px 5px;display:flex;flex-direction:column;gap:4px}.drn__card-stats>span+span{border-left:1px solid rgba(255,255,255,.13)}.drn__card-stats small{color:#777d92;font:700 8px/1 JetBrains Mono,monospace;letter-spacing:.16em;text-transform:uppercase}.drn__card-stats strong{overflow:hidden;color:#f8f3e8;font:800 clamp(11px,2.3vw,14px)/1.2 "JetBrains Mono",monospace;text-overflow:ellipsis;white-space:nowrap}.drn__route{margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);list-style:none}.drn__route li{position:relative;display:grid;justify-items:center;gap:4px;color:#656a7e;font:700 8px/1 JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.drn__route li:before{content:"";position:absolute;top:10px;right:50%;width:100%;height:2px;background:#262a3a;z-index:-1}.drn__route li:first-child:before{display:none}.drn__route li span{display:grid;place-items:center;width:22px;height:22px;border:2px solid #373b4e;border-radius:50%;background:#090b16;color:#777d92}.drn__route li.is-complete:before,.drn__route li.is-active:before{background:var(--accent)}.drn__route li.is-complete span{border-color:var(--accent);background:var(--accent);color:#050711}.drn__route li.is-active span{border-color:var(--accent);color:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 65%,transparent)}.drn__route li.is-active b{color:#f8f3e8}.drn__overlay-best{margin:11px 0 0;color:#8f94aa;font:700 9px/1 JetBrains Mono,monospace;letter-spacing:.1em}.drn__go{margin-top:10px;min-height:44px;border:0;border-radius:12px;padding:12px 20px;background:var(--accent);color:#060812;box-shadow:0 6px color-mix(in srgb,var(--accent) 48%,#000),0 0 28px color-mix(in srgb,var(--accent) 26%,transparent);cursor:pointer;font:900 12px/1 JetBrains Mono,monospace;letter-spacing:.14em;text-transform:uppercase;transition:transform .1s ease,box-shadow .1s ease,filter .1s ease}.drn__go:hover{filter:brightness(1.12);transform:translateY(-1px)}.drn__go:active{transform:translateY(4px);box-shadow:0 2px color-mix(in srgb,var(--accent) 48%,#000)}.drn__go:focus-visible{outline:3px solid #fff;outline-offset:4px}.drn__input-note{margin:9px 0 0;color:#676c7f;font:700 8px/1 JetBrains Mono,monospace;letter-spacing:.17em;text-transform:uppercase}.drn__controls{display:flex;justify-content:center;align-items:center;gap:9px}.drn__jump{min-width:210px;min-height:55px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid color-mix(in srgb,var(--accent) 62%,transparent);border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,#0a0c18),#090b16f2);color:var(--accent);box-shadow:inset 0 1px #ffffff14,0 8px 25px #00000040;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.drn__jump-arrow{font:900 25px/1 Inter,sans-serif}.drn__jump-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.drn__jump-copy strong{font:900 13px/1 JetBrains Mono,monospace;letter-spacing:.18em}.drn__jump-copy small{color:#81869b;font:600 8px/1 JetBrains Mono,monospace;letter-spacing:.08em}.drn__jump:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 22%,#090b16)}.drn__jump:active:not(:disabled){transform:translateY(2px)}.drn__jump:focus-visible{outline:3px solid #7ad7ff;outline-offset:3px}.drn__jump:disabled{opacity:.32;cursor:default}.drn__audio{min-height:42px;padding:0 12px;border:1px solid #30364a;border-radius:999px;background:#090c17;color:#888fa6;cursor:pointer;font:700 9px/1 JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.drn__audio[aria-pressed=true]{border-color:#6f667d;color:#d3cadf}.drn__audio:focus-visible{outline:3px solid #7ad7ff;outline-offset:3px}.drn__versions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font:700 9px/1.4 JetBrains Mono,monospace;text-transform:uppercase;letter-spacing:.09em}.drn__versions span{color:#616679}.drn__versions a{padding:5px 8px;border:1px solid #34394d;border-radius:999px;color:#8b90a4;text-decoration:none}.drn__versions a[aria-current=page]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.drn__versions a:hover{border-color:var(--accent);color:var(--accent)}.drn__siblings{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 17px;font:600 11px/1.4 JetBrains Mono,monospace}.drn__siblings a{color:#9a8b65;text-decoration:none}.drn__siblings a:hover{color:var(--accent);text-decoration:underline}@media(max-width:600px){.drn{padding:8px 8px 34px;gap:8px}.drn__hud{grid-template-columns:1fr 1.25fr 1fr;gap:5px;padding-inline:4px}.drn__score-block{grid-template-columns:1fr;gap:2px}.drn__score-label{font-size:7px}.drn__level-name{font-size:11px}.drn__level-no,.drn__tempo{font-size:7px}.drn__flow-line span{display:none}.drn__stage{height:min(69vh,570px);min-height:430px;border-radius:16px}.drn__phrase{width:72%}.drn__power{top:9px;right:8px;max-width:43%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drn__card{display:block;box-shadow:6px 6px color-mix(in srgb,var(--accent) 78%,#000)}.drn__postcard{height:72px;min-height:0;border-right:0;border-bottom:2px solid rgba(255,255,255,.82)}.drn__card-body{padding:14px}.drn__noun-picker button{grid-template-columns:32px 1fr;padding:5px;column-gap:5px}.drn__noun-picker img{width:32px;height:32px}.drn__noun-picker span{font-size:7px}.drn__card-stats{margin-block:13px}.drn__route li b{font-size:7px}.drn__go{width:100%}}@media(max-height:650px)and (orientation:landscape){.drn{max-width:980px;min-height:auto}.drn__hud{min-height:40px}.drn__stage{height:72vh;min-height:320px}.drn__postcard{display:none}.drn__card-body{padding:13px 18px}.drn__title{font-size:28px;margin-block:8px 5px}.drn__card-stats{margin-block:9px}.drn__overlay-best,.drn__input-note{display:none}.drn__audio{padding-inline:10px}.drn__go{margin-top:9px;min-height:42px}}@media(prefers-reduced-motion:reduce){.drn *,.drn *:before,.drn *:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.drn__card{transform:none}.drn__stage:after{background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 15%,transparent 85%,rgba(0,0,0,.18))}}