@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Montserrat:wght@400;500;600&display=swap');
.ecosystem-header{position:sticky;top:0;z-index:90;min-height:88px;background:#322f2e;color:#fffbf7;display:flex;align-items:center;justify-content:space-between;padding:16px 4vw;gap:24px;border-bottom:1px solid #ffffff20}
.ecosystem-brand{display:flex;gap:12px;align-items:center;color:#fffbf7;text-decoration:none;flex-shrink:0}.ecosystem-brand img{width:46px;height:46px;border-radius:50%}.ecosystem-brand span{font-family:'Julius Sans One',sans-serif;font-size:21px;letter-spacing:1px}.ecosystem-brand small{display:block;font-family:Montserrat,sans-serif;font-size:11px;letter-spacing:2px;color:#cfae74;margin-top:4px}
.ecosystem-header nav{display:flex;gap:20px;align-items:center}.ecosystem-header nav a{font-family:Montserrat,Arial,sans-serif;font-size:13px;color:#fffbf7;text-decoration:none;padding:12px 0}.ecosystem-header nav a:hover{color:#cfae74}.ecosystem-header a[aria-current]{color:#cfae74}.ecosystem-menu{padding:0}.ecosystem-menu>summary{display:none}
#app .layout{min-height:calc(100vh - 88px)}#app aside{top:88px;height:calc(100vh - 88px);padding-top:24px}#app .brand-caption{margin-bottom:18px;font-size:13px;letter-spacing:.5px;text-transform:none}#app .wordmark{font-size:22px;font-weight:700;letter-spacing:-.3px}
#app .nav{display:grid;overflow:visible;gap:4px}#app .tool-group{padding:8px 0;border-top:1px solid var(--line)}#app .tool-group summary{padding:10px 12px;font-size:14px;font-weight:700;color:var(--muted)}#app .tool-group button{display:block;width:100%;min-height:44px;text-align:left;white-space:normal;margin-top:3px}#app .tool-group button.active{border-left:3px solid #cfae74;border-radius:6px}#app .topbar{margin-bottom:26px}#app main h1{line-height:1.18}#app .share-link{display:block;margin-top:15px;font-size:14px}#app .panel{border-radius:14px}
@media(max-width:1200px){.ecosystem-header{min-height:74px;padding:12px 20px}.ecosystem-brand img{width:40px;height:40px}.ecosystem-brand span{font-size:19px}.ecosystem-menu>summary{display:block;padding:12px;border:1px solid #ffffff40;border-radius:7px;font-family:Montserrat,sans-serif;font-size:14px;list-style:none}.ecosystem-menu>summary::after{content:' ＋'}.ecosystem-menu[open]>summary::after{content:' −'}.ecosystem-menu:not([open]) nav{display:none}.ecosystem-header nav{position:absolute;top:100%;left:0;right:0;background:#322f2e;display:grid;gap:0;padding:10px 20px 20px;max-height:calc(100dvh - 74px);overflow:auto;border-bottom:1px solid #cfae74}.ecosystem-header nav a{min-height:44px;border-bottom:1px solid #ffffff15}#app aside{top:74px;height:calc(100vh - 74px)}}
@media(max-width:760px){#app aside{position:static;height:auto;padding:18px;border-right:0;border-bottom:1px solid var(--line)}#app .nav{grid-template-columns:1fr;gap:0}#app .tool-group{padding:0}#app .tool-group summary{min-height:44px;padding:13px 4px}#app .tool-group button{padding-left:16px}#app .brand-caption{margin:6px 0 12px}#app main{padding:24px 18px 60px}#app .topbar{gap:10px}#app p,#app label,#app small,#app .muted{font-size:15px}#app .eyebrow{font-size:12px;letter-spacing:1px}.ecosystem-brand span{font-size:18px}.ecosystem-header{gap:8px;padding:12px 16px}}

#app .app-tools{padding:0}#app .app-tools>summary{display:none}@media(max-width:760px){#app .app-tools>summary{display:block;min-height:48px;padding:14px 12px;border:1px solid var(--line);border-radius:8px;font-weight:700;list-style:none}#app .app-tools>summary::after{content:" ＋";float:right}#app .app-tools[open]>summary::after{content:" −"}#app .app-tools:not([open]) .nav{display:none}}

@media(max-width:760px){#app .topbar .network-tools{width:auto}#app .topbar>.eyebrow{order:-1;flex-basis:100%;line-height:1.6}#app .topbar{align-items:center}#app .topbar button{min-height:44px}}

/* Comfortable controls and compact practice on phones. */
#app .practice-summary{font-weight:700;margin:0;text-wrap:balance}
#app .practice-controls button{min-height:48px;min-width:110px;font-size:17px}
#app .practice-checkin{padding:8px 0}#app .practice-checkin summary{min-height:44px;padding:12px 0}#app .practice-checkin label{margin-bottom:14px}
#app .practice-settings-disclosure{padding:0}#app .practice-settings-disclosure>summary{font-size:20px;font-weight:700;padding:8px 0 18px}
#app .practice-settings label{margin:14px 0}#app .practice-player label:has(input[type=checkbox]){display:flex;align-items:center;gap:12px;margin-top:14px;min-height:44px}
#app .practice-player input[type=checkbox]{flex-shrink:0}#app .screen-off-help{margin:4px 0 12px}
@media(max-width:760px){
 .ecosystem-header{min-height:64px;padding:8px 14px}.ecosystem-brand img{width:34px;height:34px}.ecosystem-brand small{font-size:10px;letter-spacing:1px}.ecosystem-brand span{font-size:17px}
 #app aside{padding:10px 16px}#app aside>.wordmark,#app aside>.brand-caption,#app aside>.share-link{display:none}#app .app-tools>summary{font-size:16px;min-height:46px;padding:12px}
 #app main{padding:18px 16px 72px}#app .topbar{margin-bottom:18px;padding-bottom:12px}#app .topbar>.eyebrow{display:none}
 #app input,#app select,#app textarea{font-size:16px;min-height:48px}#app input[type=range]{min-height:44px}#app button{min-height:44px}#app .panel{padding:18px}#app h1{font-size:32px;letter-spacing:-.6px;margin-bottom:18px}
 #app .orb-wrap{height:210px}#app .orb{width:128px;height:128px}#app .orb span{font-size:20px;color:#322f2e}#app .practice-player .orb-wrap{height:190px}#app .practice-player .orb{width:112px;height:112px}
 #app .screen-off-help{order:3}#app .practice-checkin{order:5}#app .practice-player{display:flex;flex-direction:column}#app .practice-controls{margin-top:8px;display:grid;grid-template-columns:1fr 1fr}#app .practice-controls button{width:100%;min-height:50px}
 #app .practice-grid{gap:0}#app .practice-player>p:not(.practice-summary){font-size:16px;line-height:1.55}#app .practice-settings .panel{padding:14px}#app .rhythm-fields{gap:10px}#app .rhythm-fields label{min-width:0}
 #app .row{flex-wrap:wrap}#app .actions{gap:8px}#app .course-toc{top:auto}#app .cards{grid-template-columns:minmax(0,1fr)}#app small{line-height:1.6}#notice{font-size:16px;bottom:10px}
}

/* Keep the app switcher reachable without covering the practice. */
#app aside{z-index:30}
@media(max-width:760px){
 #app aside{position:sticky;top:64px;z-index:80;height:auto;overflow:visible;background:var(--surface)}
 #app .app-tools[open] .nav{position:absolute;top:100%;left:16px;right:16px;max-height:calc(100dvh - 154px);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--line);border-radius:0 0 12px 12px;padding:8px 12px 16px;box-shadow:0 14px 28px #0003}
 #app .app-tools>summary{background:var(--surface)}
}