:root{color:#edf6f7;font-synthesis:none;text-rendering:geometricprecision;background:#101820;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}*{box-sizing:border-box}[hidden]{display:none!important}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,input,select{font:inherit}button{color:#edf6f7;cursor:pointer;background:#edf6f714;border:1px solid #edf6f72e;border-radius:8px;min-height:44px;transition:transform .15s,border-color .15s,background .15s}button:hover:not(:disabled){background:#74e3d324;border-color:#74e3d394;transform:translateY(-1px)}button:disabled{cursor:not-allowed;opacity:.45}.primary-button{color:#10202a;background:#74e3d3;border-color:#74e3d3;font-weight:750}#app{--panel-width:360px;--stage-menu-gap:18px;--stage-width:min(calc((100vh - 96px) * .95), calc(100vw - 28px - var(--panel-width) - var(--stage-menu-gap)));background:linear-gradient(135deg,#74e3d31f,#0000 32%),linear-gradient(215deg,#f4c45e1f,#0000 28%),#101820;min-height:100vh;padding:14px;overflow:hidden}.topbar{justify-content:space-between;align-items:center;gap:16px;width:100%;margin:0 0 12px;display:flex}h1{color:#fff7d6;letter-spacing:0;margin:0;font-size:clamp(1.8rem,4vw,3.35rem);line-height:.95}.status-pill{color:#dceced;text-align:center;background:#edf6f714;border:1px solid #edf6f72e;border-radius:999px;flex:none;min-width:132px;padding:10px 14px;font-size:.9rem;font-weight:750}.top-actions{justify-content:flex-end;align-items:center;gap:12px;min-width:0;display:flex}.status-pill[data-mode=connected]{color:#bdf9ef;background:#74e3d329;border-color:#74e3d3a3}.status-pill[data-mode=pending]{color:#ffe5a3;background:#f4c45e24;border-color:#f4c45ea3}.status-pill[data-mode=error]{color:#ffd0ca;background:#ff827824;border-color:#ff8278b8}.layout{grid-template-columns:minmax(0, var(--stage-width)) var(--panel-width);gap:var(--stage-menu-gap);align-items:start;width:fit-content;max-width:100%;margin:0 auto;display:grid}.stage-wrap{aspect-ratio:.95;height:auto;width:var(--stage-width);border:1px solid #edf6f71f;border-radius:8px;justify-self:start;position:relative;overflow:hidden;box-shadow:0 28px 80px #00000052}#stage{width:100%;height:100%;min-height:0;display:block}.readout{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#101820b8;border:1px solid #edf6f724;border-radius:8px;align-items:baseline;gap:12px;padding:10px 12px;display:flex;position:absolute;bottom:18px;left:18px}.readout span{color:#b6d8d8;font-size:.88rem}.readout strong{color:#fff7d6;font-size:1.8rem;line-height:1}.demo-banner{color:#fff7d6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#101820b8;border:1px solid #f4c45e6b;border-radius:8px;align-items:baseline;gap:10px;max-width:calc(100% - 32px);padding:8px 11px;display:flex;position:absolute;top:16px;left:16px;box-shadow:0 14px 34px #00000042}.demo-banner strong{font-size:.9rem}.demo-banner span{color:#c4dcdd;font-size:.82rem}.wisdom-overlay{pointer-events:none;justify-items:center;gap:10px;width:min(92%,560px);display:grid;position:absolute;bottom:21%;left:50%;transform:translate(-50%)}.wisdom-overlay button,.wisdom-scroll-card{pointer-events:auto}.wisdom-overlay button{color:#fff7d6;background:#101820c7;border-color:#fff7d680;padding:10px 14px;font-weight:850;box-shadow:0 12px 30px #00000057}.wisdom-scroll-card{aspect-ratio:1;opacity:0;pointer-events:none;filter:drop-shadow(0 22px 28px #00000057);width:min(84%,430px);position:relative;transform:translateY(18px)scale(.9)}.wisdom-scroll-card.is-animating{animation:.7s cubic-bezier(.2,.8,.2,1) forwards wisdomScrollEnter}.wisdom-scroll-card.is-revealed{opacity:1;transform:translateY(0)scale(1)}.wisdom-scroll{background-image:url(/rewards/magical_scroll_unroll/sprite_sheet.png);background-position:0 0;background-repeat:no-repeat;background-size:1000% 100%;position:absolute;inset:0}.wisdom-scroll-card.is-animating .wisdom-scroll{animation:.9s steps(9,end) forwards wisdomScrollUnroll}.wisdom-scroll-card.is-revealed .wisdom-scroll{background-position:100% 0}#wisdomQuote{color:#5d3717;text-shadow:0 1px #fff4bbb3;text-align:center;text-wrap:balance;letter-spacing:0;opacity:0;box-shadow:none;background:0 0;border:0;justify-content:center;align-items:center;margin:0;padding:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(.72rem,1.25vw,.9rem);font-weight:750;line-height:1.1;display:flex;position:absolute;inset:29% 32%}.wisdom-scroll-card.is-revealed #wisdomQuote:not([hidden]){animation:.36s forwards wisdomQuoteFade}@keyframes wisdomScrollEnter{to{opacity:1;transform:translateY(0)scale(1)}}@keyframes wisdomScrollUnroll{to{background-position:100% 0}}@keyframes wisdomQuoteFade{to{opacity:1}}.panel{width:var(--panel-width);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0c141cc7;border:1px solid #edf6f71f;border-radius:8px;align-self:start;gap:12px;max-height:calc(100vh - 92px);padding:14px;display:grid;overflow-y:auto;box-shadow:0 24px 70px #00000047}.control-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.guidance-line{color:#fff7d6;margin:-4px 0 -8px;font-size:.84rem;font-weight:750}.control-grid .primary-button{grid-column:span 2}.control-grid #startButton{color:#fff7d6;background:#f4c45e29;border-color:#f4c45e6b;font-weight:750}.control-grid.secondary{padding-top:2px}.select-row{gap:8px;display:grid}.select-row label{color:#c4dcdd;font-size:.9rem}select{color:#edf6f7;background:#edf6f714;border:1px solid #edf6f72e;border-radius:8px;width:100%;min-height:42px;padding:0 10px}select option{color:#edf6f7;background:#101820}.account-panel{background:#edf6f70b;border:1px solid #edf6f71f;border-radius:8px;gap:8px;padding:12px;display:grid}.top-account{grid-template-columns:auto minmax(210px,330px) auto;align-items:center;min-width:min(760px,58vw);padding:8px}.top-account .section-heading{gap:1px;min-width:86px;display:grid}.top-account #accountMessage{display:none}.top-account.authenticated,.top-account.guest-practicing{grid-template-columns:auto auto;min-width:auto}.top-account.authenticated .account-fields,.top-account.guest-practicing .account-fields,.top-account.guest-practicing .account-actions{display:none}.top-account.authenticated .account-actions{grid-template-columns:auto}.top-account.authenticated #createAccountButton,.top-account.authenticated #loginButton{display:none}.account-fields{grid-template-columns:1fr 1fr;gap:8px;display:grid}.account-fields input{color:#edf6f7;background:#edf6f714;border:1px solid #edf6f72e;border-radius:8px;min-width:0;min-height:38px;padding:0 10px}.account-fields input::placeholder{color:#8daeb0}.account-actions{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.account-actions button{min-height:34px;padding:4px 8px;font-size:.78rem;font-weight:750}.panel-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.tab-button{color:#b8d4d5;min-height:34px;padding:4px 8px;font-size:.82rem;font-weight:800}.tab-button.active{color:#fff7d6;background:#74e3d324;border-color:#74e3d394}.tab-panel{gap:12px;display:grid}#accountMessage{color:#a9c7c9;min-height:18px;margin:0;font-size:.76rem}.session-panel{background:#edf6f70e;border:1px solid #edf6f71f;border-radius:8px;gap:10px;padding:12px;display:grid}.session-row{grid-template-columns:auto minmax(86px,1fr);align-items:center;gap:8px 10px;display:grid}.session-row label{color:#c4dcdd;font-size:.86rem}.sound-toggle-group{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;display:grid}.sound-toggle{color:#edf6f7;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:#edf6f712;border:1px solid #edf6f729;border-radius:8px;justify-content:center;align-items:center;gap:5px;width:100%;min-height:34px;padding:0 8px;display:inline-flex}.sound-toggle span{font-size:.82rem;font-weight:750}.sound-toggle input{accent-color:#79e3d3;width:14px;height:14px}.sound-toggle strong{color:#fff7d6;font-size:.78rem;font-weight:800}.session-time{color:#fff7d6;font-variant-numeric:tabular-nums;letter-spacing:0;font-size:clamp(1.8rem,5vw,2.7rem);font-weight:850;line-height:1}.state-split{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.state-split div{background:#0c141c5c;border:1px solid #edf6f71a;border-radius:8px;min-width:0;padding:9px 8px}.state-split span,.state-split small{color:#a9c7c9;font-size:.72rem;display:block}.state-split strong{color:#fff7d6;font-variant-numeric:tabular-nums;margin:1px 0;font-size:1rem;display:block}.score-strip{background:#0c141c47;border:1px solid #edf6f71a;border-radius:8px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:8px;min-height:38px;padding:7px 8px;display:grid}.score-strip div{gap:2px;min-width:0;display:grid}.score-strip span{color:#a9c7c9;font-size:.68rem}.score-strip strong{color:#fff7d6;font-variant-numeric:tabular-nums;font-size:.9rem}.score-strip button{white-space:nowrap;grid-column:1/-1;justify-self:end;min-height:30px;padding:3px 8px;font-size:.72rem;font-weight:750}.rewards-panel{background:#0c141c3d;border:1px solid #edf6f71a;border-radius:8px;gap:9px;padding:9px 10px;display:grid}.xp-row{grid-template-columns:auto 1fr;align-items:center;gap:10px;display:grid}.xp-row span,.companion-row span{color:#a9c7c9;font-size:.74rem}.xp-meter{height:8px}#xpFill{background:linear-gradient(90deg,#74e3d3,#f4c45e);width:0%}.companion-row{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;display:grid}.practice-path,.companion-progress,.restoration-panel,.mastery-panel,.wisdom-collection{border-top:1px solid #edf6f71a;gap:7px;padding-top:8px;display:grid}.practice-day-track{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;display:grid}.practice-day-track span{color:#a9c7c9;background:#edf6f70f;border:1px solid #edf6f71f;border-radius:8px;place-items:center;min-height:26px;font-size:.68rem;font-weight:850;display:grid}.practice-day-track span.complete{color:#fff7d6;background:#f4c45e26;border-color:#f4c45e8c}.companion-meter{height:8px}#companionProgressFill{border-radius:inherit;background:linear-gradient(90deg,#f4c45e,#74e3d3);width:0%;height:100%}.restoration-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.restoration-token{opacity:.54;grid-template-rows:auto auto;grid-template-columns:32px minmax(0,1fr);align-items:center;column-gap:7px;min-width:0;display:grid}.restoration-token.unlocked{opacity:1}.restoration-token i{background-image:url(/rewards/reward-token-sheet.png);background-position:var(--token-x) var(--token-y);filter:drop-shadow(0 4px 8px #00000052);background-repeat:no-repeat;background-size:400% 200%;border-radius:8px;grid-row:1/span 2;width:32px;height:32px}.restoration-token b{color:#edf6f7;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;font-weight:800;overflow:hidden}.restoration-token small{color:#a9c7c9;font-size:.66rem}.wisdom-collection button{min-height:34px;padding:4px 9px;font-size:.78rem;font-weight:800}.wisdom-list{gap:6px;max-height:170px;padding-right:2px;display:grid;overflow-y:auto}.wisdom-list p{color:#dceced;background:#0c141c47;border-left:2px solid #f4c45e85;margin:0;padding:8px 9px;font-size:.74rem;line-height:1.32}.achievement-list{flex-wrap:wrap;gap:6px;display:flex}.achievement-badge{color:#b9d1d2;background:#edf6f70f;border:1px solid #edf6f71f;border-radius:999px;padding:4px 7px;font-size:.68rem;font-weight:750}.achievement-badge.unlocked{color:#fff7d6;background:#f4c45e21;border-color:#f4c45e7a}.meter-block{gap:8px;display:grid}.meter-label{color:#c4dcdd;justify-content:space-between;gap:12px;font-size:.9rem;display:flex}.meter-label span:last-child{color:#8fd2ca}.meter{background:#edf6f714;border:1px solid #edf6f724;border-radius:999px;height:14px;overflow:hidden}#calmFill{border-radius:inherit;background:linear-gradient(90deg,#ff8278,#f4c45e 45%,#74e3d3);width:0%;height:100%;transition:width .16s}#liftFill{border-radius:inherit;background:linear-gradient(90deg,#5bbfba,#fff7d6);width:0%;height:100%;transition:width .18s linear}.lift-meter{height:10px}.metrics{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.metrics div{background:#edf6f70f;border:1px solid #edf6f71f;border-radius:8px;min-width:0;padding:12px 10px}.metrics span{color:#a9c7c9;font-size:.76rem;display:block}.metrics strong{color:#fff7d6;letter-spacing:0;margin-top:3px;font-size:clamp(1rem,2vw,1.18rem);display:block}.calibration-panel{background:#edf6f70e;border:1px solid #edf6f71f;border-radius:8px;gap:8px;padding:12px;display:grid}.calibration-panel p{color:#c4dcdd;min-height:36px;margin:0;font-size:.82rem;line-height:1.35}#calibrationFill{border-radius:inherit;background:linear-gradient(90deg,#f4c45e,#74e3d3);width:0%;height:100%;transition:width .18s linear}.calibration-meter{height:9px}.dashboard-section{gap:10px;display:grid}.section-heading{color:#c4dcdd;justify-content:space-between;gap:12px;font-size:.86rem;font-weight:700;display:flex}.section-heading span:last-child{color:#8fd2ca;font-weight:600}.band-list{gap:8px;display:grid}.band-row{background:#edf6f70e;border:1px solid #edf6f71f;border-radius:8px;gap:6px;padding:10px;display:grid}.band-topline{color:#b8d4d5;justify-content:space-between;align-items:baseline;gap:10px;font-size:.78rem;display:flex}.band-topline strong{color:#fff7d6;font-size:.86rem}.band-topline output{color:#edf6f7;font-variant-numeric:tabular-nums;font-weight:800}.band-bar{background:#edf6f714;border-radius:999px;height:7px;overflow:hidden}.band-bar span{border-radius:inherit;background:linear-gradient(90deg,#74e3d3,#f4c45e);width:0%;height:100%;transition:width .16s;display:block}.band-row p{color:#a9c7c9;margin:0;font-size:.75rem;line-height:1.32}.slider-row{gap:8px;display:grid}.slider-row label{color:#c4dcdd;font-size:.9rem}input[type=range]{accent-color:#74e3d3;width:100%}.small-print{color:#a9c7c9;min-height:22px;margin:0;font-size:.86rem}@media (width<=860px){#app{padding:16px}.topbar{flex-direction:column;align-items:flex-start}.top-actions{flex-direction:column-reverse;align-items:stretch;width:100%}.top-account{grid-template-columns:1fr;width:100%;min-width:0}.layout{grid-template-columns:1fr;width:100%}.stage-wrap{width:100%}.panel{align-self:stretch;width:100%;max-height:none;overflow:visible}}@media (width<=460px){#app{padding:12px}.control-grid,.account-actions,.account-fields,.metrics,.state-split,.score-strip{grid-template-columns:1fr}.control-grid .primary-button{grid-column:auto}.readout{justify-content:space-between;left:12px;right:12px}}
