.sp-hero{padding:42px 0 25px}.sp-hero h1{font:clamp(42px,5vw,76px)/1.02 Georgia,serif;letter-spacing:-2px;color:#92245e;margin:18px 0}.sp-hero h1 em{color:#e5008c}.sp-hero p{font-size:17px;line-height:1.7}.sp-chambers,.sp-write,.sp-sounds,.sp-finish{border:1px solid #efc3dc;border-radius:22px;padding:28px;margin:24px 0;background:#fff9fc}.sp-chamber-list{display:grid;grid-template-columns:repeat(12,minmax(65px,1fr));gap:6px;overflow-x:auto;padding:8px 0}.sp-chamber-list button{display:flex;flex-direction:column;align-items:center;border:1px solid #efc3dc;background:#fff2f9;border-radius:12px;padding:14px 5px;min-height:114px;color:#71324e;cursor:pointer}.sp-chamber-list b{font-size:29px;font-family:Georgia,serif}.sp-chamber-list small{font-size:9px;margin-top:6px}.sp-chamber-list span{font-size:11px;margin-top:4px}.sp-chamber-list [aria-pressed=true],.sp-letters [aria-pressed=true],.sp-tools [aria-pressed=true],.sp-layer-buttons [aria-pressed=true],.sp-note-options [aria-pressed=true],.sp-length [aria-pressed=true],.sp-directions [aria-pressed=true],.sp-word-bank [aria-pressed=true]{background:#e6008c!important;color:#fff!important;border-color:#e6008c!important}.sp-lesson{display:flex;gap:22px;align-items:center;background:#f8deee;border-radius:15px;margin:18px 0;padding:24px}.sp-chamber-glyph{font:70px Georgia,serif;color:#d40080}.sp-lesson h3{font:28px Georgia,serif;margin:8px 0}.sp-lesson p{margin:8px 0 12px;line-height:1.6}.sp-lesson .text-link{margin-right:20px}.sp-chambers>small,.sp-finish>small{font-size:11px;line-height:1.6;display:block;color:#93647b}.sp-write label{font:28px Georgia,serif;display:block;margin:14px 0}.sp-write>div:not(.sp-word-bank){display:flex;gap:12px}.sp-write input{flex:1;min-width:0;font-size:20px;padding:18px;border:1px solid #e8b4d1;border-radius:12px;background:#fff}.sp-write p,.sp-palette>p,.sp-editor p{font-size:12px;line-height:1.7;color:#8f627b}.sp-word-bank{display:flex;gap:8px;flex-wrap:wrap}.sp-word-bank button{border:1px solid #dd9fc3;background:#ffe8f5;padding:10px 16px;border-radius:25px;font-size:17px;cursor:grab}.sp-workspace{display:grid;grid-template-columns:245px minmax(0,1fr);gap:20px;margin:24px 0}.sp-palette{padding:24px;background:#f8deee;border-radius:22px}.sp-palette h2,.sp-song-page h2,.sp-sounds h2,.sp-finish h2{font:30px Georgia,serif;margin:12px 0 20px}.sp-letters{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.sp-letters button{background:#fff9fc;border:1px solid #e7b8d2;border-radius:11px;padding:9px 2px;cursor:grab;color:#85315c}.sp-letters b{font:30px Georgia,serif;display:block}.sp-letters small{font-size:9px}.sp-letter-meaning{margin:20px 0;padding:16px;background:#fff5fb;border-radius:12px;font-size:13px;line-height:1.6}.sp-letter-meaning>b{font-size:20px}.sp-letter-meaning small{display:block}.sp-song-page{min-width:0;padding:26px;background:#fff7fc;border:1px solid #ebbeda;border-radius:22px}.sp-song-page>.section-row{align-items:start;gap:12px;flex-wrap:wrap}.sp-song-page label{font-size:12px;display:block}.sp-song-page label input[type=range]{width:135px;display:block;accent-color:#e6008c;margin:10px 0}.sp-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.sp-tools>button:not(.secondary):not(.text-link),.sp-note-options button,.sp-length button:not(.text-link),.sp-directions button{padding:9px 12px;border:1px solid #e3afd0;border-radius:9px;background:#fff9fd;color:#893359;cursor:pointer}.sp-tool-hint{font-size:12px;min-height:22px;color:#985a7b}.sp-scroll{overflow-x:auto;padding-bottom:10px}.sp-score{display:grid;grid-template-columns:50px repeat(var(--sp-beats),minmax(69px,1fr));min-width:calc(50px + var(--sp-beats)*72px);background:#f6d8ec;border:1px solid #edb8d7;border-radius:14px;overflow:hidden;gap:3px;padding:10px}.sp-score-label{padding-top:30px;display:flex;flex-direction:column;font-size:10px;text-align:center;color:#955476}.sp-score-label>span{line-height:33px;margin:7px 0}.sp-column{min-width:0;border-radius:8px;transition:background .1s}.sp-column.selected{outline:2px solid #c885ae;outline-offset:-2px}.sp-column.now{background:#fff0b1;outline:3px solid #dfae36;outline-offset:-3px}.sp-count{display:block;text-align:center;padding:8px;font-weight:bold;font-size:12px}.sp-drop{display:block;width:100%;height:180px;border:1px dashed #d897c0;border-radius:8px;background:repeating-linear-gradient(to top,#fff7fc 0,#fff7fc 34px,#eac5df 35px,#fff7fc 36px);position:relative;cursor:grab;color:#902855}.sp-drop:focus-visible{outline:3px solid #742ca5}.sp-note{position:absolute;bottom:calc(4px + var(--note-height)*34px);left:5px;right:5px;background:#d8389a;color:white;border-radius:8px;box-shadow:0 3px 0 #a91d73;padding:3px 0}.sp-note b{font:30px/1 Georgia,serif;display:block}.sp-note small{display:block;font-size:9px}.sp-empty{font:28px Georgia,serif;color:#c796b3}.sp-lyric{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;text-align:center;padding:12px 4px;min-height:42px;font-weight:bold}.sp-drum-dot{text-align:center;display:block;height:30px;font-size:10px;color:#9b4071}.sp-sing-line{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;padding:20px 10px;margin:16px 0;border-radius:12px;background:#fce8f5;font:24px Georgia,serif}.sp-sing-line span{padding:5px 8px;border-radius:8px}.sp-sing-line span.now{background:#edcf78;color:#55233f;transform:scale(1.08)}.sp-transport{display:flex;flex-wrap:wrap;gap:9px}.sp-transport button{font-size:12px}#sp-status{font-size:13px;line-height:1.7;min-height:40px}.sp-editor{border-top:1px solid #edc0db;margin-top:20px;padding-top:20px}.sp-editor>label{margin:12px 0 7px}.sp-editor>input{padding:12px;border-radius:9px;border:1px solid #e6b3d0;width:100%;background:white;font-size:18px}.sp-note-options{display:flex;gap:8px;margin:13px 0}.sp-note-options button{flex:1;font-size:17px}.sp-note-options small{display:block;font-size:9px;margin-top:3px}.sp-length{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px}.sp-sounds{display:grid;grid-template-columns:1fr 260px;gap:28px;background:#f8deee}.sp-layer-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0}.sp-layer-buttons button{border:1px solid #dba5c8;background:#fff5fb;border-radius:15px;padding:18px 8px;color:#803654;cursor:pointer}.sp-layer-buttons b{display:block;font:32px Georgia,serif;margin-bottom:10px}.sp-layer-buttons strong{display:block;font-size:15px}.sp-layer-buttons small{display:block;font-size:10px;margin-top:8px}.sp-geometry{text-align:center;padding:20px;background:#fff6fc;border-radius:16px}.sp-geometry svg{width:135px;color:#c42c8d}.sp-geometry label{font-size:11px;display:block}.sp-geometry input{width:100%;accent-color:#e6008c;margin:15px 0}.sp-geometry p,.sp-geometry small{font-size:11px;line-height:1.6}.sp-directions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:12px}.sp-directions small{flex-basis:100%;color:#96647e}.sp-finish{display:grid;grid-template-columns:1fr 1fr;gap:20px}.sp-finish>div>button{margin:5px}.sp-finish>small,.sp-finish>p,.sp-finish>audio{grid-column:1/-1}.sp-finish p{line-height:1.7}.sp-finish audio{width:100%}.sp-score button:focus-visible,.sp-letters button:focus-visible{outline:3px solid #7130a4;outline-offset:2px}@media(max-width:1000px){.sp-workspace{grid-template-columns:1fr}.sp-letters{grid-template-columns:repeat(11,1fr)}.sp-letter-meaning{margin:15px 0}.sp-chamber-list{grid-template-columns:repeat(12,75px)}.sp-sounds{grid-template-columns:1fr 210px}}@media(max-width:650px){.sp-chambers,.sp-write,.sp-song-page,.sp-sounds,.sp-finish{padding:18px}.sp-write>div:not(.sp-word-bank){flex-direction:column}.sp-letters{grid-template-columns:repeat(6,1fr)}.sp-sounds,.sp-finish{grid-template-columns:1fr}.sp-layer-buttons{grid-template-columns:repeat(2,1fr)}.sp-note-options{gap:4px}.sp-note-options button{padding:10px 5px}.sp-lesson{padding:15px;gap:12px}.sp-chamber-glyph{font-size:44px}.sp-finish>small,.sp-finish>p,.sp-finish>audio{grid-column:1}}
.sp-drop,.sp-letters button,.sp-word-bank button{touch-action:none}.sp-drop.drop-ready{outline:4px solid #efbb35;outline-offset:-4px;background:#fff1b3}

.sp-drop,.sp-letters button,.sp-word-bank button{user-select:none;-webkit-user-select:none}