:root{--mth-pink:#ff007f;--mth-mint:#92e0b9;--mth-charcoal:#161b22;--mth-pink-hover:#e00070;--mth-pink-press:#c60063;--canvas-cream:#fffaf0;--surface-white:#fff;--text-body:#333;--grey-500:#5f6672;--grey-300:#d5d2ca;--grey-100:#f1ede3;--tier-mild:#92e0b9;--tier-warm:#f5a623;--tier-spicy:#ff007f;--font-brand:"Lato", "Segoe UI", system-ui, -apple-system, sans-serif;--text-display:2.5rem;--text-h1:2rem;--text-h2:1.5rem;--text-h3:1.25rem;--text-body-size:1rem;--text-small:.875rem;--line-height-body:1.5;--line-height-heading:1.25;--radius-card:16px;--radius-cell:8px;--radius-input:10px;--radius-pill:999px;--shadow-card:0 2px 8px #161b2214;--shadow-raised:0 4px 16px #161b221f;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--target-min:48px;--target-comfort:44px;--instrument-aside:9.5rem;--target-transport:56px;--header-height:72px;--transport-height:80px;--line-step:var(--grey-300);--line-beat:#b3ada0;--line-bar:#4a5058;--motion-quick:.15s;--motion-calm:.25s;--ease-out:cubic-bezier(.22, .61, .36, 1)}@media (prefers-reduced-motion:reduce){:root{--motion-quick:1ms;--motion-calm:1ms}}:root{--role-melody:#ff007f;--role-melody-strong:#d10068;--role-bass:#7b61ff;--role-bass-strong:#6647ff;--role-chords:#2fb8a6;--role-chords-strong:#1e776b;--role-drums:#f5a623;--role-drums-strong:#945f07;--role-loops:#b88a1a;--role-loops-strong:#876513;--role-effects:#4a90d9;--role-effects-strong:#266cb5;--note-c:#e0312b;--note-c-sharp:#ec6a2c;--note-d:#f39a2b;--note-d-sharp:#f7c22e;--note-e:#f2e035;--note-f:#a6cf3a;--note-f-sharp:#3fae49;--note-g:#1f9e8f;--note-g-sharp:#2f7fc1;--note-a:#5b4ea8;--note-a-sharp:#8e44ad;--note-b:#c53a8c}@font-face{font-family:Lato;src:url(/assets/lato-400-DXRmO6t1.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Lato;src:url(/assets/lato-700-D0hIvJyG.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}*,:before,:after{box-sizing:border-box}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:var(--canvas-cream)}body{background:var(--canvas-cream);min-height:100vh;color:var(--text-body);font-family:var(--font-brand);font-size:var(--text-body-size);line-height:var(--line-height-body);margin:0}h1,h2,h3{color:var(--mth-charcoal);line-height:var(--line-height-heading)}img{max-width:100%;height:auto}:focus-visible{outline:3px solid var(--mth-charcoal);outline-offset:3px}.skip-link{top:var(--space-2);left:var(--space-2);z-index:10;min-height:var(--target-min);padding:0 var(--space-4);border-radius:var(--radius-input);background:var(--surface-white);color:var(--mth-charcoal);transform:translateY(calc(-100% - var(--space-4)));align-items:center;font-weight:700;display:inline-flex;position:absolute}.skip-link:focus{transform:none}main:focus{outline:none}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.status-page{min-height:100vh;font-size:var(--text-h3);place-items:center;margin:0;display:grid}.error-page{max-width:40rem;min-height:100vh;padding:0 var(--space-4);align-content:center;gap:var(--space-4);margin:0 auto;display:grid}.error-actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.card{padding:var(--space-5);border-radius:var(--radius-card);background:var(--surface-white);box-shadow:var(--shadow-card)}.card h2{margin:0 0 var(--space-3);font-size:var(--text-h2)}.button{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--target-min);padding:0 var(--space-5);border:2px solid var(--mth-charcoal);border-radius:var(--radius-pill);background:var(--mth-charcoal);color:var(--canvas-cream);font:inherit;cursor:pointer;transition:background-color var(--motion-quick) var(--ease-out);font-weight:700;text-decoration:none;display:inline-flex}.button:hover{background:var(--text-body)}.button:disabled{cursor:not-allowed;opacity:.5}.button .icon{flex:none}.button-quiet{background:var(--surface-white);color:var(--mth-charcoal)}.button-quiet:hover{background:var(--grey-100)}.button-quiet[aria-pressed=true]{background:var(--mth-charcoal);color:var(--canvas-cream)}.button-icon{width:var(--target-min);padding:0}.library{gap:var(--space-5);width:100%;max-width:48rem;padding:var(--space-6) var(--space-4);margin:0 auto;display:grid}.library-header{justify-items:start;gap:var(--space-3);display:grid}.library-header h1{font-size:var(--text-display);margin:0}.library-header p{font-size:var(--text-h3);margin:0}.brand-logo{width:auto;height:var(--space-7)}.project-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.project-row{align-items:center;gap:var(--space-2);padding:var(--space-2) 0;border-top:1px solid var(--grey-300);flex-wrap:wrap;display:flex}.project-link,.project-name{min-height:var(--target-min);color:var(--mth-charcoal);font-size:var(--text-h3);flex:12rem;align-items:center;font-weight:700;display:inline-flex}.problems{padding:var(--space-3) var(--space-4);border-left:var(--space-1) solid var(--mth-pink);border-radius:var(--radius-cell);background:var(--surface-white)}.problems p,.problems ul{margin:0}.project{--target-min:32px;--target-transport:40px;--text-h1:1.25rem;--text-h2:1rem;--text-h3:.9375rem;--text-body-size:.875rem;--text-small:.8125rem;--space-2:6px;--space-3:8px;--space-4:10px;--space-5:12px;--space-6:16px;--space-7:24px;--space-8:32px;--radius-card:10px;--radius-cell:4px;--radius-input:6px;gap:var(--space-4);padding:var(--space-4);font-size:var(--text-body-size);display:grid}.project-header,.transport{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.project-name-field{flex:16rem}.project-name,.sound-search .input,.sound-style select,.key-chooser select,.effect-add select,.automation-tools select,.field input,.field textarea{min-height:var(--target-min);padding:0 var(--space-3);border:2px solid var(--grey-500);border-radius:var(--radius-input);background:var(--surface-white);color:var(--mth-charcoal);font:inherit}.project-name{width:100%;font-size:var(--text-h2);font-weight:700}.saved{color:var(--grey-500);margin:0}.export{align-items:center;gap:var(--space-2);display:flex}.saved-failed{color:var(--mth-charcoal);font-weight:700}.transport{z-index:10;padding:var(--space-3) var(--space-4);border-radius:var(--radius-card);background:var(--grey-100);box-shadow:0 2px 0 var(--grey-300);position:sticky;top:0}.transport-play{min-width:calc(var(--target-transport) * 2.5);min-height:var(--target-transport)}.tempo{align-items:center;gap:var(--space-2);display:inline-flex}.song-settings{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.swing>span{font-size:var(--text-small)}.swing-value{text-align:center;min-width:3.5rem;font-weight:700}.tempo-value{text-align:center;min-width:6rem;font-weight:700}.project-main{gap:var(--space-4);display:grid}.notice{min-height:var(--line-height-body);margin:0;font-weight:700}.workspace{gap:var(--space-4);grid-template-columns:minmax(14rem,18rem) minmax(0,1fr);align-items:start;display:grid}@media (width<=52rem){.workspace{grid-template-columns:minmax(0,1fr)}}.track-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.chips{gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.chip{min-height:var(--target-min);padding:0 var(--space-4);border:2px solid var(--grey-500);border-radius:var(--radius-pill);background:var(--surface-white);color:var(--mth-charcoal);font:inherit;cursor:pointer}.chip[aria-pressed=true]{border-color:var(--mth-charcoal);background:var(--mth-charcoal);color:var(--canvas-cream);font-weight:700}.tracks[data-drop-active],.track[data-drop-active]{border-radius:var(--radius-card);outline:3px dashed var(--mth-charcoal);outline-offset:var(--space-2)}.tracks h2{font-size:var(--text-h2);margin:0}.track,.song-row,.mix-row,.mix-effects{--role:var(--grey-300);--role-strong:var(--mth-charcoal)}.track[data-role=melody],.song-row[data-role=melody],.mix-row[data-role=melody],.mix-effects[data-role=melody]{--role:var(--role-melody);--role-strong:var(--role-melody-strong)}.track[data-role=bass],.song-row[data-role=bass],.mix-row[data-role=bass],.mix-effects[data-role=bass]{--role:var(--role-bass);--role-strong:var(--role-bass-strong)}.track[data-role=chords],.song-row[data-role=chords],.mix-row[data-role=chords],.mix-effects[data-role=chords]{--role:var(--role-chords);--role-strong:var(--role-chords-strong)}.track[data-role=drums],.song-row[data-role=drums],.mix-row[data-role=drums],.mix-effects[data-role=drums]{--role:var(--role-drums);--role-strong:var(--role-drums-strong)}.track[data-role=loops],.song-row[data-role=loops],.mix-row[data-role=loops],.mix-effects[data-role=loops]{--role:var(--role-loops);--role-strong:var(--role-loops-strong)}.track[data-role=effects],.song-row[data-role=effects],.mix-row[data-role=effects],.mix-effects[data-role=effects]{--role:var(--role-effects);--role-strong:var(--role-effects-strong)}.track{padding:var(--space-2) var(--space-3);border-left:var(--space-2) solid var(--role);border-radius:var(--radius-card);background:var(--surface-white);box-shadow:var(--shadow-card)}.track-header{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.track-body{gap:var(--space-2);margin-top:var(--space-2);display:grid}.tracks-header{margin-bottom:var(--space-2)}.tracks-header,.song-header{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.song-header h2{flex:auto}.fold-mark{border-top:5px solid;border-left:5px solid #0000;border-right:5px solid #0000;width:0;height:0;transition:transform .12s}.fold-button[aria-expanded=false] .fold-mark{transform:rotate(-90deg)}@media (prefers-reduced-motion:reduce){.fold-mark{transition:none}}.track-header h3{font-size:var(--text-h3);flex:auto;margin:0}.step-grid{gap:var(--space-2);padding:var(--space-1);display:grid;overflow-x:auto}.step-row{align-items:center;gap:var(--space-3);display:flex}.step-sound{flex:0 0 9rem;font-weight:700}.step-cells{gap:var(--space-1);display:flex}.step{width:var(--target-min);height:var(--target-min);border:2px solid var(--grey-500);border-radius:var(--radius-cell);background:var(--surface-white);cursor:pointer;flex:none}.step[data-beat-start]{margin-left:var(--space-2)}.step[data-beat-start]:first-child{margin-left:0}.step[aria-pressed=true]{border-color:var(--mth-charcoal);background:var(--mth-charcoal)}.step[aria-disabled=true]{cursor:default}.task h3{margin:0 0 var(--space-2);font-size:var(--text-h3)}.task p{margin:0}.step[data-current]{box-shadow:0 0 0 3px var(--mth-pink)}.palette{gap:var(--space-4);align-content:start;display:grid}@media (width>=52rem){.palette{top:calc(var(--target-transport) + var(--space-6));position:sticky}}.sounds{gap:var(--space-2);display:grid}.sounds h2,.sounds .chips{margin:0}.sound-search .input{width:100%}.sound-style{align-items:center;gap:var(--space-2);display:flex}.sound-style select{flex:1}.sound-list{border:1px solid var(--grey-300);border-radius:var(--radius-cell);min-height:12rem;max-height:calc(100vh - 19rem);margin:0;padding:0;list-style:none;overflow-y:auto}.sound{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-bottom:1px solid var(--grey-300);border-left:var(--space-1) solid var(--role-loops);background:var(--surface-white);grid-template-columns:minmax(0,1fr) auto auto;display:grid}.sound:last-child{border-bottom:0}.sound-pattern,.sound-effect{cursor:grab}.sound-effect{grid-template-columns:minmax(0,1fr) auto}.sound-instrument{border-left-color:var(--role-melody);grid-template-columns:minmax(0,1fr) auto}.sound-text{min-width:0;display:grid}.sound-name{text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.sound-details{color:var(--grey-500);font-size:var(--text-small);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sound-near{color:var(--mth-charcoal);font-weight:700}.sound-none{color:var(--grey-500);margin:0}.piano-roll{--note-fill:var(--role-strong);--note-outline:var(--role-strong);gap:var(--space-2);display:grid}.piano-roll-tools{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.piano-roll-tools .chips{margin:0}.grid-help{color:var(--grey-500);font-size:var(--text-small);margin:0}.piano-roll-grid{max-height:calc(var(--target-min) * 18);overscroll-behavior:contain;border:1px solid var(--grey-500);border-radius:var(--radius-cell);position:relative;overflow:auto}.piano-row{width:max-content;display:flex}.piano-row[data-octave-start]{border-bottom:2px solid var(--grey-500)}.piano-key{z-index:1;width:4.5rem;height:var(--target-min);padding:0 var(--space-2);border:0;border-right:2px solid var(--grey-500);border-bottom:1px solid var(--grey-300);background:var(--surface-white);color:var(--mth-charcoal);font:inherit;font-size:var(--text-small);text-align:right;cursor:pointer;flex:none;position:sticky;left:0}.piano-key[data-black]{background:var(--mth-charcoal);color:var(--canvas-cream)}.piano-key[data-held],.piano-key:active{background:var(--grey-300);color:var(--mth-charcoal)}.piano-cells{display:flex}.piano-cell,.song-square,.song-ruler-square,.lane-square{width:var(--target-min);height:var(--target-min);border:0;border-right:1px solid var(--grey-300);border-bottom:1px solid var(--grey-300);background:var(--surface-white);flex:none}.piano-cell{cursor:pointer}.piano-cell[data-beat-start]{border-left:1px solid var(--grey-500)}.piano-cell[aria-pressed=true]{background:var(--note-fill)}.piano-cell[data-note=start],.piano-cell[data-note=only]{border-left:3px solid var(--surface-white);border-radius:var(--radius-cell) 0 0 var(--radius-cell)}.piano-cell[data-note=end]{border-radius:0 var(--radius-cell) var(--radius-cell) 0}.piano-cell[data-note=only]{border-radius:var(--radius-cell)}.piano-cell[aria-disabled=true]{cursor:default}.piano-cell[data-loudness=medium]{background:color-mix(in srgb, var(--note-fill) 60%, var(--surface-white));box-shadow:inset 0 0 0 2px var(--note-outline)}.piano-cell[data-loudness=soft]{background:color-mix(in srgb, var(--note-fill) 25%, var(--surface-white));box-shadow:inset 0 0 0 2px var(--note-outline)}.piano-row[data-out-of-key] .piano-cell:not([aria-pressed=true]){background:var(--grey-100)}.piano-row[data-in-key] .piano-key{box-shadow:inset 6px 0 0 var(--mth-pink)}.piano-roll[data-coloured] .piano-cell[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--mth-charcoal)}.piano-roll[data-coloured] .piano-row{--note-outline:var(--mth-charcoal)}.piano-roll[data-coloured] .piano-row[data-pc="0"]{--note-fill:var(--note-c)}.piano-roll[data-coloured] .piano-row[data-pc="1"]{--note-fill:var(--note-c-sharp)}.piano-roll[data-coloured] .piano-row[data-pc="2"]{--note-fill:var(--note-d)}.piano-roll[data-coloured] .piano-row[data-pc="3"]{--note-fill:var(--note-d-sharp)}.piano-roll[data-coloured] .piano-row[data-pc="4"]{--note-fill:var(--note-e)}.piano-roll[data-coloured] .piano-row[data-pc="5"]{--note-fill:var(--note-f)}.piano-roll[data-coloured] .piano-row[data-pc="6"]{--note-fill:var(--note-f-sharp)}.piano-roll[data-coloured] .piano-row[data-pc="7"]{--note-fill:var(--note-g)}.piano-roll[data-coloured] .piano-row[data-pc="8"]{--note-fill:var(--note-g-sharp)}.piano-roll[data-coloured] .piano-row[data-pc="9"]{--note-fill:var(--note-a)}.piano-roll[data-coloured] .piano-row[data-pc="10"]{--note-fill:var(--note-a-sharp)}.piano-roll[data-coloured] .piano-row[data-pc="11"]{--note-fill:var(--note-b)}.piano-roll[data-coloured] .piano-key{border-left:6px solid var(--note-fill)}.key-chooser{align-items:center;gap:var(--space-2);display:inline-flex}.transport .level{margin:0}.piano-roll .piano-cell[data-chosen][aria-pressed=true]{box-shadow:inset 0 0 0 4px var(--mth-charcoal)}.piano-cells .piano-cell[data-preview],.song-squares .song-square[data-preview]{--band:color-mix(in srgb, var(--role) 55%, var(--surface-white));background:linear-gradient(to bottom, var(--role-strong) 3px, var(--band) 3px, var(--band) calc(100% - 3px), var(--role-strong) calc(100% - 3px));border-left-color:#0000;border-right-color:#0000}.song-ruler-square[data-in-loop],.song-ruler-square[data-preview]{--band:color-mix(in srgb, var(--mth-pink) 14%, var(--surface-white));background:linear-gradient(to top, var(--mth-pink) 4px, var(--band) 4px);color:var(--mth-charcoal);border-right-color:#0000}.song-ruler[data-loop-preview] .song-ruler-square[data-in-loop]:not([data-preview]){border-right-color:var(--grey-300);background:var(--surface-white);color:var(--grey-500)}.song-ruler-square[data-preview]{--band:color-mix(in srgb, var(--mth-pink) 26%, var(--surface-white))}.song-ruler-square[data-in-loop]:not([data-band-start]),.song-ruler-square[data-preview]:not([data-band-start]){border-left-color:#0000}.song-ruler-square[data-band-start]{border-top-left-radius:var(--radius-cell);border-bottom-left-radius:var(--radius-cell)}.song-ruler-square[data-band-end]{border-top-right-radius:var(--radius-cell);border-bottom-right-radius:var(--radius-cell)}@media (prefers-reduced-motion:no-preference){.song-ruler-square,.song-square{transition:background-color 90ms}}.piano-rows{position:relative}.piano-playhead{top:0;bottom:0;left:calc(4.5rem + var(--target-min) * var(--step,0));width:var(--target-min);border-right:3px solid var(--mth-pink);border-left:3px solid var(--mth-pink);background:color-mix(in srgb, var(--mth-pink) 10%, transparent);pointer-events:none;position:absolute}.song{z-index:9;gap:var(--space-2);overscroll-behavior:contain;max-height:45vh;box-shadow:0 -2px 0 var(--grey-300), var(--shadow-raised);display:grid;position:sticky;bottom:0;overflow-y:auto}.song h2{font-size:var(--text-h2);margin:0}.song-tools,.song-loop,.song-clip-tools{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.song-tools .chips{margin:0}.song-loop output{text-align:center;min-width:10rem;font-weight:700}.song-grid,.piano-roll-grid,.step-grid{-webkit-user-select:none;user-select:none}.song-grid{border:1px solid var(--grey-500);border-radius:var(--radius-cell);overflow-x:auto}.song-row{width:max-content;display:flex}.song-track{z-index:1;width:9rem;padding:0 var(--space-2);border-right:2px solid var(--grey-500);background:var(--surface-white);font-weight:700;line-height:var(--target-min);text-overflow:ellipsis;white-space:nowrap;flex:none;position:sticky;left:0;overflow:hidden}.song-squares{display:flex}.song-square{cursor:pointer}.song-square[data-bar-start],.song-ruler-square[data-bar-start]{border-left:1px solid var(--grey-500)}.song-ruler-square{cursor:ew-resize;color:var(--grey-500);font-size:var(--text-small);line-height:var(--target-min);text-align:center}.song-square[aria-pressed=true]{background:var(--role-strong)}.song-square[data-clip=start],.song-square[data-clip=only]{border-left:3px solid var(--surface-white);border-radius:var(--radius-cell) 0 0 var(--radius-cell)}.song-square[data-clip=end]{border-radius:0 var(--radius-cell) var(--radius-cell) 0}.song-square[data-clip=only]{border-radius:var(--radius-cell)}.song-square[data-chosen][aria-pressed=true]{box-shadow:inset 0 0 0 4px var(--mth-charcoal)}.song-square[aria-disabled=true]{cursor:default}.song-square[aria-pressed=true]:not([aria-disabled=true]),.piano-cell[aria-pressed=true]:not([aria-disabled=true]){cursor:grab;position:relative}.song-square[data-clip=start]:not([aria-disabled=true]):before,.song-square[data-clip=only]:not([aria-disabled=true]):before,.song-square[data-clip=end]:not([aria-disabled=true]):after,.song-square[data-clip=only]:not([aria-disabled=true]):after,.piano-cell[data-note=end]:not([aria-disabled=true]):after,.piano-cell[data-note=only]:not([aria-disabled=true]):after{background:linear-gradient(to right, transparent calc(50% - 1px), color-mix(in srgb, var(--surface-white) 85%, transparent) calc(50% - 1px), color-mix(in srgb, var(--surface-white) 85%, transparent) calc(50% + 1px), transparent calc(50% + 1px));cursor:ew-resize;content:"";width:min(10px,33%);position:absolute;top:25%;bottom:25%}.song-square[data-clip=start]:before,.song-square[data-clip=only]:before{left:0}.song-square[data-clip=end]:after,.song-square[data-clip=only]:after,.piano-cell[data-note=end]:after,.piano-cell[data-note=only]:after{right:0}.song-square[data-current],.song-ruler-square[data-current]{box-shadow:inset 0 0 0 3px var(--mth-pink)}.piano-roll .piano-cell[data-chosen][data-current][aria-pressed=true],.song-square[data-chosen][data-current][aria-pressed=true]{box-shadow:inset 0 0 0 4px var(--mth-charcoal), inset 0 0 0 7px var(--mth-pink)}.mix{gap:var(--space-2);display:grid}.mix h2{font-size:var(--text-h2);margin:0}.mix-rows{gap:var(--space-1);display:grid}.mix-row{align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-1) 0;border-bottom:1px solid var(--grey-300);flex-wrap:wrap;display:flex}.mix-main{font-weight:700}.mix-name{border-left:var(--space-1) solid var(--role);width:9rem;padding-left:var(--space-2);text-overflow:ellipsis;white-space:nowrap;flex:none;overflow:hidden}.mix-main .mix-name{border-left-color:var(--mth-charcoal)}.fader{align-items:center;gap:var(--space-2);display:flex}.fader input{width:8rem;min-height:var(--target-min);accent-color:var(--role-strong,var(--mth-charcoal));cursor:pointer}.fader-word{min-width:4rem;font-size:var(--text-small);font-weight:700}.fader-note{font-size:var(--text-small);font-style:italic}.fader-end{color:var(--grey-500);font-size:var(--text-small)}.fader output{min-width:4.5rem;color:var(--grey-500);font-size:var(--text-small)}.mix .chip:disabled,.fader input:disabled{cursor:not-allowed}.meter{gap:2px;display:flex}.meter-segment{width:6px;height:var(--space-4);background:var(--grey-100);box-shadow:inset 0 0 0 1px var(--grey-300);border-radius:1px}.meter-segment[data-on]{background:var(--role-strong,var(--mth-charcoal));box-shadow:none}.meter-segment[data-on]:nth-child(n+11){background:var(--mth-pink)}.mix-effects{margin:0 0 var(--space-2) var(--space-4);padding:var(--space-2) 0 var(--space-2) var(--space-4);border-left:var(--space-1) solid var(--role)}.effects,.effect-list{gap:var(--space-3);display:grid}.effect-list{margin:0;padding:0;list-style:none}.effect{gap:var(--space-2);padding:var(--space-3);border:1px solid var(--grey-300);border-radius:var(--radius-cell);background:var(--surface-white);display:grid}.effect[data-off]{background:var(--grey-100);border-style:dashed}.effect-head,.effect-settings,.effect-add{align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.effect-head h3{font-size:var(--text-body-size);margin:0 auto 0 0}.effect-settings .chips{margin:0}.effect-add .grid-help{flex-basis:100%}.lane-row{border-top:1px dashed var(--grey-300)}.lane-name{justify-content:space-between;align-items:center;gap:var(--space-1);font-weight:400;display:flex}.lane-name>span{font-size:var(--text-small);white-space:normal;line-height:1.2;overflow:hidden}.lane-square{--lane-fill:0px;cursor:pointer;box-shadow:inset 0 calc(-1 * var(--lane-fill)) 0 var(--role-strong)}.lane-square[data-set]{box-shadow:inset 0 calc(-1 * var(--lane-fill)) 0 var(--role-strong), inset 0 calc(-1 * var(--lane-fill) - 4px) 0 var(--mth-charcoal)}.lane-square[data-level="0"]{--lane-fill:0px}.lane-square[data-level="1"]{--lane-fill:4px}.lane-square[data-level="2"]{--lane-fill:9px}.lane-square[data-level="3"]{--lane-fill:13px}.lane-square[data-level="4"]{--lane-fill:18px}.lane-square[data-level="5"]{--lane-fill:22px}.lane-square[data-level="6"]{--lane-fill:26px}.lane-square[data-level="7"]{--lane-fill:31px}.lane-square[data-level="8"]{--lane-fill:35px}.lane-square[data-level="9"]{--lane-fill:40px}.lane-square[data-level="10"]{--lane-fill:44px}.lane-square[data-bar-start]{border-left:1px solid var(--grey-500)}.lane-square[data-current]{background:var(--grey-100)}.lane-square[data-chosen]{outline:3px solid var(--mth-charcoal);outline-offset:-3px}.automation{gap:var(--space-2);display:grid}.automation h3{font-size:var(--text-body-size);margin:0}.automation-tools{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.area{gap:var(--space-4);max-width:60rem;padding:var(--space-4);margin:0 auto;display:grid}.area-header,.inline-form,.cards-tools,.confirm{align-items:end;gap:var(--space-3);flex-wrap:wrap;display:flex}.area-header{align-items:center}.area>a,.area>.button{justify-self:start}.teacher-who{margin:0 0 0 auto}.add-pupils{margin-bottom:var(--space-4)}.area h1{margin:0 0 var(--space-3);font-size:var(--text-h2)}.sign-in form,.add-pupils{justify-items:start;gap:var(--space-3);display:grid}.field{gap:var(--space-1);display:grid}.field input,.field textarea{min-width:min(24rem,80vw);padding:var(--space-2) var(--space-3)}.class-list,.pupil-list,.card-grid{margin:0 0 var(--space-4);padding:0;list-style:none}.class-list li,.pupil-list li{align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--grey-300);flex-wrap:wrap;display:flex}.class-list a{min-height:var(--target-min);font-size:var(--text-h3);font-weight:700;line-height:var(--target-min)}.group-list{gap:var(--space-3);margin:0 0 var(--space-4);padding:0;list-style:none;display:grid}.group{justify-items:start;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--grey-300);border-radius:var(--radius-input);margin:0;display:grid}.group legend{padding:0 var(--space-1);font-weight:700}.group-members{gap:0 var(--space-4);flex-wrap:wrap;display:flex}.check{align-items:center;gap:var(--space-2);min-height:var(--target-min);display:inline-flex}.check input{width:1.25rem;height:1.25rem;accent-color:var(--mth-charcoal)}.work-list,.version-list{margin:0;padding:0;list-style:none}.work{padding:var(--space-3) 0;border-bottom:1px solid var(--grey-300)}.work h2{margin:0 0 var(--space-1);font-size:var(--text-h3)}.work-binned,.version-list li{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.work-binned{margin:var(--space-2) 0;font-weight:700}.work summary{min-height:var(--target-min);line-height:var(--target-min);cursor:pointer}.version-list li{padding:var(--space-1) 0}.version-list span{min-width:12rem}.welcome-ways{gap:var(--space-3);flex-wrap:wrap;display:flex}.welcome-ways .button{min-width:12rem;font-size:var(--text-h3)}.my-groups h2{font-size:var(--text-h3);margin:0}.my-groups ul{margin:var(--space-1) 0 0;padding-left:var(--space-4)}.name-choices{gap:var(--space-3);margin:0 0 var(--space-4);flex-wrap:wrap;padding:0;list-style:none;display:flex}.name-choices .button{min-width:8rem;font-size:var(--text-h3)}.code-input{font-size:var(--text-h3)}.signed-in{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.sign-in>.button-quiet{margin-top:var(--space-3)}.pupil-name{min-width:10rem;font-weight:700}.join-code[data-none]{font-size:var(--text-body-size);letter-spacing:normal;font-weight:400}.join-code{font-size:var(--text-h2);letter-spacing:.05em;margin:0;font-weight:700}.confirm{margin:var(--space-3) 0;padding:var(--space-3);border:2px solid var(--mth-charcoal);border-radius:var(--radius-cell);align-items:center}.confirm p{flex-basis:100%;margin:0}.card-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));display:grid}.login-card{padding:var(--space-3);border:2px dashed var(--grey-500);border-radius:var(--radius-cell);break-inside:avoid}.login-card-name{margin:0 0 var(--space-2);font-size:var(--text-h3);font-weight:700}.login-card dl{gap:var(--space-1) var(--space-3);margin:0 0 var(--space-2);grid-template-columns:auto 1fr;display:grid}.login-card dt{color:var(--grey-500)}.login-card dd{font-size:var(--text-h3);letter-spacing:.05em;margin:0;font-weight:700}@media print{.skip-link,.area-header,.cards-tools,.login-cards>.grid-help{display:none}.area,.login-cards{box-shadow:none;border:0;padding:0}}.idle-banner{right:var(--space-4);bottom:var(--space-4);left:var(--space-4);z-index:20;align-items:center;gap:var(--space-3);max-width:40rem;padding:var(--space-4);border:2px solid var(--mth-charcoal);border-radius:var(--radius-card);background:var(--surface-white);box-shadow:var(--shadow-raised);flex-wrap:wrap;margin:0 auto;display:flex;position:fixed}.idle-banner>div{display:contents}.idle-banner p{flex:16rem;margin:0}