.metadata{padding:24px 32px;color:#fff;width:100%;box-sizing:border-box;background:var(--bg-panel);box-shadow:0 1px 3px rgba(0,0,0,.25)}.metadata-header{display:flex;justify-content:space-between;align-items:flex-start}.metadata-title{display:block;font-size:28px;font-weight:700;margin-bottom:4px}.metadata-title-link{color:#fff;text-decoration:none;transition:color .12s}.metadata-title-link:hover{text-decoration:underline;color:var(--accent-hover)}.metadata-artist{font-size:18px;color:#ccc;margin-bottom:4px}.metadata-mapper{display:flex;align-items:center;gap:8px;margin-bottom:16px}.mapper-text{font-size:13px;color:#aaa}.mapper-name{font-weight:700;color:#ccc}.difficulty-section{text-align:right}.difficulty-menu{position:relative;display:inline-block}.difficulty-select{padding:8px 42px 8px 18px;cursor:pointer;color:#fff;border:1px solid var(--border-subtle);border-radius:9999px;font-weight:700;font-size:16px;font-family:inherit;background-color:var(--bg-control);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23cccccc' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 18px center}.difficulty-dropdown{position:absolute;right:0;top:100%;padding-top:8px;z-index:100;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s}.difficulty-dropdown--open{opacity:1;visibility:visible;transform:none}.difficulty-dropdown .presence-panel{min-width:170px;max-height:320px;overflow-y:auto}.presence-item--active{color:var(--user-colour,#fff);font-weight:700}.presence-item--viewed{color:#9ad}.difficulty-dropdown .presence-item{display:flex;align-items:center;gap:6px}.presence-item-check{display:inline-block;width:12px;flex:0 0 12px;text-align:center;color:#66ccff;font-size:12px}.difficulty-count{color:#66ccff;font-weight:700}.difficulty-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.tag-list{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;font-family:var(--font-content)}.tag{background:var(--bg-control);padding:4px 10px;border-radius:9999px;font-size:12px;color:#ccc;text-decoration:none;cursor:pointer}.tag:hover{background:var(--bg-control-light);color:#fff}.stat-row{display:flex;gap:16px;justify-content:flex-end;margin-top:8px;color:#ddd;font-size:14px;font-family:var(--font-content)}.stat-label{color:#aaa}.stat-value{font-weight:700}@media (max-width:768px){.metadata{padding:16px}.metadata-header{flex-wrap:wrap;gap:12px}.metadata-title{font-size:22px}}.settings-scrim{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}.settings-panel{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.5);padding:16px 20px 20px;color:#fff;box-sizing:border-box}.settings-header{display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:700;margin-bottom:4px}.settings-close{background:none;border:none;color:hsl(var(--hsl-f1));font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background-color .12s,color .12s}.settings-close:hover{background:var(--bg-control-light);color:#fff}.settings-section{margin:14px 0 6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--hsl-f1))}.settings-row{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:14px}.settings-label{width:130px;flex-shrink:0}.settings-slider{flex:1 1}.settings-checkbox,.settings-slider{accent-color:var(--user-colour,#00a0f0)}.settings-checkbox{width:16px;height:16px;cursor:pointer}.settings-value{width:44px;text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:hsl(var(--hsl-f1))}.settings-playstyles{display:flex;gap:6px}.settings-playstyle-btn{flex:1 1;padding:7px 0;font-size:13px;font-weight:700;font-family:var(--font-content),monospace;color:#fff;background:var(--bg-control-light);border:2px solid transparent;border-radius:6px;cursor:pointer;transition:background-color .12s,border-color .12s}.settings-playstyle-btn--active{background:#00a0f0;border-color:#60d0ff}.settings-hint{margin-top:6px;font-size:12px;color:hsl(var(--hsl-f1))}.settings-link-btn{background:none;border:none;padding:0;font-size:12px;color:var(--user-colour,#00a0f0);cursor:pointer;text-decoration:underline}.canvas-hud-bottom-left{position:absolute;left:8px;bottom:8px;z-index:10;pointer-events:auto}@media (max-width:900px){.canvas-hud-bottom-left{bottom:38px}}.btn{padding:8px 18px;cursor:pointer;border:none;border-radius:9999px;color:white;transition:background-color .12s}.btn-primary{background:var(--accent);font-weight:700}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--bg-control-light)}.btn-secondary:hover{background:hsl(var(--hsl-b2))}.btn-dark{background:var(--bg-control)}.btn-dark:hover{background:var(--bg-control-light)}.btn-sm{padding:6px 14px;font-size:13px}.btn-undo-redo{padding:6px 16px;cursor:pointer;background:var(--bg-control);color:white;border:none;border-radius:6px;font-weight:700;font-size:13px;transition:background-color .12s,opacity .2s ease,visibility .2s}.btn-undo-redo:hover{background:hsl(var(--hsl-b2))}.btn-undo-redo--hidden{visibility:hidden;opacity:0}.select{padding:6px 14px;cursor:pointer;background:var(--bg-control);color:#fff;border:1px solid var(--border-subtle);border-radius:6px;font-size:13px;transition:background-color .12s}.select:hover{background:var(--bg-control-light)}.url-field{position:relative}.input-url{width:210px;height:40px;box-sizing:border-box;padding:0 16px;font-size:13px;background:var(--bg-control);color:white;border:none;border-radius:9999px;transition:width .25s ease,padding .25s ease,background-color .12s}.input-url.input-url--closed{width:40px;padding:0;cursor:pointer}.input-url:focus,.input-url:hover{background:var(--bg-control-light)}.input-url:focus{outline:none;box-shadow:inset 0 0 0 1px var(--user-colour)}.input-url--invalid,.input-url--invalid:focus{box-shadow:inset 0 0 0 1px #f04848}.url-field-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:hsl(var(--hsl-f1));transition:opacity .2s ease}.url-field--open .url-field-icon,.url-go{opacity:0}.url-go{width:0;margin-left:-8px;overflow:hidden;flex-shrink:0;transition:width .25s ease,margin-left .25s ease,opacity .2s ease}.url-go--open{width:40px;margin-left:0;opacity:1}.top-bar{padding:10px 20px;width:100%;box-sizing:border-box;background:var(--bg-panel);border-bottom:2px solid hsl(var(--hsl-h2));position:relative;z-index:50}.top-bar-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.top-bar-user{grid-column:3;justify-self:end}.top-bar-actions,.top-bar-user{display:flex;align-items:center;gap:8px}.top-bar-actions{grid-column:1;justify-self:start;flex-wrap:wrap}.bubble{width:40px;height:40px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0}.bubble--avatar{border:2px solid;object-fit:cover;background:var(--bg-control);color:#fff;font-weight:700;cursor:pointer}.bubble--self{width:44px;height:44px;border-color:var(--user-colour)}.action-bubble{border:none;background:var(--bg-control);color:hsl(var(--hsl-f1));font-size:16px;line-height:1;cursor:pointer;transition:background-color .12s,color .12s}.action-bubble:hover{background:var(--bg-control-light);color:#fff}.title{text-align:center;grid-column:2;letter-spacing:.14em;transition:opacity .2s ease}.title,.title-dot{margin:0}.title-dot-don{color:var(--don-color)}.title-dot-hidden{color:transparent}.title-dot-kat{color:var(--kat-color)}.presence-menu{position:relative}.spectate-badge{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:50%;pointer-events:none;z-index:1}.presence-dropdown{position:absolute;right:0;top:100%;padding-top:8px;z-index:100;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s}.presence-menu:focus-within .presence-dropdown,.presence-menu:hover .presence-dropdown{opacity:1;visibility:visible;transform:none}.presence-panel{display:flex;flex-direction:column;min-width:170px;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.4)}.presence-item{display:block;padding:10px 16px;color:#fff;font-size:14px;text-align:left;text-decoration:none;background:none;border:none;cursor:pointer;transition:background-color .12s}.presence-item:hover{background:var(--bg-control-light)}.presence-name{font-weight:700;color:var(--user-colour);border-bottom:1px solid var(--border-subtle)}.presence-name--neutral{color:#fff}.presence-diff{color:#aaa;font-size:12px;cursor:default;padding-top:4px;padding-bottom:4px}.presence-diff:hover{background:none}.presence-panel--scroll{max-height:300px;overflow-y:auto}.presence-hint{color:hsl(var(--hsl-f1));font-size:13px;cursor:default}a.presence-hint{cursor:pointer}.presence-friend{display:flex;align-items:center;gap:8px;width:100%}.presence-friend:disabled{opacity:.6;cursor:default}.presence-friend-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0}.presence-friend-name{flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.presence-friend-status{flex-shrink:0;width:14px;text-align:right;color:hsl(var(--hsl-f1))}.login-link{padding:8px 18px;cursor:pointer;background:var(--accent);color:white;text-decoration:none;border:none;border-radius:9999px;font-weight:700;transition:background-color .12s}.login-link:hover{background:var(--accent-hover)}.progress-bar{width:400px;margin:10px auto 0;background:var(--bg-control);border-radius:4px;overflow:hidden;height:6px}.progress-bar-fill{width:40%;background:linear-gradient(90deg,var(--accent),var(--accent-hover),var(--accent));background-size:200% 100%;height:100%;border-radius:4px;animation:progress-slide 1.5s ease-in-out infinite}@keyframes progress-slide{0%{transform:translateX(-100%);background-position:0 0}50%{background-position:100% 0}to{transform:translateX(350%);background-position:0 0}}.below-canvas{display:flex;justify-content:space-between;align-items:flex-start;padding:4px 10px;width:100%;box-sizing:border-box}.button-group,.button-group-wrap{display:flex;gap:6px}.button-group-wrap{flex-wrap:wrap}.subtool-rows{align-self:stretch;position:relative;transition:height .2s ease}.subtool-layer>.button-group-wrap+.button-group-wrap{margin-top:4px}.subtool-layer{position:absolute;top:0;left:0;visibility:hidden;opacity:0;transform:scale(.92);transition:opacity .13s ease,transform .13s ease,visibility .13s}.subtool-layer--open{visibility:visible;opacity:1;transform:none;transition:opacity .2s ease .05s,transform .2s ease .05s,visibility 0s}.tool-column{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.tool-btn{height:30px;box-sizing:border-box;padding:0 14px;font-size:13px;cursor:pointer;color:#fff;border:2px solid transparent;border-radius:6px;font-weight:700;background:var(--bg-control);transition:background-color .12s}.tool-btn:hover{background:var(--bg-control-light)}.tool-btn-active{background:#00a0f0;border-color:#60d0ff}.tool-btn-gameplay-active{background:#a000f0;border-color:#c060ff}.sub-tool-btn{height:30px;box-sizing:border-box;padding:0 12px;font-size:12px;cursor:pointer;color:#fff;border:2px solid transparent;border-radius:6px;font-weight:700;background:var(--bg-control-light);transition:background-color .12s}.sub-tool-btn:not(.sub-tool-btn-active):hover{background:hsl(var(--hsl-b2))}.sub-tool-btn-active{background:#00a0f0;border-color:#60d0ff}.canvas-hud{position:absolute;z-index:10;display:flex;gap:6px;align-items:center;pointer-events:auto}.canvas-hud--top-left{top:8px;left:8px}.canvas-hud--top-right{top:8px;right:8px}.canvas-hud--bottom-right{bottom:8px;right:8px}@media (max-width:900px){.canvas-hud--bottom-right{bottom:38px}}.canvas-hud .btn-undo-redo,.canvas-hud .hud-icon-btn,.canvas-hud .select{background:rgba(0,0,0,.6);border:1px solid var(--border-subtle);height:32px;box-sizing:border-box}.canvas-hud .btn-undo-redo:hover,.canvas-hud .hud-icon-btn:hover,.canvas-hud .select:hover{background:rgba(0,0,0,.8)}.hud-icon-btn{width:32px;padding:0;cursor:pointer;border-radius:6px;color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background-color .12s}.canvas-stage:fullscreen{display:flex;align-items:center;justify-content:center;background:#000}.btn-pause,.btn-play{width:32px;height:32px;padding:0;cursor:pointer;border:none;border-radius:6px;font-size:15px;line-height:1;color:#111;display:flex;align-items:center;justify-content:center;transition:filter .12s}.btn-play{background:#48f080}.btn-pause{background:#f04848}.btn-pause:hover,.btn-play:hover{filter:brightness(1.15)}.btn-compact{display:none}@media (max-width:768px){.btn-text{display:none}.btn-compact{display:inline}.below-canvas{justify-content:center}.tool-column{align-items:center}.button-group-wrap{justify-content:center}.subtool-layer{left:0;right:0;width:fit-content;margin:0 auto}.input-url{width:140px}.title--url-open{opacity:0;pointer-events:none}.top-bar-header.url-open{grid-template-columns:auto 0 1fr}.top-bar-header.url-open .top-bar-actions{flex-wrap:nowrap}.sub-tool-btn{height:80px;display:inline-flex;align-items:center;justify-content:center}.sub-tool-btn,.tool-btn{padding-left:20px;padding-right:20px;flex:1 1 auto}}.gameplay-score-panel{position:absolute;top:52px;right:20px;text-align:right;pointer-events:none;text-shadow:2px 2px 2px rgba(0,0,0,.5)}.gameplay-score{font-size:32px;font-weight:700}.gameplay-accuracy{font-size:24px;color:#ffcc00}.gameplay-spinner-panel{position:absolute;top:52px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:2px 2px 2px rgba(0,0,0,.5)}.gameplay-spinner-count{font-size:40px;font-weight:700;color:#ffcc00}.gameplay-spinner-label{font-size:13px;letter-spacing:.08em}.gameplay-combo-panel{position:absolute;top:50%;left:40px;transform:translateY(-50%);text-align:center;pointer-events:none;text-shadow:2px 2px 2px rgba(0,0,0,.5)}.gameplay-combo{font-size:48px;font-weight:700;color:white}.gameplay-combo-high{color:#ffcc00}.gameplay-combo-label{font-size:16px}.metadata-row{display:flex;align-items:stretch;width:100%;box-sizing:border-box}.metadata-row .metadata{flex:1 1 auto;min-width:0;width:auto}.osu-diff-side{display:flex;align-items:stretch;flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:11px}.osu-diff-panel{position:relative;flex:0 0 auto;width:0;overflow:hidden;transition:width .25s cubic-bezier(.4,0,.2,1)}.osu-diff-side--open .osu-diff-panel{width:300px}.osu-diff-panel-inner{position:absolute;top:0;bottom:0;left:0;width:300px;box-sizing:border-box;flex-direction:column;border-left:1px solid var(--border-subtle)}.osu-diff-panel-inner,.osu-diff-toolbar{display:flex;background:var(--bg-control)}.osu-diff-toolbar{align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border-subtle);font-family:var(--font-content);font-size:12px;color:var(--foreground)}.osu-diff-toolbar-title{font-weight:600;opacity:.8}.osu-diff-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}.osu-diff-section+.osu-diff-section{border-top:2px solid var(--border-subtle)}.osu-diff-empty{padding:12px 10px;opacity:.5;font-style:italic;font-size:12px;font-family:var(--font-content)}.osu-diff-side--max .osu-diff-panel-inner{position:fixed;top:0;left:0;right:0;bottom:0;width:auto;height:auto;max-height:none;z-index:900;border-left:none;box-shadow:0 -4px 24px rgba(0,0,0,.45)}.osu-diff-side--max .osu-diff-body{max-height:none}.osu-diff-panel-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:6px;width:100%;padding:8px 10px;background:var(--bg-control-light);border:none;border-bottom:1px solid var(--border-subtle);font-family:var(--font-content);font-size:12px;color:var(--foreground);text-align:left;cursor:pointer}.osu-diff-panel-head:hover{background:var(--bg-control)}.osu-diff-chevron{flex:0 0 auto;opacity:.6}.osu-diff-filename{opacity:.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.osu-diff-spacer{flex:1 1}.osu-diff-counts{display:inline-flex;gap:6px;font-family:ui-monospace,monospace}.osu-diff-add-count{color:#3fb950}.osu-diff-del-count{color:#f85149}.osu-diff-clean{opacity:.5;font-style:italic}.osu-diff-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--foreground);opacity:.6;cursor:pointer;transition:opacity .12s,background .12s}.osu-diff-btn:hover{opacity:1;background:var(--bg-control)}.osu-diff-body{padding:4px 0}.osu-diff-scroll{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}.osu-diff-scroll::-webkit-scrollbar{width:10px;height:10px}.osu-diff-scroll::-webkit-scrollbar-track{background:transparent}.osu-diff-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px;border:2px solid transparent;background-clip:padding-box}.osu-diff-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32);background-clip:padding-box}.osu-diff-scroll::-webkit-scrollbar-corner{background:transparent}.osu-diff-line{display:flex;align-items:baseline;white-space:pre;line-height:1.5}.osu-diff-line--add{background:rgba(63,185,80,.15)}.osu-diff-line--del{background:rgba(248,81,73,.15)}.osu-diff-gutter{flex:0 0 auto;width:26px;padding:0 3px;text-align:right;color:var(--foreground);opacity:.35;-webkit-user-select:none;user-select:none}.osu-diff-sign{flex:0 0 auto;width:12px;text-align:center;opacity:.8}.osu-diff-line--add .osu-diff-sign{color:#3fb950}.osu-diff-line--del .osu-diff-sign{color:#f85149}.osu-diff-text{flex:1 1 auto;padding-right:10px}.osu-diff-gap{padding:3px 10px 3px 66px;color:var(--foreground);opacity:.4;font-style:italic;background:rgba(127,127,127,.06);-webkit-user-select:none;user-select:none}.osu-diff-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;background:var(--bg-control);border:none;border-left:1px solid var(--border-subtle);color:var(--foreground);cursor:pointer;font-family:var(--font-content);transition:background .12s}.osu-diff-tab:hover{background:var(--bg-control-light)}.osu-diff-tab-spacer{height:14px}.osu-diff-tab-icon{opacity:.7;transition:opacity .12s}.osu-diff-tab:hover .osu-diff-tab-icon{opacity:1}@media (max-width:768px){.metadata-row{position:relative}.osu-diff-side{position:absolute;inset:0;overflow:hidden;pointer-events:none}.osu-diff-panel,.osu-diff-tab{transform:translateX(calc(100vw - 44px));transition:transform .25s cubic-bezier(.4,0,.2,1);pointer-events:auto}.osu-diff-side--open .osu-diff-panel,.osu-diff-side--open .osu-diff-tab{transform:translateX(0)}.osu-diff-tab{left:0;width:44px;justify-content:center}.osu-diff-panel,.osu-diff-tab{position:absolute;top:0;bottom:0}.osu-diff-panel{left:44px;right:0;width:auto}.osu-diff-side--open .osu-diff-panel{width:auto}.osu-diff-panel-inner{right:0;width:auto}}.broad-timeline{position:absolute;bottom:8px;left:108px;right:192px;height:32px;box-sizing:border-box;z-index:10;border:1px solid var(--border-subtle);border-radius:6px;overflow:hidden;cursor:pointer;touch-action:none;pointer-events:auto;opacity:.35;transition:opacity .18s ease}.broad-timeline:hover{opacity:1}.broad-timeline-canvas{display:block;width:100%;height:100%}@media (max-width:900px){.broad-timeline{left:8px;right:8px;bottom:8px;height:22px}}