/* B077TV: ordered original Rectangle lesson CSS; active only for this lesson. */ :root{ --bg:#06101e;--panel:#132745;--panel2:#091426;--line:#436a98;--text:#f7fbff; --muted:#c9d9ee;--blue:#2e9cff;--blue2:#8cc8ff;--purple:#d276ff;--gold:#ffcf3d; --yellow:#ffe36d;--green:#93cb87;--red:#e97872;--flat:#ff9c8f;--flat2:#ffdfd9; --whiteW:74px;--blackW:46px;--whiteH:238px;--blackH:150px; } *{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 0 0,#17345e 0%,var(--bg) 45%,#02050b 100%);font-family:Arial,system-ui,sans-serif;color:var(--text)} .main{min-height:100vh;padding:22px}.wrap{max-width:1540px;margin:auto} .hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px} .eyebrow{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--flat);font-weight:950} h1{font-size:clamp(38px,4.4vw,64px);line-height:.96;margin:8px 0 10px} .lead{font-size:20px;line-height:1.34;color:#e8f2ff;max-width:1120px;margin:0} .lesson{border:1px solid var(--line);border-radius:16px;background:#071426;padding:14px 22px;text-align:center;min-width:168px} .lesson b{display:block;color:var(--flat);font-size:23px;margin-bottom:7px}.lesson span{font-weight:950;font-size:18px} .card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 12px 30px #0007;margin-bottom:16px} .card h2{font-size:13px;letter-spacing:5px;text-transform:uppercase;color:var(--blue2);font-weight:950;margin:0 0 12px} .copy{font-size:18px;line-height:1.42;color:#e9f2ff;margin:7px 0}.purple{color:var(--purple);font-weight:950}.blue{color:var(--blue);font-weight:950}.gold{color:var(--gold);font-weight:950}.yellow{color:var(--yellow);font-weight:950}.flat{color:var(--flat);font-weight:950} .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .tRow{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:14px} .tBtn{border:1px solid var(--line);border-radius:14px;background:#07101f;color:var(--text);min-height:110px;padding:10px;cursor:pointer;text-align:center;position:relative} .tBtn .tonic{font-size:31px;font-weight:950;color:#fff}.tBtn .tval{font-size:14px;color:var(--muted);font-weight:900;margin-top:4px}.tBtn .count{font-size:15px;color:#e6efff;font-weight:950;margin-top:6px} .tBtn.active{background:linear-gradient(180deg,#522e2a,#111018);border-color:#ffd1ca;box-shadow:0 0 22px #ff9c8f77;transform:translateY(-2px)} .tBtn.active:after{content:"";position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);border-left:13px solid transparent;border-right:13px solid transparent;border-top:15px solid var(--flat)} .formulaBox{background:#07101f;border:1px solid var(--line);border-radius:14px;padding:16px;min-height:132px} .formulaBox small{display:block;color:var(--muted);font-weight:900;margin-bottom:9px;text-transform:uppercase;letter-spacing:1px} .formulaBox .formula{font-size:30px;font-weight:950;color:var(--yellow);line-height:1.15} .formulaBox .line{font-size:18px;line-height:1.4;color:#e8f1ff;margin-top:8px} .keyboardShell{background:#020712;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:16px 18px 20px} .legend{display:flex;gap:22px;align-items:center;margin:2px 0 12px;color:#e9f2ff;font-weight:900} .legend .sw{display:inline-block;width:23px;height:23px;border-radius:5px;margin-right:8px;vertical-align:middle} .sw.prev{border:3px solid var(--blue2)}.sw.new{border:3px solid var(--gold)} .keyboardNote{font-size:14px;color:#dfeeff;margin:0 0 10px;font-weight:900} .viewport{overflow-x:auto;padding-top:42px} .keyboard{position:relative;width:calc(var(--whiteW) * 15);height:calc(var(--whiteH) + 2px);margin:0 auto} .whiteRow{position:absolute;left:0;top:0;display:flex;height:var(--whiteH);z-index:1} .white{position:relative;width:var(--whiteW);height:var(--whiteH);background:linear-gradient(90deg,#e8e8e8,#fff,#dedede);border:1px solid #aaa;border-radius:0 0 8px 8px;color:#06101e;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:17px;font-weight:950;flex:none} .white.tonic{box-shadow:inset 0 0 0 999px rgba(255,223,160,.55)} .white .name{font-size:24px;color:#050fba}.white .val{margin-top:8px;background:var(--green);color:#fff;min-width:46px;border-radius:5px;padding:5px;font-size:18px;text-align:center} .white.neg .val{background:var(--red)} .white .tmark{position:absolute;left:50%;top:20px;transform:translateX(-50%);background:#ffe36d;color:#06101e;border:2px solid #06101e;border-radius:999px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:950;z-index:30;box-shadow:0 0 16px #ffe36dcc} .white.whiteFlatPrev{box-shadow:inset 0 0 0 999px #84c4ff77, inset 0 0 0 4px #84c4ff, 0 0 16px #84c4ff88} .white.whiteFlatNew{box-shadow:inset 0 0 0 999px #ffe36d88, inset 0 0 0 5px #ffe36d, 0 0 24px #ffe36daa} .white .enharmonic{position:absolute;top:26px;left:50%;transform:translateX(-50%);border-radius:999px;padding:5px 9px;font-size:15px;border:1px solid currentColor;z-index:16;font-weight:950} .white.whiteFlatPrev .enharmonic{background:#1d5e9f;color:#fff;border-color:#84c4ff} .white.whiteFlatNew .enharmonic{background:#ffe36d;color:#06101e;border-color:#06101e} .black{position:absolute;top:0;width:var(--blackW);height:var(--blackH);background:linear-gradient(#272727,#020202);border:1px solid #333;border-radius:0 0 8px 8px;z-index:9;color:#fff;text-align:center;font-size:14px;font-weight:950;padding-top:88px;box-shadow:0 10px 16px #000a;transition:all .2s ease} .black.prevFlat{background:linear-gradient(#63b2ff,#1d5e9f);outline:4px solid #84c4ff;color:#fff;box-shadow:0 0 18px #84c4ff88,0 10px 16px #000a} .black.newFlat{background:linear-gradient(#ffe36d,#b69100);outline:5px solid #ffe36d;color:#06101e;box-shadow:0 0 28px #ffe36daa,0 10px 16px #000a;transform:translateY(-5px)} .black.tonicFlat{box-shadow:0 0 24px #ffe36daa,0 10px 16px #000a} .black .tmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#ffe36d;color:#06101e;border:2px solid #06101e;border-radius:999px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:950;z-index:30;box-shadow:0 0 16px #ffe36dcc} .brace{position:absolute;top:-36px;border-top:4px solid;border-left:4px solid;border-right:4px solid;border-radius:10px 10px 0 0;height:24px;text-align:center;font-weight:950;letter-spacing:.5px;z-index:12;pointer-events:none} .brace span{position:relative;top:-29px;background:#020712;padding:0 8px;font-size:15px;letter-spacing:.7px} .brace.fork{color:var(--purple)}.brace.chop{color:var(--blue)} .result{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px;margin-top:16px} .resultBox{background:#07101f;border:1px solid var(--line);border-radius:14px;padding:16px;min-height:116px} .resultBox small{display:block;color:var(--muted);font-weight:900;margin-bottom:9px;text-transform:uppercase;letter-spacing:1px} .resultBox .big{font-size:34px;font-weight:950;color:var(--yellow)} .resultBox .line{font-size:18px;line-height:1.45;color:#e8f1ff;margin-top:8px} .flatList{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;align-items:center} .flatPill{font-weight:950;font-size:24px}.flatPill.prev{color:#fff}.flatPill.new{color:var(--gold)}.arrow{color:#dfefff;font-size:23px} .rule{background:#07101f;border:1px solid var(--line);border-radius:14px;padding:16px;font-size:20px;line-height:1.38;margin-top:16px} .rectReminder{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px} .rectMini{background:#07101f;border:1px solid var(--line);border-radius:14px;padding:14px 16px} .rectMini b{display:block;font-size:18px;margin-bottom:8px}.rectMini .seq{font-size:24px;font-weight:950;letter-spacing:1px}.rectMini .hint{font-size:15px;color:var(--muted);font-weight:900;margin-top:6px} .release{font-size:12px;color:#c8d6ea;margin-top:12px} @media(max-width:900px){.hero{display:block}.lesson{display:inline-block;margin-top:14px}.tRow{grid-template-columns:repeat(2,1fr)}.result,.grid,.rectReminder{grid-template-columns:1fr}.main{padding:14px}:root{--whiteW:66px;--blackW:41px}} .cwkUnifiedSide{position:fixed;left:0;top:0;bottom:0;width:270px;background:#0b1729;border-right:1px solid #416895;z-index:999999;overflow:auto;padding:13px 10px;font-family:Arial,system-ui,sans-serif;color:white;box-shadow:4px 0 18px #0008} .cwkUnifiedSide .cwkBrand{font-size:28px;font-weight:950;line-height:.9;margin:3px 0 16px}.cwkUnifiedSide .cwkBrand span{display:block;color:#84c4ff} .cwkUnifiedSide .cwkTitle{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#84c4ff;font-weight:950;margin:10px 0 8px} .cwkUnifiedSide a{display:block;color:white;text-decoration:none;border:1px solid #416895;background:#091527;border-radius:11px;padding:9px 10px;margin:6px 0;font-weight:900;line-height:1.15}.cwkUnifiedSide a:hover{background:#173a66}.cwkUnifiedSide a.active{background:#31578f;border-color:#84c4ff;box-shadow:0 0 12px #84c4ff44}.cwkUnifiedSide .build{display:block;font-size:11px;color:#ffe36d;margin-top:3px}.cwkUnifiedSide .cwkCurrent{border-left:4px solid #ffe36d;background:#081424;border-radius:10px;padding:8px 10px;margin:0 0 12px;font-size:12px;line-height:1.25}.cwkUnifiedSide .cwkPN{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 13px}.cwkUnifiedSide .cwkPN a{text-align:center;margin:0;background:#31578f;border-color:#84c4ff}.cwkUnifiedSide .cwkPN a.disabled{opacity:.35;pointer-events:none;background:#091527;border-color:#416895} body.cwkUnifiedMenu{margin-left:270px!important;padding-top:0!important;overflow:auto!important;min-width:1180px!important} body.cwkUnifiedMenu .side{display:none!important} body.cwkUnifiedMenu .app{display:block!important;grid-template-columns:none!important;height:auto!important;min-height:100vh!important;overflow:visible!important} body.cwkUnifiedMenu .main{display:block!important;width:100%!important;max-width:none!important;padding:14px!important;overflow:visible!important} body.cwkUnifiedMenu .wrap{margin-left:auto!important;margin-right:auto!important} @media(max-width:900px){.cwkUnifiedSide{position:relative;width:auto;height:auto;border-right:0;border-bottom:1px solid #416895}.cwkUnifiedSide a{display:inline-block;margin:4px;vertical-align:top}.cwkUnifiedSide .cwkPN{display:flex}.cwkUnifiedSide .cwkPN a{display:inline-block}body.cwkUnifiedMenu{margin-left:0!important;min-width:0!important}.cwkUnifiedSide .build{display:none}} /* ChordWalk Learning System — pilot component layer First used by Scale Discovery. The component names are intentionally generic so approved patterns can be migrated to other lesson families later. */ html.cwLearningSystem { color-scheme: dark; --cw-bg: #05070b; --cw-surface: #0b0f16; --cw-surface-raised: #101620; --cw-surface-soft: #141b27; --cw-border: rgba(174, 193, 219, 0.14); --cw-border-strong: rgba(166, 194, 235, 0.28); --cw-text: #f5f7fb; --cw-text-soft: #c6d0de; --cw-muted: #8d9aae; --cw-blue: #8fc5ff; --cw-violet: #b6a5ff; --cw-yellow: #f5d863; --cw-green: #77dea0; --cw-orange: #ffb36a; --cw-radius: 10px; --cw-shadow: 0 18px 60px rgba(0, 0, 0, 0.24); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--cw-bg); } html.cwLearningSystem *, html.cwLearningSystem *::before, html.cwLearningSystem *::after { box-sizing: border-box; } html.cwLearningSystem body { margin: 0; min-width: 0 !important; overflow-x: hidden !important; background: radial-gradient(circle at 62% -15%, rgba(77, 101, 155, 0.15), transparent 35rem), var(--cw-bg) !important; color: var(--cw-text); font-family: inherit !important; } html.cwLearningSystem button, html.cwLearningSystem input, html.cwLearningSystem summary { font: inherit; } html.cwLearningSystem .app { min-width: 0 !important; min-height: 100vh !important; height: auto !important; overflow: visible !important; } @media (min-width: 901px) { html.cwLearningSystem .app { display: grid !important; grid-template-columns: 248px minmax(0, 1fr) !important; align-items: start !important; } html.cwLearningSystem .side { position: sticky !important; top: 0 !important; align-self: start !important; width: 248px !important; height: 100vh !important; max-height: 100vh !important; overflow-y: auto !important; } } /* The first-paint stylesheet hides seed-brand children before shared navigation loads. */ html.cwLearningSystem body .side .cwAcademyBrandLockup > img { display: block !important; } html.cwLearningSystem .main { min-width: 0 !important; width: auto !important; max-width: none !important; height: auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; } /* The shared Academy runtime owns these. This layer only makes its lesson header deliberately compact for the pilot. */ html.cwLearningSystem .main > .cwUnifiedLessonBar, html.cwLearningSystem .main > .cwLessonOrientation { width: min(1320px, calc(100% - 48px)) !important; margin-left: auto !important; margin-right: auto !important; } html.cwLearningSystem .main > .cwUnifiedLessonBar { min-height: 52px !important; margin-top: 18px !important; margin-bottom: 12px !important; border-color: var(--cw-border) !important; border-radius: var(--cw-radius) !important; background: rgba(8, 11, 17, 0.92) !important; box-shadow: none !important; } html.cwLearningSystem .main > .cwLessonOrientation { min-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 11px 14px !important; border-color: var(--cw-border) !important; border-radius: var(--cw-radius) !important; background: rgba(9, 13, 20, 0.8) !important; box-shadow: none !important; } html.cwLearningSystem .cwLessonOrientationMeta { margin-bottom: 5px !important; color: var(--cw-muted) !important; font-size: 0.7rem !important; } html.cwLearningSystem .cwLessonOrientationOutcome small { background: linear-gradient(90deg, var(--cw-blue), var(--cw-violet)); -webkit-background-clip: text; background-clip: text; color: transparent !important; } html.cwLearningSystem .cwLessonOrientationOutcome strong { color: var(--cw-text-soft) !important; font-size: 0.88rem !important; line-height: 1.35 !important; } .cwLessonPage { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 64px; } .cwLessonHeader { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 18px; } .cwLessonEyebrow, .cwSectionLabel { margin: 0 0 7px; color: var(--cw-blue); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; } .cwLessonHeader h1 { margin: 0; color: var(--cw-text); font-size: clamp(2rem, 3.4vw, 3.35rem); font-weight: 720; letter-spacing: -0.045em; line-height: 0.98; } .cwLessonHeader p { max-width: 650px; margin: 9px 0 0; color: var(--cw-text-soft); font-size: 1rem; line-height: 1.5; } .cwLessonProgress { min-width: 170px; padding: 10px 12px; border: 1px solid var(--cw-border); border-radius: 8px; background: rgba(12, 17, 25, 0.72); } .cwLessonProgress span { display: flex; justify-content: space-between; gap: 14px; color: var(--cw-muted); font-size: 0.72rem; } .cwLessonProgress span b { color: var(--cw-text-soft); font-weight: 700; } .cwLessonProgressTrack { height: 3px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #222b38; } .cwLessonProgressTrack i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cw-blue), var(--cw-violet)); transition: width 220ms ease; } .cwStartBar { display: grid; grid-template-columns: minmax(210px, 1fr) auto auto; align-items: center; gap: 16px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--cw-border); border-radius: var(--cw-radius); background: var(--cw-surface); } .cwStartInstruction { display: flex; align-items: center; gap: 11px; min-width: 0; } .cwStartNumber { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 1px solid rgba(143, 197, 255, 0.44); border-radius: 8px; background: linear-gradient(145deg, rgba(90, 138, 199, 0.26), rgba(145, 113, 208, 0.19)); color: #dbeaff; font-size: 0.75rem; font-weight: 800; } .cwStartInstruction strong { display: block; color: var(--cw-text); font-size: 0.84rem; } .cwStartInstruction p { margin: 2px 0 0; color: var(--cw-muted); font-size: 0.76rem; line-height: 1.35; } .cwSegmented { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--cw-border); border-radius: 8px; background: #080c12; } .cwSegmented button, .cwSecondaryButton, .cwPrimaryButton, .cwTextButton { min-height: 38px; border: 0; border-radius: 6px; padding: 8px 12px; color: var(--cw-text-soft); background: transparent; font-size: 0.79rem; font-weight: 720; cursor: pointer; } .cwSegmented button:hover, .cwSegmented button:focus-visible, .cwSecondaryButton:hover, .cwSecondaryButton:focus-visible, .cwTextButton:hover, .cwTextButton:focus-visible { color: white; background: var(--cw-surface-soft); outline: none; } .cwSegmented button.active { color: white; background: linear-gradient(135deg, rgba(79, 122, 180, 0.62), rgba(104, 82, 159, 0.52)); box-shadow: inset 0 0 0 1px rgba(177, 206, 248, 0.25); } .cwActionGroup { display: flex; align-items: center; gap: 6px; } .cwPrimaryButton { color: #09101b; background: #f1f4f9; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); } .cwPrimaryButton:hover,.cwPrimaryButton:focus-visible { background: white; outline: 2px solid var(--cw-blue); outline-offset: 2px; } .cwSecondaryButton { border: 1px solid var(--cw-border); background: #0c1119; } .cwTextButton { color: var(--cw-muted); } .cwCompareButton { width: 100%; min-height: 38px; margin-top: 10px; border: 1px solid var(--cw-border); border-radius: 6px; background: transparent; color: var(--cw-muted); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; } .cwCompareButton:hover,.cwCompareButton:focus-visible { border-color: var(--cw-border-strong); color: var(--cw-text); outline: none; } .cwActivity { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.72fr); grid-template-areas: "keyboard feedback"; gap: 12px; align-items: stretch; } .cwKeyboardCard, .cwFeedbackPanel, .cwDisclosure, .cwCompletion { min-width: 0; border: 1px solid var(--cw-border); border-radius: var(--cw-radius); background: var(--cw-surface); box-shadow: var(--cw-shadow); } .cwKeyboardCard { grid-area: keyboard; padding: 16px; } .cwFeedbackPanel { grid-area: feedback; display: flex; flex-direction: column; padding: 16px; } .cwPanelHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .cwPanelHeading h2 { margin: 0; color: var(--cw-text); font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; } .cwPanelHeading p { margin: 3px 0 0; color: var(--cw-muted); font-size: 0.76rem; } .cwPanelTag { flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--cw-border); border-radius: 6px; color: var(--cw-muted); font-size: 0.68rem; font-weight: 700; } .keyboard { --cwkBlackW: 7.5%; --cwkBlackH: 57%; position: relative; height: clamp(245px, 25vw, 330px); min-height: 245px; overflow: hidden; padding: 10px; border: 1px solid rgba(143, 197, 255, 0.38); border-radius: 9px; background: #050911; } .whiteRow { display: flex; height: 100%; } .w { position: relative; display: flex; flex: 1 1 0; align-items: flex-end; justify-content: center; min-width: 0; padding: 0 3px 36px; border: 1px solid #b4bdc8; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, #dce3eb, #fbfdff 48%, #d4dce6); color: #10151d; font-size: clamp(1rem, 1.35vw, 1.35rem); font-weight: 800; text-align: center; } .w.selected,.w.target { z-index: 5; outline: 3px solid var(--cw-yellow); outline-offset: -3px; box-shadow: inset 0 0 0 999px rgba(245, 216, 99, 0.26); } .w.completed { z-index: 2; box-shadow: inset 0 0 0 999px rgba(143, 197, 255, 0.30); } .w.next { z-index: 4; outline: 3px solid var(--cw-blue); outline-offset: -3px; } .w.target { outline-color: var(--cw-green); box-shadow: inset 0 0 0 999px rgba(119, 222, 160, 0.33); } .b { position: absolute; top: 10px !important; z-index: 7; width: var(--cwkBlackW) !important; height: var(--cwkBlackH) !important; transform: translateX(-50%) !important; padding-top: 22px !important; border-radius: 0 0 6px 6px !important; background: linear-gradient(90deg, #0a0d12, #252b34 47%, #080a0e); box-shadow: 0 10px 18px rgba(0,0,0,.48) !important; color: #e8edf5; font-size: 0.72rem; font-weight: 750; text-align: center; } .b.unused { opacity: .62; } .b.skip { outline: 3px solid var(--cw-orange); outline-offset: -2px; background: linear-gradient(#e9a860,#7c4216); color: #fff; opacity: 1; } .badge { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); min-width: 20px; padding: 3px 6px; border-radius: 99px; background: #111a26; color: white; font-size: 0.66rem; } .arrowLayer { position: absolute; inset: 0; z-index: 9; pointer-events: none; } .jump { position: absolute; top: 7px; display: flex; align-items: flex-start; justify-content: center; height: 58px; padding-top: 1px; border-top: 3px solid var(--cw-yellow); border-radius: 50% 50% 0 0; color: var(--cw-yellow); font-size: 0.72rem; font-weight: 800; } .jump.semi { border-color: var(--cw-green); color: var(--cw-green); } .cwKeyboardCaption { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; color: var(--cw-muted); font-size: 0.76rem; line-height: 1.4; } .cwKeyboardLegend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .cwKeyboardLegend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .cwKeyboardLegend i { width: 7px; height: 7px; border-radius: 50%; background: var(--cw-blue); } .cwKeyboardLegend span:nth-child(2) i { background: var(--cw-yellow); } .cwKeyboardLegend span:nth-child(3) i { background: var(--cw-green); } .cwCurrentMove { min-height: 108px; padding: 14px; border: 1px solid var(--cw-border); border-radius: 8px; background: linear-gradient(145deg, rgba(45, 68, 101, .2), rgba(73, 53, 105, .12)); } .cwCurrentMove span { display: block; color: var(--cw-muted); font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; } .cwCurrentMove p { margin: 8px 0 0; color: var(--cw-text); font-size: 1rem; line-height: 1.46; } .cwCurrentMove p b { color: var(--cw-blue); } .formulaStrip { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 5px; margin: 12px 0; min-width: 0; } .token { min-width: 0; min-height: 72px; overflow: hidden; padding: 8px 3px 6px; border: 1px solid var(--cw-border); border-radius: 7px; background: #090e15; text-align: center; } .token b,.token span,.token small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .token b { min-height: 18px; color: var(--cw-text); font-size: .75rem; } .token span { margin-top: 4px; color: var(--cw-muted); font-size: .67rem; font-weight: 800; } .token small { margin-top: 5px; color: var(--cw-muted); font-size: .62rem; } .token.pending { opacity: .38; } .token.tone b { color: var(--cw-blue); } .token.semi b { color: var(--cw-yellow); } .token.current { border-color: rgba(182,165,255,.72); background: rgba(104,82,159,.14); box-shadow: inset 0 2px 0 var(--cw-violet); } .cwResultBlock { margin-top: auto; padding-top: 4px; } .status { margin: 0; color: var(--cw-text-soft); font-size: .82rem; font-weight: 700; } .notesResult { min-height: 24px; margin-top: 7px; color: var(--cw-text-soft); font-size: 1rem; font-weight: 720; letter-spacing: .08em; } .result { min-height: 35px; margin-top: 3px; color: var(--cw-yellow); font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 760; letter-spacing: .11em; } .cwDisclosure { margin-top: 12px; box-shadow: none; } .cwDisclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; color: var(--cw-text-soft); font-size: .88rem; font-weight: 720; cursor: pointer; list-style: none; } .cwDisclosure summary::-webkit-details-marker { display: none; } .cwDisclosure summary::after { content: "+"; color: var(--cw-muted); font-size: 1.1rem; font-weight: 400; } .cwDisclosure[open] summary::after { content: "−"; } .cwDisclosure summary span { display: block; margin-top: 3px; color: var(--cw-muted); font-size: .74rem; font-weight: 500; } .cwDisclosureContent { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; } .cwTheoryCard { padding: 14px; border: 1px solid var(--cw-border); border-radius: 8px; background: #090e15; } .cwTheoryCard h3 { margin: 0 0 7px; color: var(--cw-blue); font-size: .86rem; } .cwTheoryCard p { margin: 0; color: var(--cw-text-soft); font-size: .88rem; line-height: 1.58; } .cwTheoryTakeaway { grid-column: 1/-1; padding: 12px 14px; border-left: 2px solid var(--cw-violet); border-radius: 7px; background: linear-gradient(90deg, rgba(111,92,164,.12), rgba(9,14,21,.45)); color: var(--cw-text-soft); font-size: .87rem; line-height: 1.5; } .cwCompletion { margin-top: 12px; padding: 18px; box-shadow: none; } .cwCompletion.hidden { display: none; } .cwCompletion h2 { margin: 0; color: var(--cw-green); font-size: 1.1rem; } .cwCompletionLead { margin: 6px 0 14px; color: var(--cw-text); font-size: 1rem; font-weight: 650; } .cwSummaryTable { width: 100%; border-spacing: 0; overflow: hidden; border: 1px solid var(--cw-border); border-radius: 8px; } .cwSummaryTable th,.cwSummaryTable td { padding: 11px 12px; border-bottom: 1px solid var(--cw-border); color: var(--cw-text-soft); font-size: .83rem; text-align: left; } .cwSummaryTable tr:last-child td { border-bottom: 0; } .cwSummaryTable th { color: var(--cw-muted); background: #090e15; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; } .cwSummaryTable td:last-child { color: var(--cw-yellow); font-weight: 750; letter-spacing: .08em; } @media (max-width: 1120px) { .cwStartBar { grid-template-columns: 1fr auto; } .cwStartInstruction { grid-column: 1/-1; } .cwActivity { grid-template-columns: minmax(0,1fr) minmax(330px,.72fr); } .formulaStrip { grid-template-columns: repeat(4,minmax(0,1fr)); } } @media (max-width: 900px) { html.cwLearningSystem .main > .cwUnifiedLessonBar, html.cwLearningSystem .main > .cwLessonOrientation, .cwLessonPage { width: min(100% - 28px, 760px) !important; } .cwLessonHeader { align-items: flex-start; flex-direction: column; } .cwLessonProgress { width: 100%; } .cwActivity { grid-template-columns: 1fr; grid-template-areas: "feedback" "keyboard"; } .cwFeedbackPanel { min-height: 0; } .formulaStrip { grid-template-columns: repeat(7,minmax(0,1fr)); } .keyboard { height: 280px; } } @media (max-width: 640px) { .cwLessonPage { padding-top: 18px; } .cwLessonHeader h1 { font-size: 2.15rem; } .cwStartBar { display: block; } .cwSegmented { margin: 12px 0 8px; } .cwSegmented button { flex: 1; } .cwActionGroup { display: grid; grid-template-columns: 1fr 1fr; } .cwPrimaryButton { grid-column: 1/-1; } .formulaStrip { grid-template-columns: repeat(4,minmax(0,1fr)); } .keyboard { min-height: 220px; height: 56vw; padding: 7px; } .b { top: 7px !important; } .cwKeyboardCaption { display: block; } .cwKeyboardLegend { justify-content: flex-start; margin-top: 7px; } .cwDisclosureContent { grid-template-columns: 1fr; } .cwTheoryTakeaway { grid-column: auto; } .cwSummaryTable { display: block; overflow-x: auto; } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ChordWalk foundation-family adapter. Layout rules live here; page-local CSS is retained only for musical diagrams. */ html.cwFoundationFamily body { height: auto !important; min-width: 0 !important; min-height: 100vh !important; margin: 0 0 0 248px !important; overflow-x: hidden !important; overflow-y: auto !important; background: var(--cw-bg) !important; color: var(--cw-text) !important; font-family: var(--cw-font) !important; } html.cwFoundationFamily .app { display: block !important; min-width: 0 !important; min-height: 100vh !important; } html.cwFoundationFamily .app > .side, html.cwFoundationFamily .cwkUnifiedSide { display: none !important; } html.cwFoundationFamily .main { width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 100vh !important; padding: 10px 14px 42px !important; overflow: visible !important; } html.cwFoundationFamily .wrap { display: grid !important; width: min(100%, 1320px) !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 auto !important; gap: 12px !important; overflow: visible !important; } html.cwFoundationFamily .hero, html.cwFoundationFamily .card, html.cwFoundationFamily .formulaBox, html.cwFoundationFamily .resultBox, html.cwFoundationFamily .footer, html.cwFoundationFamily .haKeyMessage, html.cwFoundationFamily .haAccidentalProgress { min-width: 0 !important; height: auto !important; max-height: none !important; margin: 0 !important; border: 1px solid var(--cw-border) !important; border-radius: var(--cw-radius) !important; background: var(--cw-surface) !important; box-shadow: none !important; overflow: visible !important; } html.cwFoundationFamily .card { padding: 16px !important; } html.cwFoundationFamily .lesson { display: none !important; } html.cwFoundationFamily h1, html.cwFoundationFamily h2, html.cwFoundationFamily h3 { color: var(--cw-text) !important; font-family: inherit !important; } html.cwFoundationFamily h1 { margin: 5px 0 7px !important; font-size: clamp(2rem, 3vw, 2.8rem) !important; line-height: 1.04 !important; letter-spacing: -.04em !important; } html.cwFoundationFamily .lead, html.cwFoundationFamily .copy { color: var(--cw-text-soft) !important; font-size: .92rem !important; line-height: 1.55 !important; } html.cwFoundationFamily .eyebrow, html.cwFoundationFamily .card > h2, html.cwFoundationFamily .card > h3 { color: var(--cw-blue) !important; font-size: .72rem !important; line-height: 1.35 !important; letter-spacing: .1em !important; text-transform: uppercase !important; } html.cwFoundationFamily .big { border-radius: 7px !important; font-size: .94rem !important; line-height: 1.45 !important; } html.cwFoundationFamily b, html.cwFoundationFamily strong { font-weight: 720 !important; } html.cwFoundationFamily button, html.cwFoundationFamily select, html.cwFoundationFamily .btn { min-height: 38px !important; border-radius: 6px !important; font-family: inherit !important; font-size: .82rem !important; font-weight: 700 !important; } html.cwFoundationFamily .btn.primary, html.cwFoundationFamily .btn.good { border-color: #f1f4f9 !important; background: #f1f4f9 !important; color: #09101b !important; box-shadow: none !important; } html.cwFoundationFamily .btn.active { border-color: rgba(182,165,255,.55) !important; background: linear-gradient(135deg,rgba(78,122,181,.55),rgba(104,82,159,.46)) !important; color: #fff !important; } html.cwFoundationFamily .controls { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; } html.cwFoundationFamily .cwTransportIcon { width: auto !important; min-width: 0 !important; padding: 8px 12px !important; font-size: .82rem !important; } html.cwFoundationFamily .cwTransportIcon::before, html.cwFoundationFamily .cwTransportIcon::after { display: none !important; content: none !important; } /* Compact, content-driven lesson introduction. */ html.cwFoundationFamily .haIntroGrid { display: grid !important; grid-template-columns: minmax(245px,.9fr) minmax(320px,1.35fr) minmax(190px,.65fr) !important; align-items: stretch !important; gap: 10px !important; height: auto !important; padding: 10px !important; overflow: visible !important; } html.cwFoundationFamily .haTitlePanel, html.cwFoundationFamily .haIntroPanel, html.cwFoundationFamily .haPathDisclosure { min-width: 0; padding: 14px; border: 1px solid var(--cw-border); border-radius: 8px; background: #090e15; } html.cwFoundationFamily .haTitlePanel { display: flex; flex-direction: column; justify-content: center; } html.cwFoundationFamily .haTitlePanel h1 { overflow-wrap: anywhere; } html.cwFoundationFamily .haTitlePanel > .big { display: none !important; } html.cwFoundationFamily .haIntroPanel { display: flex; flex-direction: column; justify-content: center; } html.cwFoundationFamily .haIntroPanel > b { margin-bottom: 7px; color: var(--cw-violet-soft); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; } html.cwFoundationFamily .haIntroPanel > span { color: var(--cw-text); font-size: .92rem; line-height: 1.48; } html.cwFoundationFamily .haPathDisclosure { align-self: stretch; } html.cwFoundationFamily .haPathDisclosure summary { display: flex; justify-content: space-between; gap: 8px; color: var(--cw-text); font-size: .83rem; font-weight: 720; cursor: pointer; list-style: none; } html.cwFoundationFamily .haPathDisclosure summary::-webkit-details-marker { display: none; } html.cwFoundationFamily .haPathDisclosure summary::after { content: '+'; color: var(--cw-muted); } html.cwFoundationFamily .haPathDisclosure[open] summary::after { content: '−'; } html.cwFoundationFamily .haPathDisclosure summary span { color: var(--cw-muted); font-size: .7rem; font-weight: 550; } html.cwFoundationFamily .haGuideSteps { margin: 12px 0 0; padding: 0 0 0 19px; color: var(--cw-text-soft); } html.cwFoundationFamily .haGuideSteps li { margin: 7px 0; padding-left: 3px; font-size: .78rem; line-height: 1.35; } /* Build and quiz: activity beside the keyboard, theory after the task. */ html.cwFoundationFamily .haStackedLesson { grid-template-columns: minmax(340px,.82fr) minmax(520px,1.18fr) !important; align-items: start !important; } html.cwFoundationFamily .haStackedLesson > .haIntroGrid { grid-column: 1 / -1 !important; grid-row: auto !important; } html.cwFoundationFamily .haStackedLesson > .haActivity { grid-column: 1 !important; grid-row: auto !important; display: grid !important; gap: 12px !important; min-width: 0 !important; } html.cwFoundationFamily .haStackedLesson > .haKeyboardArea { grid-column: 2 !important; grid-row: auto !important; display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; min-width: 0 !important; } html.cwFoundationFamily .haActivity > .card, html.cwFoundationFamily .haKeyboardArea > .card { height: auto !important; min-height: 0 !important; overflow: visible !important; } html.cwFoundationFamily .haKeyboardArea > .card:first-child { order: 1; } html.cwFoundationFamily .haKeyboardArea > .card:nth-child(2) { order: 2; } html.cwFoundationFamily .haKeyboardArea > .card:nth-child(3) { order: 3; } html.cwFoundationFamily .haActivity .infoGrid { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } html.cwFoundationFamily .haActivity .info { min-width: 0 !important; padding: 12px !important; border-radius: 7px !important; } html.cwFoundationFamily .haActivity .formulaStrip, html.cwFoundationFamily .haActivity .scaleRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 5px !important; min-width: 0 !important; } html.cwFoundationFamily .haActivity .scaleRow { grid-template-columns: repeat(8,minmax(0,1fr)) !important; } html.cwFoundationFamily .haActivity .token, html.cwFoundationFamily .haActivity .noteBox { min-width: 0 !important; overflow: hidden !important; } html.cwFoundationFamily .testBox { margin-top: 10px !important; padding: 12px !important; border-radius: 7px !important; } html.cwFoundationFamily .summary { margin-top: 10px !important; padding: 12px !important; border-radius: 7px !important; } html.cwFoundationFamily .haKeyboardArea .keyboard { width: 100% !important; height: clamp(275px,28vw,380px) !important; min-height: 275px !important; margin-top: 8px !important; overflow: hidden !important; border-radius: 9px !important; } html.cwFoundationFamily .keyboardFormulaStrip, html.cwFoundationFamily .haKeyboardTheory { display: grid !important; grid-template-columns: repeat(8,minmax(0,1fr)) !important; gap: 4px !important; position: relative !important; height: auto !important; min-height: 82px !important; margin: 8px 0 !important; padding: 7px !important; border: 1px solid var(--cw-border) !important; border-radius: 8px !important; background: #080d14 !important; overflow-x: auto !important; overflow-y: visible !important; } html.cwFoundationFamily .haTheoryPoint { position: static !important; width: auto !important; min-width: 64px !important; transform: none !important; border-radius: 6px !important; box-shadow: none !important; } html.cwFoundationFamily .haTheoryPoint span, html.cwFoundationFamily .haTheoryPoint b, html.cwFoundationFamily .haTheoryPoint small { display: block !important; overflow: hidden !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html.cwFoundationFamily .haTheoryPoint span { color: var(--cw-blue) !important; font-size: .65rem !important; } html.cwFoundationFamily .haTheoryPoint b { margin: 4px 0 !important; color: var(--cw-text) !important; font-size: 1rem !important; } html.cwFoundationFamily .haTheoryPoint small { color: var(--cw-muted) !important; font-size: .62rem !important; } /* Quiz controls are allowed to wrap instead of being squeezed into one row. */ html.cwFoundationFamily.ha-quiz .testTabs { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 6px !important; } html.cwFoundationFamily .testTabs .btn { white-space: normal !important; } html.cwFoundationFamily #formulaRow, html.cwFoundationFamily .formulaRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 5px !important; min-width: 0 !important; } html.cwFoundationFamily .choiceRow { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } html.cwFoundationFamily .feedback { max-height: none !important; min-height: 0 !important; overflow: visible !important; } html.cwFoundationFamily .haInlineScore { position: static !important; display: block !important; margin-top: 8px !important; } html.cwFoundationFamily.ha-quiz .haIntroGrid { grid-template-columns: minmax(0,1fr) minmax(250px,.45fr) !important; align-items: start !important; } html.cwFoundationFamily.ha-quiz .haIntroPanel.message, html.cwFoundationFamily.ha-quiz .haTitlePanel .lead { display: none !important; } html.cwFoundationFamily.ha-quiz .haTitlePanel { min-height: 96px !important; } html.cwFoundationFamily.ha-quiz .haPathDisclosure { grid-column: 2 !important; align-self: start !important; } html.cwFoundationFamily .haQuizSetup { padding: 0 !important; overflow: hidden !important; } html.cwFoundationFamily .haQuizOptions { min-width: 0 !important; } html.cwFoundationFamily .haQuizOptions > summary { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 10px !important; min-height: 52px !important; padding: 12px 14px !important; color: var(--cw-text) !important; cursor: pointer !important; list-style: none !important; } html.cwFoundationFamily .haQuizOptions > summary::-webkit-details-marker { display: none !important; } html.cwFoundationFamily .haQuizOptions > summary::after { content: '+'; color: var(--cw-muted); } html.cwFoundationFamily .haQuizOptions[open] > summary::after { content: '−'; } html.cwFoundationFamily .haQuizOptions > summary span { font-size: .86rem !important; font-weight: 720 !important; } html.cwFoundationFamily .haQuizOptions > summary small { color: var(--cw-muted) !important; font-size: .7rem !important; font-weight: 550 !important; } html.cwFoundationFamily .haQuizOptionsBody { padding: 0 14px 14px !important; border-top: 1px solid var(--cw-border) !important; } html.cwFoundationFamily .haQuizQuestion { padding: 15px !important; } html.cwFoundationFamily .haQuizQuestion .question { margin-top: 4px !important; } html.cwFoundationFamily .haQuizQuestion #choices { display: flex !important; flex-direction: column !important; align-items: stretch !important; } html.cwFoundationFamily .haQuizQuestion #choices > .choiceRow { order: 1 !important; } html.cwFoundationFamily .haQuizQuestion #choices > .cluePanel { order: 2 !important; margin-top: 4px !important; margin-bottom: 0 !important; padding: 8px 10px !important; } html.cwFoundationFamily .haQuizQuestion #choices > .cluePanel .copy { display: none !important; } html.cwFoundationFamily .haQuizActionRow { display: flex !important; justify-content: flex-end !important; margin: 10px 0 0 !important; } html.cwFoundationFamily .haQuizCheck { min-width: 132px !important; border-color: #f1f4f9 !important; background: #f1f4f9 !important; color: #09101b !important; } html.cwFoundationFamily .haQuizProgress { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 7px 12px !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--cw-border) !important; } html.cwFoundationFamily .haQuizProgress .progress { grid-column: 1 !important; width: 100% !important; } html.cwFoundationFamily .haQuizProgress .copy { grid-column: 1 !important; margin: 0 !important; } html.cwFoundationFamily .haQuizProgress .score { grid-column: 2 !important; grid-row: 1 / span 2 !important; margin: 0 !important; font-size: 1rem !important; white-space: nowrap !important; } /* Tonic values: selection, keyboard, then optional supporting cards. */ html.cwFoundationFamily.ha-tonic .wrap { display: grid !important; grid-template-rows: auto !important; } html.cwFoundationFamily.ha-tonic .grid { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; gap: 12px !important; } html.cwFoundationFamily .haTonicSelect, html.cwFoundationFamily .haTonicKeyboard { grid-column: 1 / -1 !important; grid-row: auto !important; height: auto !important; overflow: visible !important; } html.cwFoundationFamily .haTonicKeyboard { display: block !important; } html.cwFoundationFamily .haTonicKeyboard .keyboard { width: 100% !important; height: clamp(280px,30vw,400px) !important; min-height: 280px !important; } html.cwFoundationFamily .haAlignedTonicStrip { display: grid !important; grid-template-columns: repeat(8,minmax(0,1fr)) !important; gap: 4px !important; margin: 8px 0 !important; padding: 0 !important; } html.cwFoundationFamily .haTonicContext1, html.cwFoundationFamily .haTonicContext2 { grid-column: auto !important; grid-row: auto !important; display: block !important; height: auto !important; overflow: visible !important; } html.cwFoundationFamily .haTonicContext3, html.cwFoundationFamily .haTonicContext4 { display: block !important; } html.cwFoundationFamily .haTonicQuiz { border-color: var(--cw-border-strong) !important; } html.cwFoundationFamily .haTonicQuiz .checkBtns { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; } html.cwFoundationFamily .haTonicQuiz .choice { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 72px !important; min-height: 42px !important; } /* Accidental-order lessons: simple vertical learning sequence. */ html.cwFoundationFamily.ha-sharp .wrap, html.cwFoundationFamily.ha-flat .wrap { display: grid !important; grid-template-rows: auto !important; gap: 12px !important; } html.cwFoundationFamily .tRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 6px !important; } html.cwFoundationFamily .tBtn { width: auto !important; height: auto !important; min-height: 94px !important; padding: 10px 5px !important; border-radius: 7px !important; } html.cwFoundationFamily .haAccidentalProgress { display: grid !important; grid-template-columns: minmax(210px,.55fr) minmax(0,1.45fr) !important; gap: 8px !important; padding: 8px !important; } html.cwFoundationFamily .haProgressTitle { display: flex; flex-direction: column; justify-content: center; padding: 12px; border-radius: 7px; background: #090e15; } html.cwFoundationFamily .haProgressTitle b { color: var(--cw-text) !important; font-size: .88rem !important; } html.cwFoundationFamily .haProgressTitle span { margin-top: 4px; color: var(--cw-muted) !important; font-size: .75rem !important; line-height: 1.4 !important; } html.cwFoundationFamily .haProgressRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 5px !important; } html.cwFoundationFamily.ha-flat .haProgressRow { grid-template-columns: repeat(6,minmax(0,1fr)) !important; } html.cwFoundationFamily .haProgressStep { min-width: 0; min-height: 64px; padding: 6px 3px; border: 1px solid var(--cw-border); border-radius: 6px; background: #080d14; color: var(--cw-text); } html.cwFoundationFamily .haProgressStep small, html.cwFoundationFamily .haProgressStep span { display: block; color: var(--cw-muted); font-size: .65rem; } html.cwFoundationFamily .haProgressStep b { display: block; margin: 2px 0; font-size: 1rem; } html.cwFoundationFamily .haProgressStep.previous { border-color: rgba(143,197,255,.55); background: rgba(83,132,194,.18); } html.cwFoundationFamily .haProgressStep.current { border-color: var(--cw-yellow); background: rgba(245,216,99,.12); } html.cwFoundationFamily .keyboardShell { height: auto !important; padding: 12px !important; } html.cwFoundationFamily .viewport { min-height: 300px !important; padding-top: 34px !important; overflow-x: auto !important; overflow-y: visible !important; } html.cwFoundationFamily .result { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; } html.cwFoundationFamily .resultBox { padding: 12px !important; } html.cwFoundationFamily .rule, html.cwFoundationFamily .rectReminder { display: block !important; } html.cwFoundationFamily .footer, html.cwFoundationFamily .haKeyMessage { padding: 12px 14px !important; color: var(--cw-text-soft) !important; font-size: .84rem !important; line-height: 1.45 !important; } @media (max-width: 1120px) { html.cwFoundationFamily .haIntroGrid { grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr) !important; } html.cwFoundationFamily .haPathDisclosure { grid-column: 1 / -1; } html.cwFoundationFamily .haStackedLesson { grid-template-columns: minmax(310px,.78fr) minmax(430px,1.22fr) !important; } html.cwFoundationFamily .haAccidentalProgress { grid-template-columns: 1fr !important; } } @media (max-width: 900px) { html.cwFoundationFamily body, html.cwFoundationFamily body.cwViewportFoundation.cwViewportDense.cwkUnifiedMenu { margin-left: 0 !important; } html.cwFoundationFamily .main { padding: 8px 12px 36px !important; } html.cwFoundationFamily .haIntroGrid, html.cwFoundationFamily .haStackedLesson, html.cwFoundationFamily.ha-tonic .grid { grid-template-columns: 1fr !important; } html.cwFoundationFamily .haIntroGrid > *, html.cwFoundationFamily .haStackedLesson > .haIntroGrid, html.cwFoundationFamily .haStackedLesson > .haActivity, html.cwFoundationFamily .haStackedLesson > .haKeyboardArea, html.cwFoundationFamily .haTonicSelect, html.cwFoundationFamily .haTonicKeyboard { grid-column: 1 !important; } html.cwFoundationFamily.ha-quiz .haIntroGrid { grid-template-columns: minmax(0,1fr) !important; } html.cwFoundationFamily.ha-quiz .haPathDisclosure { grid-column: 1 !important; } } @media (max-width: 640px) { html.cwFoundationFamily .haIntroGrid { padding: 8px !important; } html.cwFoundationFamily.ha-quiz .testTabs { grid-template-columns: 1fr 1fr !important; } html.cwFoundationFamily .haActivity .formulaStrip, html.cwFoundationFamily #formulaRow, html.cwFoundationFamily .formulaRow { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } html.cwFoundationFamily .haActivity .scaleRow, html.cwFoundationFamily .haAlignedTonicStrip { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } html.cwFoundationFamily .tRow { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } html.cwFoundationFamily .haProgressRow { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } html.cwFoundationFamily .result { grid-template-columns: 1fr !important; } html.cwFoundationFamily .haTonicKeyboard .belowRules { grid-template-columns: minmax(0,1fr) !important; } html.cwFoundationFamily .haTonicKeyboard .rule { min-width: 0 !important; } html.cwFoundationFamily .haTonicKeyboard .seq { max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 6px !important; } html.cwFoundationFamily .haQuizOptions > summary { grid-template-columns: 1fr auto !important; } html.cwFoundationFamily .haQuizOptions > summary small { display: none !important; } html.cwFoundationFamily .haQuizActionRow .haQuizCheck { width: 100% !important; } html.cwFoundationFamily .haQuizProgress { grid-template-columns: 1fr !important; } html.cwFoundationFamily .haQuizProgress .score { grid-column: 1 !important; grid-row: auto !important; } } /* ChordWalk Academy — shared rebuild layer ---------------------------------------- This is the single visual source of truth for every legacy lesson family. Family styles keep only the geometry needed by their musical diagrams. Colour, type, navigation, surfaces, controls and responsive behaviour live here. */ @font-face{ font-family:Inter; src:url("fonts/Inter-Variable.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; } html.cwLearningSystem{ color-scheme:dark; --cw-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --cw-bg:#07090d; --cw-rail:#090c11; --cw-surface:#0d1117; --cw-surface-raised:#111620; --cw-surface-soft:#0a0e14; --cw-border:rgba(170,187,214,.14); --cw-border-strong:rgba(170,194,229,.26); --cw-text:#f4f6fa; --cw-text-soft:#c3cad5; --cw-muted:#8a95a6; --cw-subtle:#697588; --cw-blue:#78adf0; --cw-blue-soft:#a7ccff; --cw-violet:#9a8cff; --cw-violet-soft:#bcb4ff; --cw-yellow:#f2d55c; --cw-green:#63d391; --cw-orange:#f1a85f; --cw-radius:10px; --cw-shadow:0 24px 70px rgba(0,0,0,.28); background:var(--cw-bg); font-family:var(--cw-font)!important; } html.cwLearningSystem *,html.cwLearningSystem *::before,html.cwLearningSystem *::after{box-sizing:border-box} html.cwLearningSystem body{ min-width:0!important; min-height:100vh!important; background: radial-gradient(900px 430px at 82% -180px,rgba(128,101,255,.075),transparent 68%), radial-gradient(760px 380px at 42% -190px,rgba(73,145,255,.06),transparent 70%), var(--cw-bg)!important; background-attachment:fixed!important; color:var(--cw-text)!important; font-family:var(--cw-font)!important; font-size:16px; line-height:1.5; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } html.cwLearningSystem.cwStandaloneFamily body.cwViewportManaged, html.cwLearningSystem body.cwAcademyHome.cwViewportManaged{ background: radial-gradient(900px 430px at 82% -180px,rgba(128,101,255,.075),transparent 68%), radial-gradient(760px 380px at 42% -190px,rgba(73,145,255,.06),transparent 70%), var(--cw-bg)!important; } html.cwLearningSystem :where(button,input,select,textarea,summary){font:inherit!important} html.cwLearningSystem :where(button,a,select,summary){touch-action:manipulation} html.cwLearningSystem :where(button,a,select,input,summary):focus-visible{outline:2px solid var(--cw-blue)!important;outline-offset:3px!important} html.cwLearningSystem :where(h1,h2,h3,h4){font-family:var(--cw-font)!important;color:var(--cw-text)!important;text-wrap:balance} html.cwLearningSystem :where(p,li){text-wrap:pretty} /* Shared Academy rail */ html.cwLearningSystem :where(.side,.academyNav,.cwkUnifiedSide){ scrollbar-width:thin; scrollbar-color:#344052 transparent; } html.cwLearningSystem :where(.side,.academyNav,.cwkUnifiedSide){ border-right:1px solid #181e28!important; background:rgba(8,11,16,.96)!important; box-shadow:none!important; } html.cwLearningSystem :where(.cwAcademyBrandLockup,.academyBrand){ min-height:58px!important; margin:0 4px 18px!important; padding:4px 0 13px!important; border-bottom:1px solid var(--cw-border)!important; color:var(--cw-text)!important; font-family:var(--cw-font)!important; font-size:1.15rem!important; font-weight:760!important; letter-spacing:-.035em!important; background:none!important; } html.cwLearningSystem .cwAcademyBrandLockup>img{width:auto!important;max-width:178px!important;height:32px!important;object-fit:contain!important;object-position:left center!important} html.cwLearningSystem .cwAcademyBrandLockup>span{display:none!important} html.cwLearningSystem :where(.cwAcademyBrandLockup,.academyBrand)::before, html.cwLearningSystem :where(.cwAcademyBrandLockup,.academyBrand)::after{display:none!important;content:none!important} html.cwLearningSystem body :is(.side,.cw-global-side,.academyNav,.cwkUnifiedSide)>.cwAcademyBrandLockup{ height:58px!important; min-height:58px!important; margin:0 4px 18px!important; padding:4px 0 13px!important; background:none!important; } html.cwLearningSystem body :is(.side,.cw-global-side,.academyNav,.cwkUnifiedSide)>.cwAcademyBrandLockup::before, html.cwLearningSystem body :is(.side,.cw-global-side,.academyNav,.cwkUnifiedSide)>.cwAcademyBrandLockup::after{display:none!important;content:none!important} html.cwLearningSystem body :is(.side,.cw-global-side,.academyNav,.cwkUnifiedSide)>.cwAcademyBrandLockup>img{display:block!important} html.cwLearningSystem :where(.cwAcademyToolsTitle,.cwAcademyRoadmapTitle,.navLabel,.navTitle){ color:var(--cw-subtle)!important; font-size:.66rem!important; font-weight:720!important; letter-spacing:.12em!important; text-transform:uppercase!important; } html.cwLearningSystem :where(.cwAcademyTools,.cwAcademyRoadmap){font-family:var(--cw-font)!important} html.cwLearningSystem :where(.cwAcademyToolButton,.cwAcademyToolSearch,.cwAcademyToolGrid button){ border-color:var(--cw-border)!important; border-radius:7px!important; background:#0d1118!important; color:#aeb7c5!important; box-shadow:none!important; } html.cwLearningSystem .cwAcademyToolSearch input{background:transparent!important;color:var(--cw-text)!important} html.cwLearningSystem .cwAcademyToolSearch button{border-radius:6px!important;background:#eef2f8!important;color:#111720!important} html.cwLearningSystem :where(.cwAcademyRoadmapStage,.cwAcademyRoadmapGroup,.cwAcademyRoadmap a,.mainBtn){border-radius:7px!important;box-shadow:none!important} html.cwLearningSystem :where(.cwAcademyRoadmapStage,.cwAcademyRoadmapGroup){border-color:transparent!important;background:transparent!important} html.cwLearningSystem :where(.cwAcademyRoadmap a,.mainBtn){color:#98a3b3!important;transition:background-color .18s ease,color .18s ease,border-color .18s ease!important} html.cwLearningSystem :where(.cwAcademyRoadmap a,.mainBtn):hover{background:#111720!important;color:var(--cw-text)!important} html.cwLearningSystem :where(.cwAcademyRoadmap a.active,.cwAcademyRoadmap .active,.mainBtn.active){ border-color:#2d4e76!important; background:#111d2d!important; color:#edf4ff!important; } /* One consistent top navigation */ html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar{ position:sticky!important; top:0!important; z-index:2147482500!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; flex-wrap:nowrap!important; gap:6px!important; width:100%!important; max-width:none!important; min-height:64px!important; margin:0!important; padding:0 30px!important; border:0!important; border-bottom:1px solid rgba(41,49,64,.72)!important; border-radius:0!important; background:rgba(7,9,13,.86)!important; box-shadow:0 10px 35px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.018)!important; backdrop-filter:blur(20px) saturate(125%)!important; font-family:var(--cw-font)!important; } html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl{ position:static!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; min-height:36px!important; margin:0!important; padding:0 12px!important; border:1px solid transparent!important; border-radius:7px!important; background:transparent!important; color:#aeb6c4!important; box-shadow:none!important; font-size:.76rem!important; font-weight:620!important; line-height:1!important; text-decoration:none!important; white-space:nowrap!important; transition:background-color .18s ease,border-color .18s ease,color .18s ease!important; } html.cwLearningSystem body .cwAcademyLessonNav .cwUnifiedNavControl:hover{background:#121720!important;color:var(--cw-text)!important;filter:none!important} html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar::before{ content:"Lesson navigation"; margin-right:auto; color:#78869a; font-size:.66rem; font-weight:680; letter-spacing:.12em; line-height:1; text-transform:uppercase; white-space:nowrap; } html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavAbout{ color:#929eaf!important; } html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavMenu{ border-color:#2b3442!important; background:#0e131b!important; color:#c0c9d6!important; } html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavPrevious{ margin-left:10px!important; border-color:#354052!important; background:#0c1118!important; color:#d8dfea!important; box-shadow:-11px 0 0 -10px #303948!important; } html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavNext:not(.disabled){ margin-left:2px!important; border-color:rgba(226,233,255,.52)!important; background:linear-gradient(135deg,#91c7ff 0%,#a394ff 100%)!important; color:#0a0e16!important; box-shadow:0 6px 18px rgba(92,111,229,.2),inset 0 1px 0 rgba(255,255,255,.46)!important; font-weight:730!important; } html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavPrevious:hover{ border-color:#5b6b82!important; background:#151b24!important; color:#fff!important; } html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavNext:not(.disabled):hover{ border-color:#eef2ff!important; background:linear-gradient(135deg,#afd7ff 0%,#b9adff 100%)!important; color:#060910!important; transform:translateY(-1px); } html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl:focus-visible{ outline:2px solid #9abfff!important; outline-offset:2px!important; } html.cwLearningSystem body .cwAcademyLessonNav .disabled{opacity:.42!important} /* Compact learning objective used by every family */ html.cwLearningSystem body .cwLessonOrientation{ position:relative!important; min-width:0!important; height:auto!important; min-height:0!important; max-height:none!important; margin:18px 0 14px!important; padding:14px 16px!important; overflow:visible!important; border:1px solid #292842!important; border-radius:var(--cw-radius)!important; background:linear-gradient(110deg,rgba(104,84,205,.105),rgba(38,73,124,.055) 65%,rgba(14,18,25,.14))!important; box-shadow:inset 2px 0 0 rgba(154,140,255,.48),0 12px 34px rgba(19,12,52,.08)!important; } html.cwLearningSystem body .cwLessonOrientationMeta{margin-bottom:5px!important;color:var(--cw-subtle)!important;font-size:.7rem!important;letter-spacing:.08em!important} html.cwLearningSystem body .cwLessonOrientationOutcome small{ display:block!important; margin-bottom:4px!important; background:linear-gradient(90deg,var(--cw-blue),var(--cw-violet))!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; font-size:.68rem!important; font-weight:760!important; letter-spacing:.1em!important; text-transform:uppercase!important; } html.cwLearningSystem body .cwLessonOrientationOutcome strong{display:block!important;color:#d9dde5!important;font-size:.86rem!important;line-height:1.45!important} html.cwLearningSystem body .cwLessonOrientation button{min-height:34px!important;border:1px solid var(--cw-border)!important;border-radius:6px!important;background:#11161d!important;color:#bdc5d1!important;box-shadow:none!important;font-size:.7rem!important} /* Shared content surfaces and hierarchy */ html.cwLearningSystem :where(.card,.panel,.hero,.formulaBox,.resultBox,.footer,.keyboardPanel,.lessonCard,.studio,.chooser,.stage,.messageCard,.visualCard,.exercisePanel,.summaryPanel,.cwKeyboardCard,.cwFeedbackPanel,.cwDisclosure,.cwCompletion){ border-color:var(--cw-border)!important; border-radius:var(--cw-radius)!important; background:linear-gradient(145deg,rgba(255,255,255,.012),transparent 38%),var(--cw-surface)!important; box-shadow:0 1px 0 rgba(255,255,255,.018),0 18px 55px rgba(0,0,0,.08)!important; } html.cwLearningSystem :where(.card,.panel,.hero,.lessonCard,.studio,.chooser,.stage,.messageCard,.visualCard,.exercisePanel,.summaryPanel){height:auto!important;max-height:none!important;overflow:visible!important} html.cwLearningSystem :where(.cwLessonPage,.wrap,.content,.assessmentMain,.modContent,.introMain){max-width:1500px!important} html.cwLearningSystem :where(.eyebrow,.step,.guideHeading,.cwLessonEyebrow,.cwSectionLabel,.sectionLabel,.sectionTitle,.gpsTitle){ color:var(--cw-blue)!important; font-family:var(--cw-font)!important; font-size:.72rem!important; font-weight:720!important; letter-spacing:.1em!important; text-transform:uppercase!important; } html.cwLearningSystem :where(h1,.lessonTitle h1,.chooser h1,.introTop h1){ color:var(--cw-text)!important; font-size:clamp(2rem,3.4vw,3.25rem)!important; font-weight:710!important; letter-spacing:-.05em!important; line-height:1.03!important; } html.cwLearningSystem :where(.lead,.copy,.context,.lessonTitle p,.introTop p){color:#b8c0cc!important;font-size:.95rem!important;line-height:1.58!important} html.cwLearningSystem :where(.haIntroPanel.message,.cwLessonMessage,.why,.takeaway,.notice,.listenFor,.keyIdea,.cwCurrentMove){ border-color:#2d2945!important; border-left:2px solid rgba(154,140,255,.55)!important; border-radius:8px!important; background:linear-gradient(120deg,rgba(76,62,142,.105),rgba(14,18,25,.32))!important; box-shadow:none!important; } html.cwLearningSystem :where(.haIntroPanel.message> b,.messageHeading,.takeaway b,.why b,.notice b,.keyIdea b){color:var(--cw-violet-soft)!important} /* Controls: white primary, blue selected, neutral secondary */ html.cwLearningSystem :where(button,.btn,select,input[type="button"],input[type="submit"]){ border-radius:7px!important; box-shadow:none!important; transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease!important; } html.cwLearningSystem :where(button,.btn):not(.white-key):not(.black-key){min-height:38px} html.cwLearningSystem :where(button,.btn):not(.primary):not(.good):not(.cwPrimaryButton):not(.cwUnifiedNavNext):not(.cwCanvasHit):not(.cwHearingStageHit):not(.keyHit):not(.white-key):not(.black-key):not([data-ui="hit-area"]){border-color:var(--cw-border-strong)!important;background:#0c1118!important;color:#b7c0cd!important} html.cwLearningSystem :where(button,.btn):not(.primary):not(.good):not(.cwPrimaryButton):not(.cwUnifiedNavNext):not(.cwCanvasHit):not(.cwHearingStageHit):not(.keyHit):not(.white-key):not(.black-key):not([data-ui="hit-area"]):hover{border-color:#445268!important;background:#121923!important;color:var(--cw-text)!important} html.cwLearningSystem :where(button.primary,button.good,a.primary,a.good,input.primary,input.good,.btn.primary,.btn.good,.cwPrimaryButton){border-color:#f0f3f8!important;background:#f0f3f8!important;color:#11151c!important} html.cwLearningSystem :where(button.primary,button.good,a.primary,a.good,input.primary,input.good,.btn.primary,.btn.good,.cwPrimaryButton):hover{background:#fff!important;color:#080a0d!important} html.cwLearningSystem :where(button.active,.btn.active,[aria-pressed="true"],.selected):not(.cwCanvasHit):not(.cwHearingStageHit):not(.keyHit):not([data-ui="hit-area"]){border-color:#3b6596!important;background:#13233a!important;color:#eaf3ff!important;box-shadow:inset 0 -2px 0 rgba(111,168,255,.72)!important} html.cwLearningSystem :where(select,input,textarea){border:1px solid var(--cw-border-strong)!important;border-radius:7px!important;background:#0a0e14!important;color:var(--cw-text)!important;box-shadow:none!important} /* Diagram hit areas are controls for accessibility, not visible buttons. Keep them transparent so the canvas/SVG artwork beneath remains visible. */ html.cwLearningSystem :where(button.cwCanvasHit,button.cwHearingStageHit,button.keyHit,[data-ui="hit-area"]){ min-width:0!important; min-height:0!important; padding:0!important; border-color:transparent!important; border-radius:5px!important; background:transparent!important; color:transparent!important; box-shadow:none!important; } html.cwLearningSystem :where(button.cwCanvasHit,button.cwHearingStageHit,button.keyHit,[data-ui="hit-area"]):hover, html.cwLearningSystem :where(button.cwCanvasHit,button.cwHearingStageHit,button.keyHit,[data-ui="hit-area"])[aria-pressed="true"], html.cwLearningSystem :where(button.cwCanvasHit,button.cwHearingStageHit,button.keyHit,[data-ui="hit-area"]).active{ border-color:transparent!important; background:transparent!important; color:transparent!important; box-shadow:none!important; } /* Music remains the only place for yellow or green emphasis. */ html.cwLearningSystem :where(.tone,.semi,.current,.activeNote,.currentNote,.newest,.bass,.tonic,.dominant,.subdominant){text-shadow:none!important} html.cwLearningSystem :where(.tone,.current,.newest,.bass){--music-accent:var(--cw-yellow)} html.cwLearningSystem :where(.success,.correct,.complete,.completed){--status-accent:var(--cw-green)} /* Foundation family: title and objective never compete for width. */ html.cwLearningSystem.cwFoundationFamily .main{padding:0 30px 54px!important} html.cwLearningSystem.cwFoundationFamily .wrap{width:min(1500px,100%)!important;margin:0!important;padding-top:18px!important;gap:14px!important} html.cwLearningSystem.cwFoundationFamily .haIntroGrid{ grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr)!important; gap:10px!important; padding:0!important; border:0!important; background:transparent!important; } html.cwLearningSystem.cwFoundationFamily .haTitlePanel{padding:17px 18px!important;background:var(--cw-surface)!important} html.cwLearningSystem.cwFoundationFamily .haIntroPanel{padding:17px 18px!important} html.cwLearningSystem.cwFoundationFamily .haPathDisclosure{grid-column:1/-1!important;padding:12px 15px!important;background:var(--cw-surface-soft)!important} html.cwLearningSystem.cwFoundationFamily .haPathDisclosure:not([open]){max-height:48px!important;overflow:hidden!important} html.cwLearningSystem.cwFoundationFamily .haTitlePanel h1{font-size:clamp(1.9rem,3vw,2.75rem)!important;overflow-wrap:normal!important} html.cwLearningSystem.cwFoundationFamily .haStackedLesson{grid-template-columns:minmax(330px,.75fr) minmax(520px,1.25fr)!important;gap:14px!important} html.cwLearningSystem.cwFoundationFamily .haKeyboardArea>.card:not(:first-child){margin-top:0!important} /* Focused comparisons: keep the interaction and keyboard together. */ html.cwLearningSystem.cwFocusedFamily .academyShell{grid-template-columns:248px minmax(0,1fr)!important;background:transparent!important} html.cwLearningSystem.cwFocusedFamily .lesson{width:auto!important;max-width:none!important;padding:0 30px 54px!important} html.cwLearningSystem.cwFocusedFamily .lessonHeader{margin-top:18px!important;grid-template-columns:minmax(320px,.7fr) minmax(460px,1.3fr)!important;gap:14px!important} html.cwLearningSystem.cwFocusedFamily .actionPanel{margin-top:14px!important} html.cwLearningSystem.cwFocusedFamily .demo{margin-top:14px!important;grid-template-rows:auto auto minmax(280px,auto)!important} html.cwLearningSystem.cwFocusedFamily .takeaway{margin-top:14px!important} /* Chord construction and application workspaces. */ html.cwLearningSystem.cwApplicationFamily .main{padding:0 30px 54px!important} html.cwLearningSystem.cwApplicationFamily :where(.top,.controlbar,.content,.workspace){width:min(1500px,100%)!important;margin-left:0!important;margin-right:0!important} html.cwLearningSystem.cwApplicationFamily .top{margin-top:18px!important} html.cwLearningSystem.cwApplicationFamily .row{gap:14px!important} html.cwLearningSystem.cwApplicationFamily :where(.card,.panel,.infoLite,.keyboardPanel,.canvasCard){border-radius:var(--cw-radius)!important} /* Standalone families share the same left-aligned content measure. */ html.cwLearningSystem.cwStandaloneFamily .main{padding:0 30px 54px!important} html.cwLearningSystem.cwStandaloneFamily :where(.top,.gpsPanel,.modContent,.workspace,.introMain,.content,.assessmentMain){width:min(1500px,100%)!important;margin-left:0!important;margin-right:0!important} html.cwLearningSystem.cwStandaloneFamily :where(.top,.introTop){margin-top:18px!important} /* Rhythm and modulation: activity first, theory is visually quieter. */ html.cwLearningSystem.cwRhythmFamily .workspace{grid-template-columns:minmax(290px,.64fr) minmax(0,1.36fr)!important;gap:14px!important} html.cwLearningSystem.cwRhythmFamily .lessonCard{padding:18px!important} html.cwLearningSystem.cwRhythmFamily .studio{padding:16px!important} html.cwLearningSystem.cwRhythmFamily :where(.timelineWrap,.demonstration,.metronomePane,.newConcept,.readoutRow,.visualMetronomeWrap){border-color:var(--cw-border)!important;background:var(--cw-surface-soft)!important} html.cwLearningSystem.cwRhythmFamily .metronomePane.transportOnly .transport, html.cwLearningSystem.cwModulationFamily .transport{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px!important} html.cwLearningSystem.cwRhythmFamily .cwTransportIcon, html.cwLearningSystem.cwModulationFamily .cwTransportIcon{ position:static!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; width:auto!important; min-width:70px!important; height:38px!important; min-height:38px!important; padding:0 11px!important; overflow:visible!important; border-radius:7px!important; font-size:.72rem!important; line-height:1!important; text-indent:0!important; white-space:nowrap!important; } html.cwLearningSystem.cwRhythmFamily .cwTransportIcon::before, html.cwLearningSystem.cwRhythmFamily .cwTransportIcon::after, html.cwLearningSystem.cwModulationFamily .cwTransportIcon::before, html.cwLearningSystem.cwModulationFamily .cwTransportIcon::after{display:none!important;content:none!important} html.cwLearningSystem.cwModulationFamily .lessonGrid{grid-template-columns:minmax(300px,.68fr) minmax(0,1.32fr)!important;gap:14px!important} html.cwLearningSystem.cwModulationFamily :where(.degreeBoard,.chordTonesPanel,.transport,.stepCard){border-color:var(--cw-border)!important;background:var(--cw-surface-soft)!important} /* Reading and introduction pages: shorter lines and progressive disclosure. */ html.cwLearningSystem.cwReadingFamily .introMain{max-width:1220px!important;padding-bottom:64px!important} html.cwLearningSystem.cwReadingFamily .introTop h1{max-width:900px!important} html.cwLearningSystem.cwReadingFamily .messageCard{max-width:720px!important} html.cwLearningSystem.cwIntroFlowFamily .main{max-width:1500px!important;margin:0!important} html.cwLearningSystem.cwStandaloneFamily body.cwViewportIntroduction .main{margin-left:0!important} html.cwLearningSystem.cwStandaloneFamily body.cwViewportIntroduction:has(>.cw-global-side)>.app{margin-left:0!important} html.cwLearningSystem.cwIntroFlowFamily .stage{grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr)!important;gap:14px!important} html.cwLearningSystem.cwIntroFlowFamily .answer{max-width:65ch!important} /* Mastery keeps the prompt and response as the primary working surface. */ html.cwLearningSystem.cwMasteryFamily :where(.content,.assessmentMain){margin-left:0!important;margin-right:0!important} html.cwLearningSystem.cwMasteryFamily :where(.compactAssessmentBar,.exercisePanel,.summaryPanel){border-color:var(--cw-border)!important;background:var(--cw-surface)!important} html.cwLearningSystem.cwMasteryFamily :where(.prompt,.answerArea,.feedback,.resultBanner,.visual){border-color:var(--cw-border-strong)!important;background:var(--cw-surface-soft)!important;box-shadow:none!important} html.cwLearningSystem.cwMasteryFamily .choice{border-color:var(--cw-border)!important;background:#0c1118!important;color:var(--cw-text-soft)!important} html.cwLearningSystem.cwMasteryFamily .choice:hover{border-color:#44648c!important;background:#111b29!important;color:var(--cw-text)!important} /* Lesson menus become scannable lists rather than dense walls of boxes. */ html.cwLearningSystem :where(.lessonOverlay,.cwAcademyOverlay,#cwAcademyIntroductionOverlay){background:rgba(3,5,8,.82)!important;backdrop-filter:blur(12px)!important} html.cwLearningSystem :where(.menuPanel,.cwAcademyIntroductionPage,.cwAcademyRoadmapDialog){ border:1px solid var(--cw-border-strong)!important; border-radius:12px!important; background:#0b1017!important; box-shadow:var(--cw-shadow)!important; } html.cwLearningSystem :where(.menuGroup,.menuLesson,.cwAcademyIntroductionGrid article,.cwAcademyPathGrid div){ border-color:var(--cw-border)!important; border-radius:8px!important; background:var(--cw-surface)!important; box-shadow:none!important; } html.cwLearningSystem :where(.menuLesson,.cwAcademyPathGrid div):hover{border-color:#3a5577!important;background:#101923!important} /* Welcome page uses the same system, without presenting as a pop-up. */ html.cwLearningSystem body.cwAcademyHome #cwAcademyIntroductionOverlay{ position:absolute!important; inset:0 0 0 248px!important; padding:28px 34px 54px!important; background:transparent!important; backdrop-filter:none!important; } html.cwLearningSystem body.cwAcademyHome .cwAcademyIntroductionPage{ width:min(1220px,100%)!important; max-height:none!important; margin:0!important; padding:40px!important; border-color:var(--cw-border)!important; background:linear-gradient(145deg,rgba(255,255,255,.012),transparent 38%),var(--cw-surface)!important; } html.cwLearningSystem body.cwAcademyHome .cwAcademyIntroductionGrid{gap:12px!important} html.cwLearningSystem body.cwAcademyHome .cwAcademyIntroductionGrid article{padding:18px!important} html.cwLearningSystem body.cwAcademyHome :where(.cwAcademyJourney button,.cwAcademyWelcomeReturn,.cwAcademyExploreLesson){border-radius:7px!important;box-shadow:none!important} html.cwLearningSystem body.cwAcademyHome .cwAcademyExploreLesson{ border-color:#f0f3f8!important; background:#f0f3f8!important; color:#11151c!important; } html.cwLearningSystem body.cwAcademyHome .cwAcademyExploreLesson:hover{background:#fff!important;color:#080a0d!important} html.cwLearningSystem body.cwAcademyHome .cwAcademyWelcomeReturn{border-color:var(--cw-border-strong)!important;background:#0c1118!important;color:var(--cw-text-soft)!important} /* Reusable course rail — one hierarchy, with the active path's lessons inline. */ html.cwLearningSystem :where(.side,.cw-global-side,.academyNav,.cwkUnifiedSide){ padding:18px 12px 22px!important; } html.cwLearningSystem .cwAcademyTools{ margin:0 0 16px!important; padding:0!important; border:0!important; background:transparent!important; } html.cwLearningSystem .cwAcademyToolsTitle{margin:0 6px 8px!important} html.cwLearningSystem .cwAcademyMainLabel{margin:0 7px 8px!important} html.cwLearningSystem .cwAcademyStage{ margin:2px 0!important; border:0!important; background:transparent!important; } html.cwLearningSystem .cwAcademyStage>summary{ display:grid!important; grid-template-columns:28px minmax(0,1fr) 14px!important; align-items:center!important; gap:8px!important; min-height:46px!important; padding:7px 8px!important; border:1px solid transparent!important; border-radius:8px!important; background:transparent!important; color:#9aa4b4!important; cursor:pointer!important; list-style:none!important; } html.cwLearningSystem .cwAcademyStage>summary::-webkit-details-marker{display:none!important} html.cwLearningSystem .cwAcademyStage>summary::after{ content:"+"!important; grid-column:3!important; grid-row:1!important; color:#637087!important; font-size:.82rem!important; font-weight:500!important; } html.cwLearningSystem .cwAcademyStage[open]>summary::after{content:"−"!important} html.cwLearningSystem .cwAcademyStage>summary>span{ display:grid!important; grid-row:1/span 2!important; place-items:center!important; width:27px!important; height:27px!important; border:1px solid var(--cw-border)!important; border-radius:7px!important; color:#748198!important; font-size:.63rem!important; font-weight:700!important; font-variant-numeric:tabular-nums!important; } html.cwLearningSystem .cwAcademyStage>summary>b{ grid-column:2!important; color:inherit!important; font-size:.76rem!important; font-weight:650!important; line-height:1.2!important; } html.cwLearningSystem .cwAcademyStage>summary>.cwStageProgress{ grid-column:2!important; color:#647187!important; font-size:.61rem!important; line-height:1.2!important; } html.cwLearningSystem .cwAcademyStage>summary:hover, html.cwLearningSystem .cwAcademyStage[open]>summary{ border-color:rgba(255,255,255,.06)!important; background:rgba(255,255,255,.028)!important; color:#edf1f7!important; } html.cwLearningSystem .cwAcademyStageItems{ margin:3px 0 10px 14px!important; padding:1px 0 1px 13px!important; border-left:1px solid rgba(120,173,240,.16)!important; } html.cwLearningSystem .cwStagePathLabel{ padding:7px 8px 3px!important; color:#68758a!important; font-size:.6rem!important; font-weight:700!important; letter-spacing:.09em!important; text-transform:uppercase!important; } html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton{ display:grid!important; grid-template-columns:minmax(0,1fr) 12px!important; min-height:38px!important; margin:1px 0!important; padding:7px 8px!important; border:1px solid transparent!important; border-radius:7px!important; background:transparent!important; color:#909bad!important; font-size:.7rem!important; font-weight:600!important; } html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton::before{display:none!important} html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton::after{ content:"›"!important; grid-column:2!important; color:#617089!important; } html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton small{ grid-column:1!important; color:#657187!important; font-size:.59rem!important; font-weight:450!important; } html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton:hover{ border-color:rgba(255,255,255,.055)!important; background:rgba(255,255,255,.032)!important; color:#eef3fa!important; } html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton.active{ border-color:rgba(120,173,240,.2)!important; background:linear-gradient(100deg,rgba(68,111,180,.2),rgba(110,87,190,.07))!important; color:#f4f7fb!important; box-shadow:inset 2px 0 0 var(--cw-blue)!important; } html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton[aria-expanded="true"]{ background:#171d29!important; border-color:#64748b!important; color:#f8fafc!important; } html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton[aria-expanded="true"]::after{ color:#b8c7dc!important; transform:rotate(90deg)!important; } html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton.active[aria-expanded="true"]{ border-color:rgba(120,173,240,.32)!important; background:linear-gradient(100deg,rgba(68,111,180,.2),rgba(110,87,190,.07))!important; box-shadow:inset 2px 0 0 var(--cw-blue)!important; } html.cwLearningSystem .cwStageLessonList{ display:grid!important; gap:1px!important; margin:3px 0 7px 5px!important; padding:3px 0 3px 9px!important; border-left:1px solid rgba(170,187,214,.12)!important; } html.cwLearningSystem .cwStageLessonList[hidden]{display:none!important} html.cwLearningSystem .cwStageLessonListLabel{ padding:4px 6px!important; color:#66758b!important; font-size:.58rem!important; font-weight:700!important; letter-spacing:.08em!important; text-transform:uppercase!important; } html.cwLearningSystem .cwStageLessonLink{ display:grid!important; grid-template-columns:34px minmax(0,1fr)!important; align-items:start!important; gap:4px!important; min-width:0!important; padding:6px!important; border:0!important; border-radius:6px!important; background:transparent!important; color:#7f8a9b!important; font-size:.66rem!important; font-weight:520!important; line-height:1.3!important; text-decoration:none!important; } html.cwLearningSystem .cwStageLessonLink>span{ color:#60718a!important; font-size:.59rem!important; font-variant-numeric:tabular-nums!important; } html.cwLearningSystem .cwStageLessonLink:hover{background:rgba(255,255,255,.035)!important;color:#eef3fa!important} html.cwLearningSystem .cwStageLessonLink.active{ background:rgba(87,132,203,.13)!important; color:#dceaff!important; } html.cwLearningSystem .cwStageIntroductionLink{ display:grid!important; grid-template-columns:24px minmax(0,1fr)!important; align-items:center!important; gap:7px!important; width:100%!important; margin:0 0 4px!important; padding:8px 6px!important; border:1px solid rgba(154,139,255,.25)!important; border-radius:6px!important; background:rgba(154,139,255,.08)!important; color:#d9ddff!important; font:600 .66rem/1.3 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important; text-align:left!important; cursor:pointer!important; } html.cwLearningSystem .cwStageIntroductionLink>span{ display:grid!important; place-items:center!important; width:19px!important; height:19px!important; border:1px solid rgba(174,190,255,.45)!important; border-radius:50%!important; color:#cbd4ff!important; font-size:.65rem!important; font-weight:750!important; } html.cwLearningSystem .cwStageIntroductionLink:hover, html.cwLearningSystem .cwStageIntroductionLink:focus-visible{ border-color:rgba(174,190,255,.6)!important; background:rgba(154,139,255,.14)!important; color:#fff!important; outline:none!important; } /* On-demand lesson guides share the same restrained, readable panel system. */ html.cwLearningSystem #cwAcademyIntroductionOverlay{font-family:var(--cw-font)!important} html.cwLearningSystem #cwAcademyIntroductionOverlay .cwAcademyIntroductionPage{ width:min(1040px,calc(100vw - 32px))!important; max-height:calc(100vh - 32px)!important; padding:clamp(20px,3vw,34px)!important; border-radius:12px!important; background:#0b1017!important; } html.cwLearningSystem #cwAcademyIntroductionOverlay .cwAcademyIntroductionKicker{ background:linear-gradient(90deg,var(--cw-blue),var(--cw-violet))!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; font-family:var(--cw-font)!important; font-size:.69rem!important; font-weight:720!important; letter-spacing:.12em!important; } html.cwLearningSystem #cwAcademyIntroductionOverlay h1{ margin:9px 0 8px!important; font-size:clamp(2rem,4vw,3.3rem)!important; font-weight:690!important; letter-spacing:-.05em!important; } html.cwLearningSystem #cwAcademyIntroductionOverlay .cwAcademyIntroductionQuestion{ max-width:760px!important; color:#c6ced9!important; font-size:clamp(1.05rem,1.8vw,1.35rem)!important; font-weight:480!important; line-height:1.5!important; } @media(max-width:1120px){ html.cwLearningSystem.cwFoundationFamily .haIntroGrid{grid-template-columns:1fr!important} html.cwLearningSystem.cwFoundationFamily .haPathDisclosure{grid-column:1!important} html.cwLearningSystem.cwFoundationFamily .haStackedLesson{grid-template-columns:minmax(290px,.72fr) minmax(430px,1.28fr)!important} html.cwLearningSystem.cwFocusedFamily .lessonHeader{grid-template-columns:1fr!important} } @media(max-width:900px){ html.cwLearningSystem body{margin-left:0!important} html.cwLearningSystem.cwFoundationFamily body.cwViewportFoundation.cwViewportDense.cwkUnifiedMenu{margin-left:0!important} html.cwLearningSystem body.cwkUnifiedMenu{width:100%!important;max-width:100%!important;margin-left:0!important} html.cwLearningSystem body.cwkUnifiedMenu>.app{width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1fr)!important} html.cwLearningSystem :where(.side,.academyNav,.cwkUnifiedSide,.cw-global-side){display:none!important} html.cwLearningSystem body.cwkUnifiedMenu>.cw-global-side{display:none!important} html.cwLearningSystem.cwStandaloneFamily body .app>.side{display:none!important} html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar{padding:0 16px!important} html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar::before{content:"";min-width:78px} html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavAbout{display:inline-flex!important} html.cwLearningSystem.cwFoundationFamily .main, html.cwLearningSystem.cwFocusedFamily .lesson, html.cwLearningSystem.cwApplicationFamily .main, html.cwLearningSystem.cwStandaloneFamily .main{padding:0 18px 44px!important} html.cwLearningSystem.cwFoundationFamily .haStackedLesson, html.cwLearningSystem.cwRhythmFamily .workspace, html.cwLearningSystem.cwModulationFamily .lessonGrid, html.cwLearningSystem.cwIntroFlowFamily .stage{grid-template-columns:1fr!important} html.cwLearningSystem.cwRhythmFamily body .workspace{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;max-width:100%!important} html.cwLearningSystem.cwRhythmFamily body .workspace>.cwLessonOrientation, html.cwLearningSystem.cwRhythmFamily body .workspace>.lessonCard, html.cwLearningSystem.cwRhythmFamily body .workspace>.studio{grid-column:1/-1!important;width:100%!important;max-width:100%!important;min-width:0!important} html.cwLearningSystem body.cwAcademyHome #cwAcademyIntroductionOverlay{inset:0!important;padding:16px!important} } @media(max-width:760px){ html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;min-height:0!important;gap:6px!important;padding:8px 10px 10px!important} html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar::before{content:"";display:block;grid-column:1/-1;width:100%;height:40px;min-width:0;margin:0!important} html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl{width:100%!important;min-height:38px!important;padding:0 8px!important;font-size:.72rem!important} html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavAbout{order:1} html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavMenu{order:2} html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavPrevious{order:3;max-width:none!important;margin-left:0!important;overflow:visible!important;box-shadow:none!important} html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavNext{order:4;margin-left:0!important} } @media(max-width:640px){ html.cwLearningSystem :where(h1,.lessonTitle h1,.chooser h1,.introTop h1){font-size:clamp(1.8rem,9vw,2.5rem)!important} html.cwLearningSystem.cwFoundationFamily .main, html.cwLearningSystem.cwFocusedFamily .lesson, html.cwLearningSystem.cwApplicationFamily .main, html.cwLearningSystem.cwStandaloneFamily .main{padding-left:12px!important;padding-right:12px!important} html.cwLearningSystem body.cwAcademyHome .cwAcademyIntroductionPage{padding:22px 18px!important} } @media(prefers-reduced-motion:reduce){ html.cwLearningSystem *,html.cwLearningSystem *::before,html.cwLearningSystem *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important} } /* Keyboard geometry system: consistent proportions for one-octave, comparison and extended instruments. */ html.cwLearningSystem.cwScalePilot .cwKeyboardCard>.keyboard, html.cwLearningSystem.cwFoundationFamily .haKeyboardArea .keyboard{ width:min(100%,780px)!important; height:auto!important; min-height:160px!important; max-height:280px!important; aspect-ratio:2.8 / 1!important; margin-right:auto!important; margin-left:auto!important; } html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard .keyboard{ width:min(100%,900px)!important; height:300px!important; min-height:0!important; max-height:300px!important; margin-right:auto!important; margin-left:auto!important; } html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard .whiteRow{ height:230px!important; } html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard .haAlignedTonicStrip{ width:min(100%,900px)!important; margin-right:auto!important; margin-left:auto!important; } html.cwLearningSystem.cwFocusedFamily .demo{ grid-template-rows:auto auto auto!important; } html.cwLearningSystem.cwFocusedFamily .demo>.choiceStrip, html.cwLearningSystem.cwFocusedFamily .demo>.keyboard{ width:min(100%,1180px)!important; margin-right:auto!important; margin-left:auto!important; } html.cwLearningSystem.cwFocusedFamily .demo>.keyboard{ height:auto!important; min-height:220px!important; max-height:290px!important; aspect-ratio:4 / 1!important; } html.cwLearningSystem.cwModulationFamily #modContent .keyboardPanel{ grid-template-rows:auto auto!important; min-height:0!important; } html.cwLearningSystem.cwModulationFamily #modContent .keyboardPanel>.keyboard{ width:100%!important; height:auto!important; min-height:220px!important; max-height:330px!important; aspect-ratio:4.2 / 1!important; } html.cwLearningSystem.cwModulationFamily #modContent .keyboardPanel>.keyboard>.blackKey{ height:58%!important; min-height:0!important; max-height:58%!important; } /* B077OO — keyboard paint ownership. These lesson engines own their musical overlays and note-role colours. Shared surface styling may size the instrument, but must not repaint it. */ html.cwLearningSystem.cwProgressionModernFamily .piano>.white-key, html.cwLearningSystem.cwProgressionModernFamily .piano>.black-key{ min-height:0!important; } html.cwLearningSystem.cwProgressionModernFamily .piano>.white-key{ border-width:0 1px 0 0!important; border-color:#88919d!important; background:linear-gradient(90deg,#f1f3f6,#dfe3e8 53%,#f6f7f8)!important; color:#171b22!important; } html.cwLearningSystem.cwProgressionModernFamily .piano>.white-key.highlight-tone{ background:linear-gradient(180deg,#dceaff,#9dc4fb)!important; } html.cwLearningSystem.cwProgressionModernFamily .piano>.white-key.highlight-bass{ background:linear-gradient(180deg,#fff8c7,#f2d55c)!important; box-shadow:inset 0 0 0 2px #d4b83a!important; } html.cwLearningSystem.cwProgressionModernFamily .piano>.black-key{ border-color:#05070a!important; background:linear-gradient(90deg,#07090c,#1d222a 54%,#050608)!important; color:#b8c0cc!important; } html.cwLearningSystem.cwProgressionModernFamily .piano>.black-key.highlight-tone{ border-color:#78adf0!important; background:linear-gradient(180deg,#34679f,#162c48)!important; color:#e9f3ff!important; } html.cwLearningSystem.cwProgressionModernFamily .piano>.black-key.highlight-bass{ border-color:#ffe878!important; background:linear-gradient(180deg,#d9bd42,#776014)!important; color:#fff8d8!important; box-shadow:0 0 18px rgba(242,213,92,.32)!important; } html.cwLearningSystem.cwModulationFamily #keyboard>.noteOverlay, html.cwLearningSystem.cwModulationFamily #keyboard>.whiteKey>.noteOverlay, html.cwLearningSystem.cwModulationFamily #keyboard>.blackKey>.noteOverlay{ display:block!important; visibility:visible!important; } @media(max-width:640px){ html.cwLearningSystem.cwScalePilot .cwKeyboardCard>.keyboard, html.cwLearningSystem.cwFoundationFamily .haKeyboardArea .keyboard{ min-height:150px!important; max-height:190px!important; aspect-ratio:2.35 / 1!important; } html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard .keyboard{ height:260px!important; max-height:260px!important; } html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard .whiteRow{ height:190px!important; } html.cwLearningSystem.cwFocusedFamily .demo{ max-width:100%!important; overflow-x:auto!important; overflow-y:hidden!important; } html.cwLearningSystem.cwFocusedFamily .demo>.choiceStrip, html.cwLearningSystem.cwFocusedFamily .demo>.keyboard{ width:690px!important; min-width:690px!important; max-width:690px!important; } html.cwLearningSystem.cwFocusedFamily .demo>.keyboard{ height:210px!important; min-height:210px!important; max-height:210px!important; aspect-ratio:auto!important; } html.cwLearningSystem.cwModulationFamily #modContent .keyboardPanel{ display:block!important; max-width:100%!important; overflow-x:auto!important; overflow-y:hidden!important; } html.cwLearningSystem.cwModulationFamily #modContent .keyboardPanel>.keyboard{ width:760px!important; min-width:760px!important; max-width:none!important; height:220px!important; min-height:220px!important; max-height:220px!important; aspect-ratio:auto!important; } } /* B077OA — one course rail and one keyboard sizing contract. Legacy lesson files may retain their original class names, but the shared runtime marks the active rail and each rendered instrument with these semantic classes. Family files no longer decide the final proportions. */ html.cwLearningSystem .cwLegacyRailSuppressed{display:none!important} html.cwLearningSystem .cwCourseRail{ width:248px!important; min-width:248px!important; max-width:248px!important; height:100vh!important; padding:18px 12px 22px!important; overflow-x:hidden!important; overflow-y:auto!important; border-right:1px solid #181e28!important; background:#080b10!important; box-shadow:none!important; scrollbar-width:thin!important; scrollbar-color:#344052 transparent!important; } html.cwLearningSystem .cwCourseRail>.cwAcademyBrandLockup{margin-bottom:18px!important} html.cwLearningSystem .cwCourseRail .cwAcademyStage, html.cwLearningSystem .cwCourseRail .cwAcademyCategoryButton, html.cwLearningSystem .cwCourseRail .cwStageLessonLink{font-family:var(--cw-font)!important} html.cwLearningSystem .cwKeyboardViewport{ min-width:0!important; max-width:100%!important; } html.cwLearningSystem .cwKeyboardInstrument{ box-sizing:border-box!important; margin-right:auto!important; margin-left:auto!important; transform:none!important; } html.cwLearningSystem .cwKeyboardOctave{ width:min(100%,780px)!important; height:auto!important; min-height:160px!important; max-height:280px!important; aspect-ratio:2.8 / 1!important; } html.cwLearningSystem .cwKeyboardOctave>.whiteRow{ width:100%!important; } html.cwLearningSystem .cwKeyboardOctave>.whiteRow>:is(.white,.w){ flex:1 1 0!important; min-width:0!important; } html.cwLearningSystem .cwKeyboardOctave.cwKeyboardAnnotated{ width:min(100%,780px)!important; height:284px!important; min-height:284px!important; max-height:284px!important; aspect-ratio:auto!important; padding:54px 18px 16px!important; } html.cwLearningSystem .cwKeyboardOctave.cwKeyboardAnnotated>.whiteRow{ display:grid!important; grid-template-columns:repeat(8,minmax(0,1fr))!important; height:214px!important; } html.cwLearningSystem .cwKeyboardCompactExtended{ width:min(100%,1080px)!important; height:auto!important; min-height:210px!important; max-height:280px!important; aspect-ratio:4 / 1!important; } html.cwLearningSystem .cwKeyboardTwoOctave{ width:min(100%,1100px)!important; height:auto!important; min-height:200px!important; max-height:280px!important; aspect-ratio:4.05 / 1!important; } html.cwLearningSystem .cwKeyboardWide{ width:min(100%,1180px)!important; height:auto!important; min-height:220px!important; max-height:300px!important; aspect-ratio:4.65 / 1!important; } html.cwLearningSystem :is(.cwKeyboardCompactExtended,.cwKeyboardTwoOctave,.cwKeyboardWide)>.blackKey, html.cwLearningSystem :is(.cwKeyboardCompactExtended,.cwKeyboardTwoOctave,.cwKeyboardWide)>.black-key{ height:60%!important; min-height:0!important; max-height:60%!important; } @media(max-width:1180px){ html.cwLearningSystem body .cwKeyboardViewport{overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important} html.cwLearningSystem .cwKeyboardCompactExtended{width:700px!important;min-width:700px!important;height:210px!important;min-height:210px!important;max-height:210px!important;aspect-ratio:auto!important} html.cwLearningSystem .cwKeyboardTwoOctave{width:760px!important;min-width:760px!important;height:210px!important;min-height:210px!important;max-height:210px!important;aspect-ratio:auto!important} html.cwLearningSystem .cwKeyboardWide{width:920px!important;min-width:920px!important;height:230px!important;min-height:230px!important;max-height:230px!important;aspect-ratio:auto!important} } @media(max-width:900px){ html.cwLearningSystem .cwCourseRail{display:none!important} html.cwLearningSystem .cwKeyboardOctave{width:min(100%,620px)!important;min-height:150px!important;max-height:220px!important;aspect-ratio:2.55 / 1!important} html.cwLearningSystem .cwKeyboardOctave.cwKeyboardAnnotated{width:620px!important;min-width:620px!important;height:250px!important;min-height:250px!important;max-height:250px!important;padding:48px 14px 14px!important} html.cwLearningSystem .cwKeyboardOctave.cwKeyboardAnnotated>.whiteRow{height:188px!important} } html.cwLearningSystem .cwKeyboardInstrument.cwKeyboardFixedMap{ width:calc(var(--whiteW) * 15)!important; min-width:calc(var(--whiteW) * 15)!important; max-width:none!important; height:calc(var(--whiteH) + 2px)!important; min-height:calc(var(--whiteH) + 2px)!important; max-height:calc(var(--whiteH) + 2px)!important; aspect-ratio:auto!important; } html.cwLearningSystem.cwFoundationFamily.ha-degree .cwKeyboardInstrument.cwKeyboardFixedMap{ --whiteH:218px!important; height:220px!important; min-height:220px!important; max-height:220px!important; } html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard>.cwKeyboardOctave.cwKeyboardAnnotated{ width:min(100%,780px)!important; min-width:0!important; max-width:780px!important; height:284px!important; min-height:284px!important; max-height:284px!important; padding:54px 18px 16px!important; } html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard>.cwKeyboardOctave.cwKeyboardAnnotated>.whiteRow{ display:grid!important; grid-template-columns:repeat(8,minmax(0,1fr))!important; width:100%!important; height:214px!important; } html.cwLearningSystem.cwModulationFamily #modContent .cwKeyboardViewport>.cwKeyboardWide{ width:min(100%,1180px)!important; min-width:0!important; max-width:1180px!important; height:auto!important; min-height:220px!important; max-height:300px!important; aspect-ratio:4.65 / 1!important; } /* B077OQ — all Interval lessons share the primary full-width keyboard. Its compact height keeps the complete lesson visible at the reference viewport. */ html.cwLearningSystem .cwIntervalKeyboardCard>.intervalKeyboard.cwKeyboardInstrument{ width:100%!important; min-width:0!important; max-width:none!important; height:220px!important; min-height:220px!important; max-height:220px!important; aspect-ratio:auto!important; } @media(max-width:760px){ html.cwLearningSystem .cwIntervalKeyboardCard>.intervalKeyboard.cwKeyboardInstrument{ width:760px!important; min-width:760px!important; max-width:760px!important; } } @media(max-width:1180px){ html.cwLearningSystem.cwModulationFamily #modContent .cwKeyboardViewport>.cwKeyboardWide{ width:920px!important; min-width:920px!important; max-width:920px!important; height:230px!important; min-height:230px!important; max-height:230px!important; aspect-ratio:auto!important; } } @media(max-width:900px){ html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard>.cwKeyboardOctave.cwKeyboardAnnotated{ width:620px!important; min-width:620px!important; max-width:620px!important; height:250px!important; min-height:250px!important; max-height:250px!important; padding:48px 14px 14px!important; } html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard>.cwKeyboardOctave.cwKeyboardAnnotated>.whiteRow{height:188px!important} } /* B077OV — shared keyboard-label readability standard. Geometry remains lesson-owned; this layer standardises contrast, type and clipping safety. */ :root{--cw-key-label-bg:#07101f;--cw-key-label-fg:#f7fbff;--cw-key-label-border:#dcecff;--cw-key-distance:#9bc7ff} .toneBadge,.degreeBadge,.keyboard .badge,.intervalKeyboard .badge,.piano .badge,.whiteCountBadge,.geometryCountBadge{box-sizing:border-box;font-family:Arial,system-ui,sans-serif;font-weight:950;line-height:1;text-shadow:none} .toneBadge{display:inline-flex!important;align-items:center;justify-content:center;min-width:36px;min-height:20px;max-width:76px;padding:3px 6px!important;border:1px solid var(--cw-key-label-border)!important;border-radius:7px!important;background:var(--cw-key-label-bg)!important;color:var(--cw-key-label-fg)!important;font-size:10px!important;white-space:nowrap!important;box-shadow:0 2px 7px rgba(0,0,0,.66)!important;z-index:50!important} .blackKey .toneBadge,.b .toneBadge{min-width:34px;max-width:68px;font-size:9.5px!important} .degreeBadge,.keyboard .badge,.intervalKeyboard .badge,.piano .badge{min-width:22px;min-height:20px;padding:3px 5px!important;border:1px solid var(--cw-key-label-border)!important;border-radius:7px!important;background:var(--cw-key-label-bg)!important;color:var(--cw-key-label-fg)!important;font-size:10px!important;white-space:nowrap!important;box-shadow:0 2px 7px rgba(0,0,0,.62)!important;z-index:48!important} .whiteCountBadge,.geometryCountBadge{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:19px!important;width:19px!important;height:19px!important;padding:0!important;border:1px solid #806d17!important;border-radius:50%!important;background:#ffe36d!important;color:#06101e!important;font-size:10px!important;z-index:48!important} .intervalDistanceLabel,.intervalOctaveLabel{padding:2px 7px!important;border:1px solid #5f88ba;border-radius:6px;background:var(--cw-key-label-bg)!important;color:#e8f4ff!important;box-shadow:0 2px 8px rgba(0,0,0,.7);text-shadow:none!important} .intervalDistanceBracket{border-color:var(--cw-key-distance)!important} .intervalAnchor{color:var(--cw-key-distance)!important;text-shadow:0 1px 2px #000,0 0 4px #07101f} @media(max-width:760px){.toneBadge{font-size:9px!important;min-width:32px;padding:3px 4px!important}.degreeBadge,.keyboard .badge,.intervalKeyboard .badge,.piano .badge{font-size:9px!important;padding:3px 4px!important}} /* B077PB · Rectangle lessons: compact, keyboard-first, cumulative accidentals */ html.cwFoundationFamily .haRectangleSupport { border: 1px solid var(--cw-border, #34435a); border-radius: 8px; background: rgba(8,13,22,.82); overflow: hidden; } html.cwFoundationFamily .haRectangleSupport > summary { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 7px 12px; cursor: pointer; color: var(--cw-text, #eef3ff); font-weight: 800; } html.cwFoundationFamily .haRectangleSupport > summary small { color: var(--cw-muted, #9aa6ba); font-weight: 600; } html.cwFoundationFamily .haRectangleSupportBody { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 0 8px 8px; } html.cwFoundationFamily .haTonicSupport { grid-column: 1 / -1; } html.cwFoundationFamily .haAccidentalSupportBody > * { min-width: 0; } @media (min-width:1181px) and (min-height:820px) { html.cwFoundationFamily.ha-tonic .main, html.cwFoundationFamily.ha-sharp .main, html.cwFoundationFamily.ha-flat .main { padding-top: 8px !important; padding-bottom: 8px !important; } html.cwFoundationFamily.ha-tonic .wrap, html.cwFoundationFamily.ha-sharp .wrap, html.cwFoundationFamily.ha-flat .wrap { gap: 8px !important; } html.cwFoundationFamily.ha-tonic .haIntroGrid, html.cwFoundationFamily.ha-sharp .haIntroGrid, html.cwFoundationFamily.ha-flat .haIntroGrid { gap: 8px !important; } html.cwFoundationFamily.ha-tonic .haTitlePanel, html.cwFoundationFamily.ha-sharp .haTitlePanel, html.cwFoundationFamily.ha-flat .haTitlePanel, html.cwFoundationFamily.ha-tonic .haIntroPanel, html.cwFoundationFamily.ha-sharp .haIntroPanel, html.cwFoundationFamily.ha-flat .haIntroPanel { padding: 10px 14px !important; min-height: 0 !important; } html.cwFoundationFamily.ha-tonic .haTitlePanel h1, html.cwFoundationFamily.ha-sharp .haTitlePanel h1, html.cwFoundationFamily.ha-flat .haTitlePanel h1 { font-size: clamp(30px,2.4vw,42px) !important; margin: 3px 0 4px !important; line-height: 1 !important; } html.cwFoundationFamily.ha-tonic .haTitlePanel .lead, html.cwFoundationFamily.ha-sharp .haTitlePanel .lead, html.cwFoundationFamily.ha-flat .haTitlePanel .lead { font-size: 14px !important; line-height: 1.25 !important; } html.cwFoundationFamily.ha-tonic .haPathDisclosure, html.cwFoundationFamily.ha-sharp .haPathDisclosure, html.cwFoundationFamily.ha-flat .haPathDisclosure { grid-column: 1 / -1; } html.cwFoundationFamily.ha-tonic .haPathDisclosure > summary, html.cwFoundationFamily.ha-sharp .haPathDisclosure > summary, html.cwFoundationFamily.ha-flat .haPathDisclosure > summary { min-height: 34px !important; padding: 6px 12px !important; } html.cwFoundationFamily.ha-tonic .grid { gap: 8px !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect { padding: 10px !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect h2 { margin-bottom: 5px !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect .copy { margin: 3px 0 !important; font-size: 13px !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect .metrics { gap: 6px !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect .metric { padding: 7px 9px !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect .metric small { margin-bottom: 2px !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect .metric b { font-size: 22px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard { margin-top: 0 !important; padding: 9px !important; } html.cwFoundationFamily.ha-tonic .haAlignedTonicStrip { gap: 5px !important; margin: 0 0 7px !important; } html.cwFoundationFamily.ha-tonic .haAlignedTonicStrip .cell { min-height: 53px !important; padding: 5px !important; border-radius: 7px !important; } html.cwFoundationFamily.ha-tonic .haAlignedTonicStrip .cell b { font-size: 18px !important; } html.cwFoundationFamily.ha-tonic .haAlignedTonicStrip .cell span { margin-top: 2px !important; font-size: 14px !important; } html.cwFoundationFamily.ha-tonic .haAlignedTonicStrip .cell.active:after { bottom: -8px !important; border-left-width: 7px !important; border-right-width: 7px !important; border-top-width: 8px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .keyboard { height: 235px !important; padding: 39px 14px 12px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .whiteRow { height: 176px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .black { top: 39px !important; height: 108px !important; padding-top: 61px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .brace { top: 11px !important; height: 19px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .brace span { top: -22px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .belowRules { display: none !important; } html.cwFoundationFamily.ha-sharp .haAccidentalControls, html.cwFoundationFamily.ha-flat .haAccidentalControls { padding: 8px 10px !important; margin: 0 0 5px !important; } html.cwFoundationFamily.ha-sharp .haAccidentalControls h2, html.cwFoundationFamily.ha-flat .haAccidentalControls h2 { margin: 0 0 3px !important; font-size: 12px !important; } html.cwFoundationFamily.ha-sharp .haAccidentalControls .copy, html.cwFoundationFamily.ha-flat .haAccidentalControls .copy { margin: 0 0 5px !important; font-size: 13px !important; } html.cwFoundationFamily.ha-sharp .tRow, html.cwFoundationFamily.ha-flat .tRow { margin-top: 3px !important; } html.cwFoundationFamily.ha-sharp .tBtn, html.cwFoundationFamily.ha-flat .tBtn { min-height: 58px !important; padding: 5px 3px !important; } html.cwFoundationFamily.ha-sharp .tBtn .tonic, html.cwFoundationFamily.ha-flat .tBtn .tonic { font-size: 21px !important; line-height: 1 !important; } html.cwFoundationFamily.ha-sharp .tBtn .tval, html.cwFoundationFamily.ha-flat .tBtn .tval { margin-top: 2px !important; font-size: 11px !important; } html.cwFoundationFamily.ha-sharp .tBtn .count, html.cwFoundationFamily.ha-flat .tBtn .count { margin-top: 2px !important; font-size: 11px !important; } html.cwFoundationFamily.ha-sharp .tBtn.active:after, html.cwFoundationFamily.ha-flat .tBtn.active:after { bottom: -9px !important; border-left-width: 7px !important; border-right-width: 7px !important; border-top-width: 8px !important; } html.cwFoundationFamily.ha-sharp .haAccidentalProgress, html.cwFoundationFamily.ha-flat .haAccidentalProgress { grid-template-columns: 210px minmax(0,1fr) !important; gap: 5px !important; padding: 5px 7px !important; } html.cwFoundationFamily .haProgressTitle b { font-size: 12px !important; } html.cwFoundationFamily .haProgressTitle span { font-size: 10px !important; line-height: 1.15 !important; } html.cwFoundationFamily .haProgressRow { gap: 4px !important; } html.cwFoundationFamily .haProgressStep { min-height: 45px !important; padding: 3px !important; } html.cwFoundationFamily .haProgressStep small, html.cwFoundationFamily .haProgressStep span { font-size: 9px !important; line-height: 1 !important; } html.cwFoundationFamily .haProgressStep b { margin: 1px 0 !important; font-size: 14px !important; } html.cwFoundationFamily .haProgressStep.previous { opacity: 1 !important; border-color: #84c4ff !important; background: rgba(70,126,201,.34) !important; color: #fff !important; } html.cwFoundationFamily .haProgressStep.current { opacity: 1 !important; border-color: #ffe36d !important; background: rgba(255,227,109,.2) !important; color: #ffe36d !important; box-shadow: inset 0 0 0 1px rgba(255,227,109,.32) !important; } html.cwFoundationFamily .haProgressStep.future { opacity: .55 !important; } html.cwFoundationFamily.ha-sharp .haAccidentalKeyboard, html.cwFoundationFamily.ha-flat .haAccidentalKeyboard { padding: 8px !important; } html.cwFoundationFamily.ha-sharp .keyboardShell, html.cwFoundationFamily.ha-flat .keyboardShell { padding: 7px 10px 9px !important; } html.cwFoundationFamily.ha-sharp .legend, html.cwFoundationFamily.ha-flat .legend { margin: 0 0 3px !important; gap: 14px !important; font-size: 11px !important; } html.cwFoundationFamily.ha-sharp .legend .sw, html.cwFoundationFamily.ha-flat .legend .sw { width: 14px !important; height: 14px !important; margin-right: 4px !important; } html.cwFoundationFamily.ha-sharp .keyboardNote, html.cwFoundationFamily.ha-flat .keyboardNote { font-size: 10px !important; line-height: 1.15 !important; } html.cwFoundationFamily.ha-sharp .viewport, html.cwFoundationFamily.ha-flat .viewport { min-height: 220px !important; padding-top: 26px !important; } html.cwFoundationFamily.ha-sharp { --whiteH: 188px !important; } html.cwFoundationFamily.ha-flat { --whiteH: 188px !important; } html.cwFoundationFamily.ha-sharp .black, html.cwFoundationFamily.ha-flat .black { height: 116px !important; } html.cwFoundationFamily.ha-sharp .result, html.cwFoundationFamily.ha-flat .result { grid-template-columns: repeat(3,minmax(0,1fr)) !important; margin-top: 0 !important; } html.cwFoundationFamily.ha-sharp .resultBox, html.cwFoundationFamily.ha-flat .resultBox { min-height: 58px !important; padding: 7px 9px !important; } html.cwFoundationFamily.ha-sharp .resultBox small, html.cwFoundationFamily.ha-flat .resultBox small { margin-bottom: 2px !important; font-size: 9px !important; } html.cwFoundationFamily.ha-sharp .resultBox .big, html.cwFoundationFamily.ha-flat .resultBox .big { font-size: 19px !important; } html.cwFoundationFamily.ha-sharp .resultBox .line, html.cwFoundationFamily.ha-flat .resultBox .line { margin-top: 2px !important; font-size: 11px !important; line-height: 1.15 !important; } html.cwFoundationFamily .haRectangleSupport > summary { min-height: 32px; padding: 5px 10px; font-size: 12px; } } @media (max-width:1180px) { html.cwFoundationFamily .haRectangleSupportBody { grid-template-columns: 1fr; } } /* B077PC · Reclaim control height and preserve familiar keyboard geometry. */ @media (min-width:1181px) and (min-height:820px) { html.cwFoundationFamily.ha-tonic .wrap, html.cwFoundationFamily.ha-sharp .wrap, html.cwFoundationFamily.ha-flat .wrap { padding-top: 8px !important; gap: 6px !important; } html.cwFoundationFamily.ha-tonic .haIntroGrid, html.cwFoundationFamily.ha-sharp .haIntroGrid, html.cwFoundationFamily.ha-flat .haIntroGrid { gap: 6px !important; } html.cwFoundationFamily.ha-tonic .haTitlePanel, html.cwFoundationFamily.ha-sharp .haTitlePanel, html.cwFoundationFamily.ha-flat .haTitlePanel, html.cwFoundationFamily.ha-tonic .haIntroPanel, html.cwFoundationFamily.ha-sharp .haIntroPanel, html.cwFoundationFamily.ha-flat .haIntroPanel { padding: 7px 12px !important; } html.cwFoundationFamily.ha-tonic .haPathDisclosure, html.cwFoundationFamily.ha-sharp .haPathDisclosure, html.cwFoundationFamily.ha-flat .haPathDisclosure { padding: 5px 12px !important; } html.cwFoundationFamily.ha-tonic .haPathDisclosure:not([open]), html.cwFoundationFamily.ha-sharp .haPathDisclosure:not([open]), html.cwFoundationFamily.ha-flat .haPathDisclosure:not([open]) { max-height: 36px !important; } /* Tonic: remove repeated prose above the keyboard, not keyboard height. */ html.cwFoundationFamily.ha-tonic .haTonicSelect { padding: 7px 9px !important; min-height: 0 !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect .copy { display: none !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect h2 { margin: 0 0 4px !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect .metric { min-height: 49px !important; padding: 5px 8px !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect .metric small { font-size: 10px !important; } html.cwFoundationFamily.ha-tonic .haTonicSelect .metric b { font-size: 19px !important; line-height: 1.05 !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard { padding: 7px 9px 8px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard > h2 { margin: 0 0 3px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard > .copy { margin: 0 0 4px !important; font-size: 12px !important; line-height: 1.2 !important; } html.cwFoundationFamily.ha-tonic .haAlignedTonicStrip { margin: 0 0 5px !important; } html.cwFoundationFamily.ha-tonic .haAlignedTonicStrip .cell { min-height: 46px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .keyboard { height: 245px !important; min-height: 245px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .whiteRow { height: 186px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .black { height: 116px !important; } /* Sharp/flat tonic choice: one shallow control rail. */ html.cwFoundationFamily.ha-sharp .haAccidentalControls, html.cwFoundationFamily.ha-flat .haAccidentalControls { padding: 6px 8px !important; margin: 0 !important; } html.cwFoundationFamily.ha-sharp .haAccidentalControls .copy, html.cwFoundationFamily.ha-flat .haAccidentalControls .copy { display: none !important; } html.cwFoundationFamily.ha-sharp .haAccidentalControls h2, html.cwFoundationFamily.ha-flat .haAccidentalControls h2 { margin: 0 0 4px !important; } html.cwFoundationFamily.ha-sharp .tRow, html.cwFoundationFamily.ha-flat .tRow { margin: 0 !important; gap: 4px !important; } html.cwFoundationFamily.ha-sharp .tBtn, html.cwFoundationFamily.ha-flat .tBtn { min-height: 45px !important; height: 45px !important; padding: 3px 4px !important; display: grid !important; grid-template-columns: auto auto auto !important; align-items: center !important; justify-content: center !important; column-gap: 7px !important; } html.cwFoundationFamily.ha-sharp .tBtn .tonic, html.cwFoundationFamily.ha-flat .tBtn .tonic { font-size: 18px !important; } html.cwFoundationFamily.ha-sharp .tBtn .tval, html.cwFoundationFamily.ha-flat .tBtn .tval, html.cwFoundationFamily.ha-sharp .tBtn .count, html.cwFoundationFamily.ha-flat .tBtn .count { margin: 0 !important; font-size: 10px !important; white-space: nowrap !important; } /* Cumulative order adviser: fixed shallow height with no stretched cells. */ html.cwFoundationFamily.ha-sharp .haAccidentalProgress, html.cwFoundationFamily.ha-flat .haAccidentalProgress { height: 58px !important; min-height: 58px !important; max-height: 58px !important; grid-template-columns: 175px minmax(0,1fr) !important; align-items: stretch !important; padding: 4px 6px !important; } html.cwFoundationFamily .haProgressTitle { min-height: 0 !important; padding: 4px 7px !important; } html.cwFoundationFamily .haProgressTitle span { margin-top: 2px !important; font-size: 9px !important; } html.cwFoundationFamily .haProgressRow { min-height: 0 !important; height: 48px !important; align-items: stretch !important; } html.cwFoundationFamily .haProgressStep { min-height: 0 !important; height: 48px !important; padding: 2px !important; } /* Restore the musical surface to near-standard Academy proportions. */ html.cwFoundationFamily.ha-sharp { --whiteH: 220px !important; --blackH: 138px !important; } html.cwFoundationFamily.ha-flat { --whiteH: 220px !important; --blackH: 138px !important; } html.cwFoundationFamily.ha-sharp .haAccidentalKeyboard, html.cwFoundationFamily.ha-flat .haAccidentalKeyboard { padding: 6px 8px !important; } html.cwFoundationFamily.ha-sharp .haAccidentalKeyboard > h2, html.cwFoundationFamily.ha-flat .haAccidentalKeyboard > h2 { margin: 0 0 4px !important; } html.cwFoundationFamily.ha-sharp .keyboardShell, html.cwFoundationFamily.ha-flat .keyboardShell { padding: 6px 9px 8px !important; } html.cwFoundationFamily.ha-sharp .viewport, html.cwFoundationFamily.ha-flat .viewport { min-height: 252px !important; padding-top: 30px !important; } html.cwFoundationFamily.ha-sharp .black, html.cwFoundationFamily.ha-flat .black { height: var(--blackH) !important; padding-top: 78px !important; } /* One concise adviser row directly under the keyboard. */ html.cwFoundationFamily.ha-sharp .haAccidentalResult, html.cwFoundationFamily.ha-flat .haAccidentalResult { gap: 5px !important; } html.cwFoundationFamily.ha-sharp .haAccidentalResult .resultBox, html.cwFoundationFamily.ha-flat .haAccidentalResult .resultBox { min-height: 48px !important; padding: 5px 8px !important; } html.cwFoundationFamily.ha-sharp .haAccidentalResult .sharpList, html.cwFoundationFamily.ha-flat .haAccidentalResult .flatList { margin-top: 2px !important; gap: 5px !important; } html.cwFoundationFamily.ha-sharp .haAccidentalResult .sharpPill, html.cwFoundationFamily.ha-flat .haAccidentalResult .flatPill { font-size: 15px !important; } } /* B077PE · Flat-side formula is a primary, dynamic teaching cue. */ html.cwFoundationFamily.ha-flat .flatFormulaBanner { display: grid; grid-template-columns: 150px 245px minmax(0,1fr); align-items: center; gap: 10px; min-height: 40px; padding: 5px 9px; border: 1px solid #ffb0a7; border-radius: 7px; background: linear-gradient(90deg,rgba(255,156,143,.13),rgba(8,13,22,.88)); } html.cwFoundationFamily.ha-flat .flatFormulaBanner b { color: #ffb0a7; font-size: 10px; letter-spacing: 1.3px; } html.cwFoundationFamily.ha-flat .flatFormulaBanner strong { color: #ffe36d; font-size: 16px; white-space: nowrap; } html.cwFoundationFamily.ha-flat .flatFormulaBanner span { color: #eef3ff; font-size: 12px; font-weight: 750; line-height: 1.2; } @media (min-width:1181px) and (min-height:820px) { html.cwFoundationFamily.ha-flat .haAccidentalControls { height: 105px !important; min-height: 105px !important; max-height: 105px !important; overflow: visible !important; } html.cwFoundationFamily.ha-flat .haAccidentalControls h2 { margin-bottom: 3px !important; } html.cwFoundationFamily.ha-flat .flatFormulaBanner { min-height: 36px; padding-top: 3px; padding-bottom: 3px; } html.cwFoundationFamily.ha-flat .tRow { margin-top: 3px !important; } } @media (max-width:1180px) { html.cwFoundationFamily.ha-flat .flatFormulaBanner { grid-template-columns: 1fr; gap: 3px; } html.cwFoundationFamily.ha-flat .flatFormulaBanner strong { white-space: normal; } } /* B077PH · Unified tonic/newest language and two-octave Tonic Values keyboard. */ html.cwFoundationFamily .keyboardStatus { display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 8px 16px; min-height: 28px; padding: 4px 8px; border: 1px solid rgba(113,227,126,.55); border-radius: 6px; background: rgba(9,16,27,.92); color: #dfe8f5; font-size: 11px; font-weight: 750; } html.cwFoundationFamily .keyboardStatus b { color: #71e37e; font-size: 12px; } html.cwFoundationFamily .sw.tonicSw { border: 3px solid #71e37e !important; background: rgba(113,227,126,.22); } /* TONIC is green everywhere; gold is reserved for the newest accidental. */ html.cwFoundationFamily.ha-sharp .tmark, html.cwFoundationFamily.ha-flat .tmark, html.cwFoundationFamily.ha-tonic .tonicMarker { width: auto !important; min-width: 43px !important; height: 19px !important; padding: 2px 5px !important; border: 1px solid #07101e !important; border-radius: 999px !important; background: #71e37e !important; color: #07101e !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 0 12px rgba(113,227,126,.78) !important; } html.cwFoundationFamily.ha-sharp .white.tonic, html.cwFoundationFamily.ha-flat .white.tonic, html.cwFoundationFamily.ha-tonic .white.tonicUnified { box-shadow: inset 0 0 0 4px #71e37e, inset 0 0 0 999px rgba(113,227,126,.18) !important; } html.cwFoundationFamily.ha-sharp .black.tonicSharp, html.cwFoundationFamily.ha-flat .black.tonicFlat, html.cwFoundationFamily.ha-tonic .black.tonicBlack { outline: 4px solid #71e37e !important; box-shadow: 0 0 20px rgba(113,227,126,.82),0 9px 14px #000a !important; } html.cwFoundationFamily .newMarker { position: absolute; top: 30px; left: 50%; z-index: 34; transform: translateX(-50%); padding: 2px 5px; border: 1px solid #07101e; border-radius: 999px; background: #ffe36d; color: #07101e; font-size: 8px; line-height: 1; font-style: normal; font-weight: 950; } html.cwFoundationFamily .black .keyName { position: absolute; left: 50%; bottom: 15px; z-index: 31; transform: translateX(-50%); font-size: 11px; font-weight: 950; } /* Two-octave keyboard for the complete signed T-value lesson. */ html.cwFoundationFamily.ha-tonic .haTonicKeyboard .keyboard { position: relative !important; width: 1110px !important; height: 265px !important; min-height: 265px !important; margin: 0 auto !important; padding: 0 !important; overflow: hidden !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .keyboardStatus { position: absolute; top: 5px; left: 8px; right: 8px; z-index: 40; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .whiteRow { position: absolute !important; left: 0 !important; top: 41px !important; display: flex !important; grid-template-columns: none !important; width: auto !important; height: 190px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .white { width: 74px !important; height: 190px !important; flex: 0 0 74px !important; padding-bottom: 15px !important; background: linear-gradient(90deg,#e8e8e8,#fff,#dedede) !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .white .note { margin-bottom: 4px !important; font-size: 20px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .white .val { font-size: 17px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .black { top: 41px !important; width: 46px !important; height: 120px !important; padding-top: 70px !important; font-size: 11px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .tonicMarker { top: 7px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .accidentalName { top: 42px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .newMarker { top: 63px; } html.cwFoundationFamily.ha-tonic .tonicKeyboardLegend { bottom: 5px !important; } html.cwFoundationFamily.ha-tonic .tonicKeyboardLegend .tonicKey::before { background: #71e37e !important; } /* Single-screen priority: move repeated result cards into optional review. */ @media (min-width:1181px) and (min-height:820px) { html.cwFoundationFamily.ha-tonic .haTonicKeyboard { padding-bottom: 6px !important; } html.cwFoundationFamily.ha-sharp .haAccidentalKeyboard, html.cwFoundationFamily.ha-flat .haAccidentalKeyboard { padding: 5px 7px !important; margin: 0 !important; } html.cwFoundationFamily.ha-sharp .keyboardStatus, html.cwFoundationFamily.ha-flat .keyboardStatus { min-height: 25px; padding: 3px 7px; } html.cwFoundationFamily.ha-sharp .legend, html.cwFoundationFamily.ha-flat .legend { margin: 3px 0 0 !important; } html.cwFoundationFamily.ha-sharp .viewport, html.cwFoundationFamily.ha-flat .viewport { min-height: 248px !important; padding-top: 27px !important; } html.cwFoundationFamily.ha-sharp .haAccidentalSupport, html.cwFoundationFamily.ha-flat .haAccidentalSupport { margin-top: 0 !important; } } @media (max-width:1180px) { html.cwFoundationFamily .keyboardStatus { grid-template-columns: 1fr; gap: 3px; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard { overflow-x: auto !important; } } /* B077PI · One fixed C-to-C keyboard reference across the Rectangle lessons. */ html.cwFoundationFamily.ha-tonic .haTonicKeyboard .white .tonicMarker, html.cwFoundationFamily.ha-sharp .white .tmark, html.cwFoundationFamily.ha-flat .white .tmark { left: 6px !important; top: 7px !important; transform: none !important; min-width: 0 !important; padding: 2px 5px !important; } /* Enharmonic aliases sit in the clear upper-right corner of a white key. */ html.cwFoundationFamily.ha-tonic .haTonicKeyboard .white .accidentalName, html.cwFoundationFamily.ha-sharp .white .enharmonic, html.cwFoundationFamily.ha-flat .white .enharmonic { left: auto !important; right: 5px !important; top: 8px !important; transform: none !important; white-space: nowrap !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .white .newMarker, html.cwFoundationFamily.ha-sharp .white .newMarker, html.cwFoundationFamily.ha-flat .white .newMarker { left: auto !important; right: 5px !important; top: 31px !important; transform: none !important; } /* Black-key badges use separate vertical lanes, leaving the note name clear. */ html.cwFoundationFamily.ha-tonic .haTonicKeyboard .black .tonicMarker, html.cwFoundationFamily.ha-sharp .black .tmark, html.cwFoundationFamily.ha-flat .black .tmark { left: 50% !important; top: 5px !important; transform: translateX(-50%) !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .black .newMarker, html.cwFoundationFamily.ha-sharp .black .newMarker, html.cwFoundationFamily.ha-flat .black .newMarker { top: 28px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .black > span, html.cwFoundationFamily.ha-sharp .black .keyName, html.cwFoundationFamily.ha-flat .black .keyName { bottom: 11px !important; } /* B077PJ · Extended fixed keyboard and tonic-upwards accidental register. */ html.cwFoundationFamily.ha-tonic .haTonicKeyboard .keyboard { width: 1102px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .white { width: 58px !important; flex: 0 0 58px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .black { width: 36px !important; font-size: 10px !important; } html.cwFoundationFamily.ha-sharp, html.cwFoundationFamily.ha-flat { --whiteW: 58px !important; --blackW: 36px !important; } html.cwFoundationFamily.ha-sharp .keyboard, html.cwFoundationFamily.ha-flat .keyboard { width: calc(var(--whiteW) * 19) !important; } html.cwFoundationFamily.ha-sharp .white .name, html.cwFoundationFamily.ha-flat .white .name { font-size: 20px !important; } html.cwFoundationFamily.ha-sharp .white .val, html.cwFoundationFamily.ha-flat .white .val { min-width: 38px !important; font-size: 15px !important; } html.cwFoundationFamily.ha-sharp .black, html.cwFoundationFamily.ha-flat .black { font-size: 10px !important; } /* B077PL · Canonical Rectangle keyboard labels shared by lessons 2.14–2.16. */ html.cwFoundationFamily.ha-tonic .haTonicKeyboard .black { height: 100px !important; padding: 0 !important; } html.cwFoundationFamily.ha-sharp .black, html.cwFoundationFamily.ha-flat .black { height: 108px !important; padding: 0 !important; } html.cwFoundationFamily .white .cwWhiteIdentity { position: absolute; left: 2px; right: 2px; bottom: 38px; z-index: 24; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: #07101e; text-align: center; line-height: 1; pointer-events: none; } html.cwFoundationFamily .white .cwWhiteIdentity b { font-size: 20px; font-weight: 950; text-shadow: 0 1px 0 #fff, 0 0 3px rgba(255,255,255,.9); } html.cwFoundationFamily .white .cwWhiteIdentity small { margin-top: 2px; padding: 1px 3px; border-radius: 3px; background: rgba(255,255,255,.82); color: #253247; font-size: 8px; font-weight: 900; white-space: nowrap; } html.cwFoundationFamily .white > .val { position: absolute !important; left: 50% !important; bottom: 7px !important; z-index: 24 !important; margin: 0 !important; transform: translateX(-50%) !important; } html.cwFoundationFamily .cwTonicBadge, html.cwFoundationFamily .cwNewBadge { position: absolute; z-index: 40; display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 2px 4px; border: 1px solid #07101e; border-radius: 999px; color: #07101e; font-size: 7px; line-height: 1; font-style: normal; font-weight: 950; white-space: nowrap; pointer-events: none; } html.cwFoundationFamily .cwTonicBadge { background: #71e37e; box-shadow: 0 0 8px rgba(113,227,126,.72); } html.cwFoundationFamily .cwNewBadge { background: #ffe36d; box-shadow: 0 0 8px rgba(255,227,109,.62); } /* Natural-key tonic: a dedicated lane between the black keys and note identity. */ html.cwFoundationFamily.ha-tonic .white > .cwTonicBadge { left: 3px; top: 103px; } html.cwFoundationFamily.ha-sharp .white > .cwTonicBadge, html.cwFoundationFamily.ha-flat .white > .cwTonicBadge { left: 3px; top: 111px; } /* White-key accidental: NEW uses the clear outside edge; identity is below. */ html.cwFoundationFamily .white.aliasLeft > .cwNewBadge { left: 3px; top: 7px; } html.cwFoundationFamily .white.aliasRight > .cwNewBadge { right: 3px; top: 7px; } html.cwFoundationFamily .black > .cwTonicBadge { left: 50%; top: 4px; transform: translateX(-50%); } html.cwFoundationFamily .black > .cwNewBadge { left: 50%; top: 24px; transform: translateX(-50%); } html.cwFoundationFamily .black > .cwBlackIdentity { position: absolute; left: 50%; bottom: 10px; z-index: 35; transform: translateX(-50%); color: #fff; font-size: 10px; font-weight: 950; white-space: nowrap; } html.cwFoundationFamily .black.signatureNew > .cwBlackIdentity, html.cwFoundationFamily .black.newSharp > .cwBlackIdentity, html.cwFoundationFamily .black.newFlat > .cwBlackIdentity { color: #07101e; } /* B077PM · Authoritative keyboard geometry and three-row label system. */ html.cwFoundationFamily.ha-tonic, html.cwFoundationFamily.ha-sharp, html.cwFoundationFamily.ha-flat { --whiteH: 190px !important; --blackH: 100px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .white, html.cwFoundationFamily.ha-sharp .white, html.cwFoundationFamily.ha-flat .white { height: 190px !important; padding: 0 !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .black, html.cwFoundationFamily.ha-sharp .black, html.cwFoundationFamily.ha-flat .black { height: 100px !important; padding: 0 !important; } html.cwFoundationFamily.ha-sharp .keyboard, html.cwFoundationFamily.ha-flat .keyboard { height: 192px !important; } html.cwFoundationFamily.ha-sharp .viewport, html.cwFoundationFamily.ha-flat .viewport { min-height: 218px !important; } /* Row 1: one large centred state badge, fully below the black-key boundary. */ html.cwFoundationFamily .white > .cwTonicBadge, html.cwFoundationFamily .white > .cwNewBadge { left: 50% !important; right: auto !important; top: 103px !important; width: auto !important; min-width: 44px !important; min-height: 18px !important; padding: 3px 6px !important; transform: translateX(-50%) !important; font-size: 8px !important; line-height: 1 !important; } /* Row 2: note identity; enharmonic spelling is primary, physical key secondary. */ html.cwFoundationFamily .white > .cwWhiteIdentity { left: 2px !important; right: 2px !important; top: 126px !important; bottom: auto !important; min-height: 27px !important; justify-content: flex-start !important; } html.cwFoundationFamily .white > .cwWhiteIdentity b { font-size: 18px !important; line-height: 18px !important; } html.cwFoundationFamily .white > .cwWhiteIdentity small { margin-top: 1px !important; font-size: 7px !important; line-height: 8px !important; } /* Row 3: one signed Rectangle-value box in every lesson. */ html.cwFoundationFamily .white > .val { left: 50% !important; bottom: 6px !important; min-width: 38px !important; height: 27px !important; padding: 4px 5px !important; border-radius: 5px !important; background: #94c989 !important; color: #fff !important; font-size: 15px !important; line-height: 19px !important; font-weight: 950 !important; text-align: center !important; transform: translateX(-50%) !important; } html.cwFoundationFamily .white.neg > .val { background: #df746e !important; } /* Black positions use the same badge dimensions and centre line. */ html.cwFoundationFamily .black > .cwTonicBadge, html.cwFoundationFamily .black > .cwNewBadge { left: 50% !important; right: auto !important; top: 5px !important; width: auto !important; min-width: 44px !important; min-height: 18px !important; padding: 3px 6px !important; transform: translateX(-50%) !important; font-size: 8px !important; line-height: 1 !important; } html.cwFoundationFamily .black > .cwBlackIdentity { left: 50% !important; bottom: 11px !important; transform: translateX(-50%) !important; font-size: 10px !important; } /* B077PN · Restore Chopsticks/Fork memory groups and expose the +2 rule. */ html.cwFoundationFamily .cwMemoryRail { position: absolute; left: 0; width: 1102px; height: 29px; z-index: 55; pointer-events: none; } html.cwFoundationFamily .cwMemoryGroup { position: absolute; top: 0; height: 27px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 3px solid currentColor; border-left: 3px solid currentColor; border-right: 3px solid currentColor; border-radius: 8px 8px 0 0; background: rgba(5,10,18,.94); line-height: 1; text-align: center; } html.cwFoundationFamily .cwMemoryGroup b { font-size: 10px; font-weight: 950; } html.cwFoundationFamily .cwMemoryGroup small { margin-top: 3px; font-size: 7px; font-weight: 900; white-space: nowrap; } html.cwFoundationFamily .cwMemoryGroup.chop { width: 174px; color: #84c4ff; } html.cwFoundationFamily .cwMemoryGroup.fork { width: 232px; color: #d276ff; } html.cwFoundationFamily .cwMemoryGroup.chop.one { left: 0; } html.cwFoundationFamily .cwMemoryGroup.fork.one { left: 174px; } html.cwFoundationFamily .cwMemoryGroup.chop.two { left: 406px; } html.cwFoundationFamily .cwMemoryGroup.fork.two { left: 580px; } html.cwFoundationFamily .cwMemoryGroup.chop.three { left: 812px; } html.cwFoundationFamily .cwMemoryGroup.fork.three { left: 986px; width: 116px; } html.cwFoundationFamily .cwMemoryGroup.partial b { font-size: 8px; } /* Tonic Values has a status row inside the keyboard; use its former lower gap. */ html.cwFoundationFamily.ha-tonic .haTonicKeyboard .cwMemoryRail { top: 37px; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .whiteRow { top: 67px !important; } html.cwFoundationFamily.ha-tonic .haTonicKeyboard .black { top: 67px !important; } /* Sharp/Flat keyboards already reserve a shallow rail above the keys. */ html.cwFoundationFamily.ha-sharp .keyboard > .cwMemoryRail, html.cwFoundationFamily.ha-flat .keyboard > .cwMemoryRail { top: -29px; } /* Subtle first-octave group bands preserve tonic/accidental highlights. */ html.cwFoundationFamily .white.cwChopsticksKey::before, html.cwFoundationFamily .white.cwForkKey::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; } html.cwFoundationFamily .white.cwChopsticksKey::before { background: rgba(132,196,255,.10); } html.cwFoundationFamily .white.cwForkKey::before { background: rgba(210,118,255,.10); } /* +2 connectors occupy the gap between neighbouring value boxes. */ html.cwFoundationFamily .white.cwPlusTwoAfter::after { content: "+2"; position: absolute; right: -10px; bottom: 11px; z-index: 45; width: 20px; height: 14px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(8,16,30,.72); border-radius: 999px; background: #101a2b; color: #ffe36d; font-size: 7px; line-height: 1; font-weight: 950; pointer-events: none; }