:root{--ink:#193f43;--muted:#708380;--paper:#f6f3e9;--line:#dadfd3;--sage:#e7ede2;--gold:#bc8d4f;--teal:#205c61}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);border-radius:9px;background:#fffdf6;color:var(--ink);padding:11px 15px;font-size:13px;font-weight:600}button:hover{background:#edf1e6}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #d3a466;outline-offset:3px}header{max-width:1280px;margin:auto;padding:23px 35px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.brand{font-family:Georgia,serif;color:var(--ink);font-size:37px;text-decoration:none;position:relative;line-height:35px}.brand span{font-size:14px;position:absolute;right:-6px;top:-8px;color:var(--gold)}.brandword{font-size:11px;letter-spacing:2px;font-weight:700}.brandword small{display:block;font-size:8px;letter-spacing:1.6px;margin-top:6px;color:var(--muted)}header>button{margin-left:auto}.quiet{background:transparent}.quiet span{margin-left:12px}main{max-width:1280px;padding:0 35px;margin:auto}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:38px 0 30px;gap:25px}.eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:bold;color:var(--muted);margin:0 0 12px}h1{font:46px/1.07 Georgia,serif;font-weight:400;margin:0;letter-spacing:-1.1px}h1 em,h2 em{font-weight:400;color:#4d7972}.introcopy{font-size:14px;line-height:1.7;padding-bottom:3px}.introcopy p{margin:0}.introcopy .subtle{font-size:11px;color:var(--muted);margin-top:12px}.workspace{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(285px,1fr);gap:24px}.playpanel{background:#eef0e5;border:1px solid #d9e1d4;border-radius:17px;overflow:hidden;align-self:start}.stagehead{display:flex;align-items:center;justify-content:space-between;padding:19px 22px}.tiny{display:block;font-size:8px;letter-spacing:1.4px;color:var(--muted);margin-bottom:6px}.stagehead strong{font:17px Georgia,serif;font-weight:400}.sound{border-color:#bccdc2;font-size:11px;padding:10px}.sound[aria-pressed=true]{background:var(--teal);color:white}.instrument{height:292px;padding:14px 29px 10px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 15px 9px #14383e1a);--spread:0}.endplate{position:relative;width:130px;height:261px;flex-shrink:0;z-index:2}.endplate>img{width:100%;height:100%;object-fit:fill;position:absolute;inset:0;pointer-events:none}.left{transform:translateX(calc(var(--spread)*-9px))}.right{transform:translateX(calc(var(--spread)*9px))}.pearls{position:absolute;left:20px;right:20px;top:61px;display:grid;grid-template-columns:1fr 1fr;gap:16px 9px}.pearl{width:40px;height:48px;padding:0;border-radius:50%;border:2px solid #dfd5bc;background:radial-gradient(circle at 36% 24%,#fffef2,#e3dcc6 63%,#aaa992);box-shadow:0 3px 0 #786d50,0 4px 7px #0005;display:flex;align-items:center;flex-direction:column;justify-content:center;color:#315557;touch-action:none;user-select:none}.pearl b{font-size:13px;line-height:16px}.pearl small{font-size:8px;font-weight:400;opacity:.72}.pearl i{font-style:normal;font-size:7px;opacity:.7;margin-top:2px}.pearl.active{transform:translateY(3px);box-shadow:0 0 0 3px #d9c38e,0 0 18px #ffebbb;background:#ffeabc}.pearl.expected{outline:2px solid #f8d185;outline-offset:4px}.banklabel{position:absolute;bottom:40px;left:0;right:0;text-align:center;font-size:6.5px;letter-spacing:1px;color:#dbc98e}.bellowsframe{height:231px;flex:1;max-width:223px;position:relative;margin:0 -3px;align-self:center;display:flex;align-items:stretch;justify-content:center}.bellows{position:absolute;inset:0 -4px;overflow:hidden;transform:scaleX(calc(.94 + var(--spread)*.12));transform-origin:center;transition:transform .18s}.bellows img{width:100%;height:100%;object-fit:fill;filter:brightness(.78)}.breathbadge{position:relative;z-index:1;align-self:center;background:#f6f2dfed;color:#5b4233;padding:12px 9px;border-radius:60px;min-width:85px;text-align:center;box-shadow:0 2px 15px #0002;border:1px solid #c6a873}.breathbadge span{font-size:21px;display:block;color:#8c5e43;letter-spacing:3px}.breathbadge b{font-size:9px;display:block;letter-spacing:1px;margin-top:3px}.breathbadge small{display:block;font-size:7px;margin-top:6px;color:#87725f}.directionbar{display:flex;gap:9px;padding:6px 22px 0}.directionbar button{flex:1;background:#f8f8ef;border-color:#cdd7c9;padding:11px 12px}.directionbar button b{font-size:13px}.directionbar button small{display:block;font-size:9px;font-weight:400;margin-top:4px}.directionbar button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff5df}.understage{padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#5a746d;min-height:39px}.keytip{font-size:8px;white-space:nowrap;color:#7a8b7e}.settings{margin:0 22px 15px;border-top:1px solid #d2dccd;padding-top:16px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:14px}.settings label{font-size:9px;letter-spacing:.2px;color:#657d72}.settings output{float:right}.settings input{width:100%;accent-color:var(--teal);display:block;margin-top:13px}.settings select{display:block;margin-top:7px;width:100%;font-size:11px;border:1px solid #ced8ca;color:var(--ink);background:#fafaf3;border-radius:6px;padding:7px 5px}.stagefoot{border-top:1px solid #d9e1d4;display:flex;gap:7px;padding:13px 20px;align-items:center;font-size:8px;color:#6d8175}.stagefoot .quiet{margin-left:auto;padding:4px 8px;font-size:8px;border:none}.liveDot{background:#8caa8a;width:5px;height:5px;border-radius:50%;flex-shrink:0}.phrasecard{background:#fffdf6;border:1px solid var(--line);border-radius:15px;padding:24px}.sectiontop{display:flex;align-items:center;justify-content:space-between}.sectiontop .eyebrow{margin:0}.seal{font-size:10px;color:#78927d;background:#eef2e5;border-radius:20px;padding:5px 9px}h2{font:30px/1.15 Georgia,serif;letter-spacing:-.4px;font-weight:400;margin:20px 0 12px}.muted{font-size:11px;line-height:1.8;color:#73867e}.phrasecard select{width:100%;padding:11px 10px;background:#f7f7ef;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:11px;margin:8px 0 18px}#phraseDisplay{min-height:140px;border:1px dashed #d4ddcc;border-radius:9px;background:#f9faf3;padding:17px 16px;text-align:center}#phraseDisplay h3{font:20px Georgia,serif;margin:8px 0}#phraseDisplay p{font-size:10px;line-height:1.7;color:#718174;margin:8px 0}.freestamp{font-size:29px;color:#ae9162}.nextnote{display:flex;gap:12px;align-items:center;justify-content:center;margin:7px 0 13px}.notecircle{font:30px Georgia,serif;width:59px;height:59px;display:grid;place-items:center;border-radius:50%;background:#e7eee0;border:1px solid #c4d4bc}.nextnote b{display:block;font-size:12px}.nextnote small{display:block;font-size:10px;color:#7d8b76;margin-top:7px}.steps{display:flex;justify-content:center;gap:5px;margin-top:15px}.steps span{width:6px;height:6px;background:#d5dfcf;border-radius:50%}.steps span.done{background:#4c7970}.steps span.now{background:#c49c59;box-shadow:0 0 0 2px #eddfc7}.phraseactions{display:flex;justify-content:space-between;gap:8px;margin-top:17px}.phraseactions button{font-size:10px;padding:9px}.phraseactions #listen{background:var(--teal);color:#fff5e6;border-color:var(--teal)}.notelet{display:flex;gap:13px;padding:21px 16px;font-size:10px;color:#72837b;line-height:1.8}.notelet>span{font-size:26px;color:#ad945f}.notelet h3{font:16px Georgia,serif;color:#385b55;margin:0 0 5px}.notelet p{margin:0}footer{display:flex;gap:20px;align-items:center;color:#8d978a;font-size:9px;padding:26px 2px 30px}.textbutton{border:0;padding:0;background:none;font-size:9px;text-decoration:underline;color:#6d8478}.local{margin-left:auto}.sr{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden}dialog{border:1px solid #c6d5c2;border-radius:18px;background:#fffdf4;color:var(--ink);padding:32px;max-width:580px;width:calc(100% - 30px);box-shadow:0 30px 80px #1235}dialog::backdrop{background:#16383579;backdrop-filter:blur(3px)}dialog h2{margin-top:4px}dialog p,dialog li{font-size:13px;line-height:1.8}dialog a{color:#386b66}dialog .close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:23px;padding:3px 8px}
@media(min-width:1350px){.instrument{height:310px}.endplate{height:279px;width:139px}.pearls{left:24px;right:24px;top:67px;gap:20px 10px}.banklabel{bottom:43px}.bellowsframe{height:248px}}
@media(max-width:850px){header{padding:18px 20px}main{padding:0 20px}.intro{padding:28px 0;align-items:start}.introcopy{max-width:210px;font-size:12px}h1{font-size:37px}.workspace{grid-template-columns:1fr;max-width:650px;margin:auto}aside{display:grid;grid-template-columns:1.8fr 1fr;gap:12px}.notelet{padding:20px 0}.intro{max-width:650px;margin:auto}.instrument{height:287px}.keytip{display:none}footer{max-width:650px;margin:auto;flex-wrap:wrap;gap:10px}.local{margin-left:0;width:100%}}
@media(max-width:480px){header{padding:14px 16px}.brandword{font-size:9px;letter-spacing:1.5px}.brandword small{font-size:6px}header>button{font-size:10px;padding:8px}.intro{padding:24px 0 18px;display:block}.introcopy{max-width:none;font-size:11px;margin-top:14px}.introcopy p br{display:none}.introcopy .subtle{display:none}main{padding:0 12px}h1{font-size:34px;line-height:1.07}.eyebrow{font-size:7px;letter-spacing:1.3px}.workspace{gap:15px}.stagehead{padding:13px 14px}.stagehead strong{font-size:13px}.sound{font-size:9px;padding:8px}.instrument{height:237px;padding:6px 12px 8px}.endplate{height:221px;width:110px}.pearls{left:17px;right:17px;top:48px;gap:14px 8px}.pearl{width:34px;height:41px}.pearl b{font-size:11px}.pearl small{font-size:7px}.pearl i{font-size:6px}.banklabel{bottom:33px;font-size:5.4px}.bellowsframe{height:195px;min-width:60px}.breathbadge{min-width:62px;padding:10px 5px}.breathbadge span{font-size:16px;letter-spacing:0}.breathbadge b{font-size:7px}.breathbadge small{font-size:6px}.directionbar{padding:3px 13px 0;gap:8px}.directionbar button{padding:8px}.directionbar button b{font-size:12px}.directionbar button small{font-size:8px}.understage{padding:11px 14px;font-size:9px;min-height:33px}.settings{margin:0 14px 12px;padding-top:12px;gap:9px;grid-template-columns:1.1fr 1fr 1fr}.settings label{font-size:8px}.settings select{font-size:10px;padding:7px 3px}.stagefoot{padding:10px 13px;font-size:7px;gap:5px}.stagefoot .quiet{font-size:7px;padding:4px 0;white-space:nowrap}.phrasecard{padding:19px}aside{display:block}.notelet{padding:17px 9px}.phrasecard h2{font-size:28px;margin-top:15px}.phrasecard #phraseDisplay{min-height:120px}.muted{font-size:11px}.stagehead .tiny{font-size:7px}.introcopy .subtle{display:none}footer{padding-top:20px;font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}