:root{color:#24202b;background:#f8f1e6;font-family:ui-rounded,Avenir Next,Avenir,Segoe UI,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--ivory: #f8f1e6;--paper: #fffaf2;--ink: #24202b;--muted: #6c6571;--violet: #5c4678;--violet-dark: #48355f;--violet-soft: #ede5f5;--amber: #c97e33;--amber-soft: #f4dfc1;--line: #ddd2c4;--error: #8b342d}*{box-sizing:border-box}html{min-width:320px;background:var(--ivory)}body{margin:0;min-width:320px;min-height:100vh}button,select{font:inherit}button,select,audio{min-height:48px}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,select:focus-visible,audio:focus-visible,a:focus-visible{outline:3px solid var(--amber);outline-offset:3px}.app-shell{width:min(100%,820px);min-height:100vh;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}.skip-link{position:fixed;left:12px;top:-80px;z-index:20;padding:12px 16px;color:#fff;background:var(--ink);border-radius:8px}.skip-link:focus{top:12px}.brand-header{display:flex;align-items:center;gap:18px;margin:8px 4px 28px}.brand-header h1{margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(2.35rem,8vw,4rem);font-weight:500;letter-spacing:-.045em;line-height:.95}.tagline{margin:7px 0 0;color:var(--muted);font-size:1.02rem}.eyebrow,.section-label{margin:0 0 7px;color:var(--violet);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.brand-mark{position:relative;display:grid;place-items:center;flex:0 0 76px;width:76px;height:76px;border-radius:24px;color:#fff;background:var(--violet);box-shadow:0 10px 30px #44325b2e;overflow:hidden}.brand-mark span{position:relative;z-index:2;margin-right:22px;font-family:Georgia,serif;font-size:2.6rem}.brand-mark i{position:absolute;left:42px;width:21px;height:3px;background:#f5c37f;border-radius:5px;transform-origin:left}.brand-mark i:nth-of-type(1){top:25px;transform:rotate(-18deg)}.brand-mark i:nth-of-type(2){top:37px;width:27px}.brand-mark i:nth-of-type(3){top:49px;transform:rotate(18deg)}.card{padding:clamp(24px,6vw,48px);background:var(--paper);border:1px solid rgb(89 70 64 / 12%);border-radius:28px;box-shadow:0 22px 70px #402f2814}.card h2{margin:0 0 10px;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.65rem,5.8vw,2.35rem);font-weight:500;line-height:1.12;letter-spacing:-.025em}.card p{color:var(--muted);line-height:1.55}.level-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.level-heading>div{max-width:490px}.level-heading p:last-child{margin-bottom:0}.level-picker,.field{display:flex;flex-direction:column;gap:8px}.level-picker span,.field>span,.field legend{color:var(--muted);font-size:.77rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase}select{width:100%;padding:0 38px 0 13px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:#fff}.level-picker{flex:0 0 190px}.controls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 22px;margin:32px 0}.field{min-width:0;margin:0;padding:0;border:0}.field legend{margin-bottom:8px}.segmented-field>div{display:flex;width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.segmented-field button{flex:1 1 0;min-width:0;padding:6px 5px;border:0;border-right:1px solid var(--line);color:var(--muted);background:transparent;font-size:clamp(.72rem,2.4vw,.88rem)}.segmented-field button:last-child{border-right:0}.segmented-field button.selected{color:var(--violet-dark);background:var(--violet-soft);font-weight:750;box-shadow:inset 0 -3px 0 var(--violet)}.answer-field{grid-column:1 / -1}.primary-button,.secondary-button,.text-button{min-height:52px;border-radius:14px;font-weight:760}.primary-button{width:100%;padding:13px 20px;border:0;color:#fff;background:var(--violet);box-shadow:0 9px 22px #5c467838}.primary-button:hover{background:var(--violet-dark)}.primary-button small{display:block;margin-top:3px;font-size:.76rem;font-weight:500;opacity:.78}.prepare-button{min-height:70px;font-size:1.1rem}.secondary-button{padding:10px 18px;border:1px solid var(--line);color:var(--ink);background:var(--paper)}.text-button{padding:9px 13px;border:0;color:var(--violet);background:transparent;text-decoration:underline;text-underline-offset:3px}.home-card>.text-button{display:block;margin:10px auto 0}.home-instruction{max-width:530px;margin:13px auto 0;text-align:center;font-size:.9rem}.error-box{display:flex;flex-direction:column;gap:3px;margin:0 0 18px;padding:14px 16px;border-left:4px solid var(--error);color:var(--error);background:#faebe7;border-radius:8px}.preparing-card,.results-card,.player-card{text-align:center}.preparing-card{padding-block:64px}.preparing-card progress,.player-card progress{width:100%;height:12px;margin:22px 0 4px;accent-color:var(--violet)}.progress-label{display:block;color:var(--muted);font-size:.82rem}.listening-orbit{display:grid;place-items:center;width:82px;height:82px;margin:0 auto 25px;border:2px solid var(--violet-soft);border-radius:50%}.listening-orbit:before,.listening-orbit:after{content:"";position:absolute;width:54px;height:54px;border:2px solid #d9c9e8;border-radius:50%}.listening-orbit:after{width:30px;height:30px}.listening-orbit span{width:12px;height:12px;border-radius:50%;background:var(--violet)}.start-button{min-height:76px;margin-top:18px;font-size:1.12rem}.native-audio{width:100%;margin-top:24px}.player-card.is-playing{background:#fff7e9;border-color:#eed4ae}.now-listening{display:flex;align-items:center;justify-content:center;gap:6px;height:70px;margin-bottom:20px}.now-listening span{width:8px;height:30px;border-radius:8px;background:var(--amber);animation:listen 1.15s ease-in-out infinite alternate}.now-listening span:nth-child(2){height:56px;animation-delay:-.5s}.now-listening span:nth-child(3){height:42px;animation-delay:-.85s}.now-listening span:nth-child(4){height:22px;animation-delay:-.25s}@keyframes listen{to{transform:scaleY(.45)}}.time-readout{display:flex;justify-content:space-between;gap:20px;font-variant-numeric:tabular-nums}.player-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:20px}.primary-button.compact{width:auto;min-width:140px}.result-numbers{display:flex;justify-content:center;gap:50px;margin:28px 0}.result-numbers p{display:flex;flex-direction:column;margin:0}.result-numbers strong{color:var(--ink);font-family:Georgia,serif;font-size:2.6rem;font-weight:500}.result-numbers span{font-size:.82rem}.compatibility-note{margin:22px 8px 0;padding:17px 19px;border:1px solid #e2cfb3;border-radius:16px;background:#f9e9cf}.compatibility-note strong{color:#6e431c}.compatibility-note p{margin:4px 0 0;color:#77583c;font-size:.88rem;line-height:1.45}footer{margin:24px 8px 0;color:var(--muted);font-size:.78rem;line-height:1.5;text-align:center}footer span{color:var(--ink);font-weight:750}.update-prompt{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));z-index:10;display:flex;align-items:center;justify-content:center;gap:16px;width:min(560px,calc(100% - 32px));margin:0 auto;padding:13px;color:#fff;background:var(--ink);border-radius:15px;box-shadow:0 8px 30px #00000040}.update-prompt button{min-height:48px;padding:8px 14px;border:0;border-radius:10px;color:var(--ink);background:var(--amber-soft);font-weight:750}@media(max-width:640px){.app-shell{padding-inline:max(13px,env(safe-area-inset-left))}.brand-header{gap:13px;margin-bottom:22px}.brand-mark{flex-basis:62px;width:62px;height:62px;border-radius:19px}.brand-mark span{margin-right:16px;font-size:2.15rem}.brand-mark i{left:35px;width:18px}.brand-mark i:nth-of-type(1){top:20px}.brand-mark i:nth-of-type(2){top:30px;width:22px}.brand-mark i:nth-of-type(3){top:41px}.eyebrow{display:none}.tagline{font-size:.9rem}.card{padding:24px 19px;border-radius:22px}.level-heading{display:block}.level-picker{margin-top:22px}.controls-grid{grid-template-columns:1fr;gap:17px;margin:27px 0}.answer-field{grid-column:auto}.time-readout{font-size:.84rem}.result-numbers{gap:26px}.update-prompt{justify-content:space-between;font-size:.86rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
