:root{--bg:#080d15;--panel:#101925;--panel2:#141f2d;--line:#293546;--text:#f4f1e9;--muted:#9ba8b8;--gold:#d8ad52;--gold2:#f0cc79;--danger:#f07878;--success:#6fd5a7;--warning:#efc76d;--radius:16px;--shadow:0 24px 70px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:radial-gradient(circle at 12% 0,#152235 0,transparent 38%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;min-height:100vh}a{color:var(--gold2);text-decoration:none}a:hover{text-decoration:underline}h1,h2,p{margin-top:0}h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.08;letter-spacing:-.035em;margin-bottom:.7rem}h2{line-height:1.2}.gold{color:var(--gold)}.muted{color:var(--muted)}.page-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:42px 0 64px}.site-header{height:72px;padding:0 max(20px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(8,13,21,.86);backdrop-filter:blur(15px);position:sticky;top:0;z-index:5}.site-header nav{display:flex;gap:22px}.site-header nav a{color:var(--muted);font-weight:700;font-size:.92rem}.brand{display:flex;align-items:center;gap:13px;color:var(--text);font-size:1.55rem;font-weight:800;letter-spacing:-.04em}.brand:hover{text-decoration:none}.brand-small{font-size:1.1rem}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid #765d2d;border-radius:50%;color:var(--gold2);font-size:.86rem;letter-spacing:.04em;background:#15191c;box-shadow:inset 0 0 0 4px #0b1119}.brand-small .brand-mark{width:36px;height:36px;font-size:.72rem}.card,.feature-card,.admin-section{background:linear-gradient(145deg,rgba(20,31,45,.98),rgba(13,21,31,.98));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.auth-page .page-shell{min-height:100vh;display:grid;place-items:center;padding:28px 0}.auth-layout{display:grid;grid-template-columns:1.25fr .8fr;gap:60px;width:100%;align-items:center}.hero-panel{padding:32px}.hero-panel .brand{margin-bottom:90px}.hero-panel h1{font-size:clamp(3rem,7vw,6.2rem);max-width:850px}.hero-copy{font-size:1.25rem;color:var(--muted)}.staff-lines{height:100px;margin-top:60px;border-top:1px solid #253247;border-bottom:1px solid #253247;display:flex;align-items:center;gap:18%;padding-left:8%;color:rgba(216,173,82,.45);font-size:2.2rem;background:repeating-linear-gradient(to bottom,transparent 0,transparent 19px,#253247 20px)}.auth-card{padding:clamp(26px,5vw,48px);max-width:480px;width:100%;justify-self:end}.auth-card h2{font-size:2.2rem;margin-bottom:.3rem}.eyebrow{text-transform:uppercase;letter-spacing:.17em;color:var(--gold);font-size:.72rem;font-weight:800;margin-bottom:10px}.form-stack{display:grid;gap:18px;margin-top:26px}label{display:grid;gap:8px;font-weight:700;font-size:.9rem;color:#dce3ec}.label-note{color:var(--muted);font-weight:500;float:right}input,select{width:100%;border:1px solid #364459;border-radius:10px;background:#0b121c;color:var(--text);padding:14px 15px;font:inherit;outline:none}input:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(216,173,82,.14)}.button{appearance:none;border:1px solid transparent;border-radius:10px;padding:12px 18px;font:inherit;font-weight:800;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;line-height:1.1;text-decoration:none}.button:hover{text-decoration:none;filter:brightness(1.07)}.button-primary{background:linear-gradient(135deg,var(--gold2),#bc8936);color:#151006}.button-secondary{background:#202c3b;border-color:#405069;color:var(--text)}.button-ghost{background:transparent;border-color:#344154;color:var(--muted)}.button-danger{background:#3a2026;border-color:#6b343e;color:#ffb5b5}.button-wide{width:100%;padding:15px}.button-small{padding:8px 10px;font-size:.78rem}.auth-footer{text-align:center;margin-top:28px;color:var(--muted)}.fine-print{font-size:.78rem}.narrow-card{width:min(530px,100%);padding:clamp(26px,5vw,48px)}.top-space{margin-top:38px}.centered{text-align:center}.success-icon{margin:0 auto 20px;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:rgba(111,213,167,.12);border:1px solid var(--success);color:var(--success);font-size:1.8rem}.alert{border:1px solid;padding:13px 16px;border-radius:10px;margin:0 0 24px}.alert ul{margin:0;padding-left:20px}.alert-error{border-color:#6c333d;background:#29171c;color:#ffb7bd}.alert-success{border-color:#2d6b53;background:#122b22;color:#a3eccb}.alert-warning{border-color:#6d592c;background:#2b2515;color:#f6d98f}.alert-info{border-color:#34516f;background:#132233}.dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}.dashboard-head h1{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:12px}.badge-row{display:flex;gap:8px}.badge{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px 9px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.badge-approved,.badge-superadmin{color:var(--success);border-color:#285e49;background:#12271f}.badge-admin{color:#a8cfff;border-color:#34577a}.badge-player{color:#d4c8f2;border-color:#534570}.badge-pending{color:var(--warning);border-color:#69582c}.badge-rejected,.badge-inactive{color:#efa1a8;border-color:#6a363c}.head-actions,.table-actions{display:flex;gap:9px;align-items:center}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.feature-card{padding:28px;min-height:220px}.feature-card h2{font-size:1.45rem}.feature-card p:last-child{color:var(--muted)}.feature-icon{display:block;color:var(--gold);font-size:2rem;margin-bottom:28px}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.settings-grid .card{padding:30px}.admin-section{padding:24px;margin-bottom:22px}.section-title{display:flex;align-items:center;gap:12px}.count{border-radius:999px;background:#293546;padding:2px 9px;color:var(--muted);font-weight:800}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:850px}th,td{text-align:left;padding:14px 10px;border-top:1px solid var(--line);vertical-align:middle}th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}td{font-size:.88rem}td small{display:block;color:var(--muted);margin-top:3px}.role-form{display:flex;gap:6px}.role-form select{padding:8px;width:auto}.empty-state{text-align:center;color:var(--muted);padding:35px}
@media(max-width:820px){.auth-layout{grid-template-columns:1fr;gap:20px}.hero-panel{padding:10px}.hero-panel .brand{margin-bottom:45px}.hero-panel h1{font-size:3.3rem}.staff-lines{display:none}.auth-card{justify-self:center}.feature-grid,.settings-grid{grid-template-columns:1fr}.site-header nav a:first-child{display:none}}
@media(max-width:540px){.page-shell{width:min(100% - 22px,1180px);padding-top:25px}.hero-panel h1{font-size:2.7rem}.hero-copy{font-size:1rem}.auth-card,.narrow-card{padding:24px}.dashboard-head{align-items:flex-start;flex-direction:column}.head-actions{width:100%}.head-actions .button,.head-actions form{flex:1}.head-actions form .button{width:100%}.feature-card{min-height:180px;padding:22px}.site-header{height:62px}.site-header nav{gap:12px}.site-header nav a{font-size:.8rem}.brand-small{font-size:.95rem}.brand-small .brand-mark{display:none}}

textarea{width:100%;border:1px solid #364459;border-radius:8px;background:#0b121c;color:var(--text);padding:14px 15px;font:inherit;outline:none;resize:vertical}textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(216,173,82,.14)}
.form-panel,.preview-panel,.tool-panel,.search-form{background:#101925;border:1px solid var(--line);border-radius:8px;padding:24px;margin-bottom:22px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.chart-form{margin-top:0}.chart-editor,.chart-body{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;letter-spacing:0;tab-size:4}.chart-editor{line-height:1.45;white-space:pre;overflow:auto}.choice-divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}.choice-divider:before,.choice-divider:after{content:"";height:1px;background:var(--line);flex:1}.form-actions{display:flex;justify-content:flex-end}.search-form{margin-bottom:24px}.search-form label{margin-bottom:8px}.search-row{display:flex;gap:10px}.chart-list{display:grid;gap:10px}.chart-list-item{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#101925;border:1px solid var(--line);border-radius:8px;padding:18px 20px}.chart-list-item h2{font-size:1.1rem;margin-bottom:4px}.chart-list-item p{margin:0;color:var(--muted)}.chart-list-meta{display:flex;align-items:center;justify-content:flex-end;gap:12px;color:var(--muted);font-size:.84rem}.empty-panel{border:1px dashed #364459;border-radius:8px;padding:50px 24px;text-align:center}.chart-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.chart-heading h1{margin-bottom:8px}.chart-artist{font-size:1.2rem;color:var(--muted);margin-bottom:12px}.chart-key-row{display:flex;gap:20px;color:var(--muted)}.chart-key-row strong{color:var(--gold2)}.stage-panel{background:#05080d;border:1px solid #303b49;border-radius:8px;box-shadow:0 22px 60px rgba(0,0,0,.42);margin-bottom:22px;overflow:hidden}.chart-body{white-space:pre;overflow-x:auto;overflow-y:visible;margin:0;padding:clamp(18px,3vw,34px);line-height:1.55;color:#fffdf5;min-height:300px}.chart-size-small{font-size:.78rem}.chart-size-normal{font-size:.94rem}.chart-size-large{font-size:1.1rem}.chart-size-xl{font-size:1.3rem}.preview-panel .chart-body{background:#05080d;border:1px solid #303b49;border-radius:6px;min-height:180px}.chart-tools-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:20px}.tool-panel{margin:0}.tool-panel h2{font-size:1.35rem}.tool-panel fieldset{border:0;padding:0;margin:0}.tool-panel legend{font-weight:700;font-size:.9rem;margin-bottom:8px}.segmented-control{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #364459;border-radius:8px;overflow:hidden}.segmented-control label{display:block}.segmented-control input{position:absolute;opacity:0;pointer-events:none}.segmented-control span{display:block;padding:10px;text-align:center;background:#0b121c;color:var(--muted);cursor:pointer;border-right:1px solid #364459}.segmented-control label:last-child span{border-right:0}.segmented-control input:checked+span{background:#d8ad52;color:#151006;font-weight:800}.button:disabled{opacity:.45;cursor:not-allowed;filter:none}
@media(max-width:820px){.form-grid,.chart-tools-grid{grid-template-columns:1fr}.chart-list-item,.chart-heading{align-items:flex-start;flex-direction:column}.chart-list-meta{justify-content:flex-start;flex-wrap:wrap}.site-header{height:auto;min-height:72px;padding-top:10px;padding-bottom:10px}.site-header nav{flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:540px){.head-actions{flex-wrap:wrap}.search-row{flex-wrap:wrap}.search-row input{flex-basis:100%}.form-panel,.preview-panel,.tool-panel,.search-form{padding:18px}.chart-body{min-height:240px}.segmented-control span{padding:9px 4px;font-size:.78rem}.chart-key-row{flex-direction:column;gap:4px}}

.chart-body{touch-action:pan-y}
.chart-view-switch{display:flex;gap:10px;flex-wrap:wrap;margin:-8px 0 18px}
.preference-prompt{background:#151f2b;border:1px solid #3b4d63;border-radius:8px;padding:14px 16px;margin-bottom:18px}
.prompt-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#dce3ec;font-weight:700}
.prompt-row select{width:auto;min-width:130px;padding:9px 12px}
.chart-stage{position:relative;touch-action:pan-y}
.chart-pill-body{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;letter-spacing:0;tab-size:4;white-space:pre;overflow-x:auto;overflow-y:visible;margin:0;padding:clamp(18px,3vw,34px);line-height:1.62;color:#fffdf5;min-height:300px;touch-action:pan-y}
.chart-line{min-height:1.62em}
.chart-line-chords{color:#e7d29b}
.chart-line-lyrics{color:#fffdf5}
.chord-edit-controls{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:-6px 0 18px;padding:12px 14px;border:1px solid #303b49;border-radius:8px;background:#0c131d}
.chord-edit-controls.is-chord-editing{border-color:#96713a;background:#15170f;box-shadow:0 0 0 3px rgba(216,173,82,.1)}
.chord-edit-scope{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#dce3ec;font-size:.9rem;font-weight:800}
.chord-scope-segmented{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #364459;border-radius:8px;overflow:hidden}
.chord-scope-segmented button{appearance:none;border:0;border-right:1px solid #364459;background:#0b121c;color:var(--muted);cursor:pointer;font:inherit;font-size:.82rem;font-weight:900;line-height:1.1;padding:9px 12px;min-width:128px}
.chord-scope-segmented button:last-child{border-right:0}
.chord-scope-segmented button.is-selected{background:var(--gold);color:#151006}
.chord-scope-segmented button:focus-visible{outline:3px solid rgba(216,173,82,.28);outline-offset:-3px}
.chord-edit-message{width:100%;margin:0;color:var(--gold2);font-size:.9rem;font-weight:800}
.chord-pill{--pill-scale:1;--chord-x:0px;appearance:none;border:1px solid #8d6a2f;border-radius:6px;background:var(--chord-pill-bg);color:var(--chord-pill-fg);box-shadow:0 5px 16px rgba(0,0,0,.34);display:inline-flex;align-items:center;justify-content:center;margin:0 .06em;padding:.08em .42em;min-height:1.42em;font:inherit;font-size:calc(.82em * var(--pill-scale));font-weight:900;line-height:1.1;cursor:default;position:relative;top:var(--chord-vertical-offset);touch-action:pan-y;user-select:none;vertical-align:baseline;z-index:1;transform:translateX(var(--chord-x,0px))}
.is-chord-editing .chord-pill{cursor:grab;touch-action:none}
.chord-pill:hover{filter:brightness(1.05)}
.chord-pill-dragging{cursor:grabbing;z-index:4;box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 3px rgba(240,195,106,.18)}
.chord-pill-unsaved{outline:2px solid var(--danger)}
.chord-pill-size-small .chord-pill{--pill-scale:.86;padding:.02em .34em}
.chord-pill-size-normal .chord-pill{--pill-scale:1}
.chord-pill-size-large .chord-pill{--pill-scale:1.13;padding:.12em .5em}
.chord-pill-size-xl .chord-pill{--pill-scale:1.28;padding:.16em .58em}
.transpose-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.transpose-grid label{display:block}
.transpose-grid input{position:absolute;opacity:0;pointer-events:none}
.transpose-grid span{display:block;border:1px solid #364459;border-radius:7px;background:#0b121c;color:var(--muted);padding:9px 4px;text-align:center;cursor:pointer;font-weight:800}
.transpose-grid input:checked+span{background:var(--gold);border-color:#c89b43;color:#151006}
.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.color-grid input[type=color],input[type=color]{height:46px;padding:5px}
.split-actions{gap:8px;flex-wrap:wrap}
.inline-reset-form{margin-top:10px}
.inline-reset-form .button{width:100%}
.checkbox-label{display:flex;grid-template-columns:none;align-items:center;gap:10px}
.checkbox-label input{width:auto}
.floating-transpose-control{position:fixed;right:clamp(18px,3vw,34px);bottom:clamp(168px,22vh,190px);z-index:99;display:grid;gap:8px;justify-items:stretch;width:max-content;min-width:108px;margin:0;padding:12px;border:1px solid #45546a;border-radius:12px;background:rgba(10,17,27,.96);box-shadow:0 16px 42px rgba(0,0,0,.5)}
.floating-transpose-label{color:var(--gold);font-size:.78rem;font-weight:900;text-align:center;text-transform:uppercase;letter-spacing:.1em}
.floating-transpose-current{color:#f4f1e9;font-size:.88rem;font-weight:900;text-align:center}
.floating-transpose-button{appearance:none;border:1px solid #c89b43;border-radius:10px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#151006;box-shadow:0 7px 18px rgba(0,0,0,.34);cursor:pointer;font:inherit;font-size:1.38rem;font-weight:950;line-height:1;min-width:76px;min-height:58px;padding:13px 16px}
.floating-transpose-button.is-current{box-shadow:0 0 0 3px rgba(216,173,82,.26),0 7px 18px rgba(0,0,0,.34)}
.floating-scroll-button{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:100;border:1px solid #c89b43;border-radius:999px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#151006;box-shadow:0 22px 56px rgba(0,0,0,.58),0 0 0 4px rgba(216,173,82,.18);min-width:190px;min-height:125px;padding:28px 36px;font:inherit;font-size:2rem;font-weight:950;line-height:1;cursor:pointer}
.floating-scroll-button:hover{filter:brightness(1.06)}
@media(max-width:540px){.chart-body,.chart-pill-body{min-height:240px}.transpose-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.color-grid{grid-template-columns:1fr}.prompt-row select,.prompt-row .button{width:100%}.chord-edit-controls{align-items:stretch;flex-direction:column}.chord-edit-controls>.button{width:100%}.chord-edit-scope{align-items:stretch;flex-direction:column}.chord-scope-segmented button{min-width:0;padding:10px 8px}.floating-transpose-control{right:auto;left:10px;bottom:12px;min-width:96px;padding:10px;gap:7px}.floating-transpose-button{min-width:76px;min-height:56px;font-size:1.32rem}.floating-scroll-button{right:10px;bottom:12px;min-width:160px;min-height:105px;padding:24px 28px;font-size:1.75rem}}

.my-notes-mirror{display:block;border:1px solid #3b4d63;border-radius:8px;background:#111b27;margin:0 0 14px;padding:10px 12px;box-shadow:0 8px 22px rgba(0,0,0,.18)}.my-notes-mirror.is-empty{display:none}.my-notes-mirror-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}.my-notes-mirror-head .eyebrow{margin:0}.my-notes-mirror-head span{color:var(--muted);font-size:.78rem;font-weight:800}.my-notes-mirror-body{white-space:pre-wrap;color:#fff8df;font-size:.95rem;line-height:1.4}.display-helper{margin:-6px 0 0;color:var(--muted);font-size:.82rem}.chart-floating-notes-layer{position:absolute;inset:0;pointer-events:none;z-index:2}.floating-chart-note{position:absolute;display:block;min-width:120px;min-height:70px;border:1px solid rgba(0,0,0,.16);border-radius:8px;background:var(--note-bg,#6ee7b7);color:var(--note-fg,#102018);box-shadow:0 10px 26px rgba(0,0,0,.28);overflow:hidden;pointer-events:auto;touch-action:pan-y}.floating-chart-note.is-note-active{outline:2px solid rgba(255,255,255,.56);outline-offset:2px;box-shadow:0 16px 42px rgba(0,0,0,.42),0 0 0 3px rgba(255,255,255,.12);touch-action:none}.floating-chart-note-unsaved{outline:2px solid var(--danger);outline-offset:2px}.floating-chart-note-saving{filter:saturate(.9)}.floating-chart-note-moving,.floating-chart-note-resizing{cursor:grabbing;box-shadow:0 18px 48px rgba(0,0,0,.52),0 0 0 3px rgba(255,255,255,.22)}.floating-chart-note-delete{appearance:none;position:absolute;right:6px;top:6px;display:none;width:24px;height:24px;border:1px solid rgba(16,32,24,.28);border-radius:999px;background:rgba(255,255,255,.36);color:inherit;cursor:pointer;font:inherit;font-size:.78rem;font-weight:950;line-height:1;padding:0}.floating-chart-note.is-note-active .floating-chart-note-delete{display:grid;place-items:center}.floating-chart-note-body{width:100%;height:100%;min-height:0;border:0;border-radius:0;background:transparent;color:inherit;box-shadow:none;outline:none;resize:none;padding:12px 14px;font:inherit;font-size:.95rem;font-weight:750;line-height:1.35;white-space:pre-wrap;overflow:hidden;touch-action:inherit}.floating-chart-note.is-note-active .floating-chart-note-body{padding-right:36px;overflow:auto}.floating-chart-note-body[readonly]{cursor:default;user-select:none}.floating-chart-note.is-note-active .floating-chart-note-body[readonly]{user-select:text}.floating-chart-note-body:focus{border:0;box-shadow:none}.floating-chart-note.is-note-active .floating-chart-note-body:focus{box-shadow:inset 0 0 0 2px rgba(16,32,24,.18)}.floating-chart-note-resize{position:absolute;right:0;bottom:0;display:none;width:28px;height:28px;border:0;background:linear-gradient(135deg,transparent 0 46%,rgba(16,32,24,.34) 47% 58%,transparent 59% 66%,rgba(16,32,24,.34) 67% 78%,transparent 79%);cursor:nwse-resize;touch-action:none}.floating-chart-note.is-note-active .floating-chart-note-resize{display:block}.floating-add-note-button{position:fixed;right:clamp(18px,3vw,34px);bottom:clamp(310px,39vh,340px);z-index:101;border:1px solid #47c89a;border-radius:999px;background:linear-gradient(135deg,#8ff7d1,#4fd0a2);color:#102018;box-shadow:0 16px 42px rgba(0,0,0,.45),0 0 0 4px rgba(110,231,183,.16);min-width:104px;min-height:58px;padding:14px 22px;font:inherit;font-size:1.05rem;font-weight:950;line-height:1;cursor:pointer}.floating-add-note-button:hover{filter:brightness(1.05)}
@media(max-width:540px){.my-notes-mirror{padding:14px}.my-notes-mirror-head{align-items:flex-start;flex-direction:column;gap:4px}.floating-add-note-button{right:10px;bottom:128px;min-width:94px;min-height:52px;padding:12px 16px;font-size:.95rem}.floating-chart-note-body{font-size:.9rem}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header{gap:18px}.site-header-search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;margin:0}.site-header-search input{height:42px;border-radius:999px;padding:10px 15px;background:#0b121c;border-color:#344154}.site-header-search button{appearance:none;border:1px solid #c89b43;border-radius:999px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#151006;cursor:pointer;font:inherit;font-size:.86rem;font-weight:900;line-height:1;padding:11px 15px}.chart-tag-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:10px}.chart-tag{display:inline-flex;align-items:center;min-height:26px;border:1px solid #4a5a70;border-radius:999px;background:#111b27;color:#dce3ec;font-size:.78rem;font-weight:850;line-height:1;padding:5px 10px}.chart-tag:hover{border-color:var(--gold);color:var(--gold2);text-decoration:none}.floating-add-note-button{right:calc(clamp(16px,3vw,32px) + 210px);bottom:clamp(28px,4vw,42px);z-index:100;min-width:112px;min-height:54px;padding:13px 20px}.floating-add-note-button:hover{filter:brightness(1.05)}
@media(max-width:820px){.site-header{display:grid;grid-template-columns:auto 1fr;align-items:center}.site-header-search{grid-column:1/-1;max-width:none;order:3}.site-header nav{justify-content:flex-end}}
@media(max-width:540px){.site-header{grid-template-columns:1fr}.site-header-search{width:100%;gap:6px}.site-header-search input{min-width:0;height:40px}.site-header-search button{padding:10px 12px}.floating-add-note-button{left:50%;right:auto;bottom:128px;transform:translateX(-50%);min-width:104px;min-height:50px;padding:12px 16px;font-size:.95rem}}
.my-notes-mirror{display:block;margin:0 0 14px;padding:10px 12px;border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.18)}.my-notes-mirror.is-empty{display:none}.my-notes-mirror-head{margin-bottom:4px}.my-notes-mirror-body{white-space:pre-wrap;font-size:.95rem;line-height:1.4}.floating-chart-note-handle{position:absolute;left:0;right:0;top:0;z-index:2;display:none;align-items:center;justify-content:center;min-height:34px;padding:7px 36px 7px 12px;background:rgba(255,255,255,.24);color:inherit;cursor:grab;font-size:.74rem;font-weight:950;line-height:1;text-transform:uppercase;letter-spacing:.08em;touch-action:none;user-select:none}.floating-chart-note.is-note-active .floating-chart-note-handle{display:flex}.floating-chart-note-moving .floating-chart-note-handle{cursor:grabbing}.floating-chart-note.is-note-active .floating-chart-note-body{padding-top:44px}.floating-chart-note.is-note-active .floating-chart-note-delete{z-index:3}
.floating-transpose-control{right:clamp(18px,3vw,34px);bottom:clamp(168px,22vh,190px);min-width:112px;justify-items:stretch}
.floating-transpose-button{display:grid;place-items:center;text-align:center;width:84px;height:58px;min-width:84px;min-height:58px;padding:0;font-variant-numeric:tabular-nums}
.floating-transpose-button-label{display:grid;grid-template-columns:.65em 1ch;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;line-height:1}.transpose-sign{text-align:right}.transpose-digit{text-align:left;font-variant-numeric:tabular-nums}
.floating-add-note-button{right:clamp(18px,3vw,34px);bottom:clamp(444px,calc(22vh + 276px),466px);transform:none;z-index:101;min-width:112px;min-height:54px;padding:13px 20px}
@media(max-width:540px){.floating-transpose-control{right:auto;left:10px;bottom:12px;min-width:104px}.floating-transpose-button{width:78px;height:56px;min-width:78px;min-height:56px;padding:0}.floating-add-note-button{left:10px;right:auto;bottom:280px;transform:none;min-width:104px;min-height:50px;padding:12px 16px;font-size:.95rem}}
.chart-floating-dock{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:5000;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.chart-floating-dock>*{pointer-events:auto}
.chart-floating-dock .floating-add-note-button,.chart-floating-dock .floating-transpose-control,.chart-floating-dock .floating-scroll-button{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;margin:0}
.chart-floating-dock .floating-add-note-button{z-index:auto;min-width:112px;min-height:54px;padding:13px 20px}
.chart-floating-dock .floating-transpose-control{z-index:auto;min-width:112px}
.chart-floating-dock .floating-scroll-button{z-index:auto;min-width:190px;min-height:125px}
@media(max-width:900px),(max-height:800px){.chart-floating-dock{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));gap:11px}.chart-floating-dock .floating-scroll-button{min-width:170px;min-height:110px;padding:24px 32px;font-size:1.75rem}.chart-floating-dock .floating-transpose-control{padding:10px;gap:7px}.chart-floating-dock .floating-transpose-button{width:78px;height:54px;min-width:78px;min-height:54px;font-size:1.25rem}.chart-floating-dock .floating-add-note-button{min-width:104px;min-height:50px;padding:12px 16px;font-size:.98rem}}
@media(max-width:540px){.chart-floating-dock{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));gap:9px}.chart-floating-dock .floating-scroll-button{min-width:140px;min-height:90px;padding:20px 24px;font-size:1.45rem}.chart-floating-dock .floating-transpose-button{width:72px;height:48px;min-width:72px;min-height:48px;font-size:1.12rem}.chart-floating-dock .floating-add-note-button{min-width:96px;min-height:46px;padding:11px 14px;font-size:.9rem}}
.global-chart-search{position:relative}.global-chart-search-input{flex:1;min-width:0}.global-chart-search-suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:6000;display:grid;gap:4px;max-height:min(420px,calc(100vh - 120px));overflow:auto;padding:8px;border:1px solid #43536a;border-radius:12px;background:#0b121c;box-shadow:0 24px 70px rgba(0,0,0,.56)}.global-chart-search-suggestions[hidden]{display:none}.global-chart-search-suggestion{appearance:none;display:grid;gap:4px;width:100%;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font:inherit;line-height:1.25;padding:10px 11px;text-align:left}.global-chart-search-suggestion:hover,.global-chart-search-suggestion.is-active{border-color:#806536;background:#172132;box-shadow:inset 3px 0 0 var(--gold)}.global-chart-search-suggestion-main{display:flex;align-items:center;justify-content:space-between;gap:10px}.global-chart-search-suggestion-title{font-weight:900}.global-chart-search-suggestion-badge{flex:none;border:1px solid #5b6d83;border-radius:999px;color:var(--gold2);font-size:.68rem;font-weight:950;line-height:1;padding:4px 7px;text-transform:uppercase;letter-spacing:.08em}.global-chart-search-suggestion-meta,.global-chart-search-empty{color:var(--muted);font-size:.8rem}.global-chart-search-empty{padding:11px}
@media(max-width:540px){.global-chart-search-suggestions{top:calc(100% + 6px);max-height:min(360px,calc(100vh - 145px));border-radius:10px}.global-chart-search-suggestion-main{align-items:flex-start;flex-direction:column;gap:5px}.global-chart-search-suggestion{padding:11px 10px}}
.global-chart-search-suggestion{border:1px solid rgba(0,0,0,.18);border-radius:12px;background:#fff;color:#000;box-shadow:0 1px 0 rgba(255,255,255,.25);font-weight:800}.global-chart-search-suggestion:hover,.global-chart-search-suggestion:focus-visible,.global-chart-search-suggestion.is-active{border-color:rgba(0,0,0,.42);background:#f2f3f5;color:#000;box-shadow:0 0 0 3px rgba(255,255,255,.18)}.global-chart-search-suggestion-title{color:#000;font-weight:950}.global-chart-search-suggestion-meta{color:#30343a;font-weight:700}.global-chart-search-suggestion-badge{border-color:rgba(0,0,0,.36);background:#f8f9fb;color:#111}.global-chart-search-empty{color:#d8dee8}
html,body{max-width:100%;overflow-x:hidden}.page-shell{max-width:100vw;overflow-x:hidden}.chart-page{overflow-x:hidden}.chart-page .page-shell{width:min(1180px,calc(100vw - 32px));max-width:100vw;overflow-x:hidden}.chart-page .stage-panel,.chart-page .chart-stage{max-width:100%;overflow:hidden}.chart-page .chart-body,.chart-page .chart-pill-body{max-width:100%;overflow-x:hidden;overflow-y:visible;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;padding-right:max(clamp(18px,3vw,34px),190px)}.chart-page .chart-line{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}.chart-page .chart-floating-notes-layer{max-width:100%;overflow:visible}.chart-floating-dock{max-width:calc(100vw - 20px)}@media(max-width:900px){.chart-page .chart-body,.chart-page .chart-pill-body{padding-right:max(clamp(18px,3vw,34px),170px)}}@media(max-width:540px){.chart-page .page-shell{width:min(100% - 22px,1180px)}.chart-page .chart-body,.chart-page .chart-pill-body{padding-right:max(18px,128px)}}
