:root{
  --cream:#f7f0e8;--paper:#fffaf5;--olive:#66764a;--olive2:#4e6038;
  --dark:#21312a;--lav:#8f65a7;--lav2:#eee2f2;--muted:#6f6a63;
  --line:#d9d2c8;--shadow:0 16px 42px rgba(36,46,38,.16);--focus:#ffcf5a;
}
*{box-sizing:border-box}
html,body{margin:0;background:linear-gradient(#faf6f0,#eee5d9);color:var(--dark);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{min-height:100vh}
button,select,input{font:inherit}
a{color:#385b48;font-weight:700}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.app{max-width:640px;min-height:100vh;margin:auto;background:rgba(255,250,245,.96);box-shadow:var(--shadow);position:relative;overflow:hidden}
header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,250,245,.97);z-index:30}
.brand{font-weight:900;letter-spacing:.02em}.brand small{display:block;font-weight:650;color:var(--muted)}
#menuButton{min-height:44px;border:0;border-radius:10px;padding:8px 12px;background:#fff;box-shadow:0 3px 14px #0001;color:var(--olive2);font-weight:900;cursor:pointer}
#menu{position:fixed;right:max(10px,calc((100vw - 640px)/2 + 10px));top:76px;z-index:60;width:min(390px,calc(100vw - 20px));max-height:calc(100vh - 90px);overflow:auto;padding:15px;border-radius:16px;background:rgba(255,250,245,.98);border:1px solid var(--line);box-shadow:0 18px 55px #0005;display:none}
#menu.open{display:block}
#menu h2{margin:.15rem 0 .7rem;font-size:1.3rem}
#menu label{display:block;font-size:.82rem;color:var(--muted);font-weight:800;margin:11px 0 4px}
#menu select,#menu input[type=range],#menu input[type=file]{width:100%}
#menu select,#menu input[type=file]{padding:9px;border:1px solid #b9b5ae;border-radius:10px;background:#fff;color:var(--dark)}
.menu-row{display:flex;gap:8px;align-items:center}.menu-row>*{flex:1}
.menu-link{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #ebe4da;background:transparent;padding:11px 4px;color:var(--dark);text-decoration:none;font-weight:800;cursor:pointer}
.menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.menu-actions button{min-height:44px;border:1px solid var(--line);border-radius:10px;background:white;font-weight:800;cursor:pointer}
.menu-check{display:flex!important;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;margin:0!important;color:var(--dark)!important}
.menu-check input{accent-color:var(--olive);transform:scale(1.2)}
.status{padding:9px 10px;border-radius:10px;background:#eef1e8;color:#3f5133;font-size:.82rem;margin-top:8px}
.status.warn{background:#fff2dc;color:#75491f;border-left:4px solid #c88742}
.screen{display:none;padding:18px 16px 48px}.screen.active{display:block}
.kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--lav)}
h1,h2{font-family:Georgia,serif}
.hero h1{font-size:clamp(2.2rem,10vw,3.55rem);line-height:1;margin:.15em 0}.hero p{color:var(--muted)}
.poster-card{border:0;padding:0;width:100%;height:250px;border-radius:24px;overflow:hidden;position:relative;cursor:pointer;background:#dce1d4;box-shadow:var(--shadow)}
.poster-card img{width:100%;height:100%;object-fit:cover}.poster-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,30,24,.8),transparent 62%)}
.poster-card .copy{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;color:white;text-align:left}.poster-card h2{font-size:2rem;margin:0}.poster-card p{margin:4px 0 0}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px;margin-top:14px}
.row{display:flex;gap:10px;align-items:center}.between{justify-content:space-between}
.primary,.secondary{border:0;border-radius:15px;padding:13px 16px;font-weight:900;cursor:pointer}
.primary{background:var(--olive);color:white}.secondary{background:white;color:var(--dark);border:1px solid var(--line)}.full{width:100%}
.exercise-list{margin:12px 0}.exercise-line{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--line);padding:10px 0}
.stage{height:390px;border-radius:24px;overflow:hidden;position:relative;background:#dfe4d7;box-shadow:var(--shadow)}
.stage img{position:absolute;max-width:none;transition:all .75s cubic-bezier(.2,.8,.2,1)}
.timer{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(255,253,249,.95);border:5px solid rgba(143,101,167,.33);border-radius:999px;padding:10px 22px;font-size:2.65rem;font-weight:950;color:#473052;min-width:160px;text-align:center}
.cue{margin:13px 0;background:linear-gradient(135deg,var(--lav2),#fff);border-radius:17px;padding:13px 15px;font-weight:800;text-align:center}
.subcue{font-size:.9rem;color:var(--muted);text-align:center;margin-top:-4px}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px 0}
.controls button{min-height:48px;border:0;border-radius:14px;background:white;box-shadow:0 4px 14px #0001;font-weight:850;cursor:pointer}
.controls .play{background:var(--lav);color:white}.controls .stop{background:#ede8e2;color:#5d4439}
.progress{height:7px;background:#e9e2da;border-radius:999px;overflow:hidden;margin:7px 0 14px}.progress div{height:100%;background:linear-gradient(90deg,var(--lav),var(--olive));transition:.2s}
.rest{text-align:center}.rest h1{font-size:3.2rem;margin:.2em}.rest-time{font-size:4.5rem;font-weight:950;color:var(--olive)}
.fact{min-height:190px;display:grid;place-items:center;padding:22px;border-radius:24px;background:#fff;box-shadow:var(--shadow);font:700 1.55rem/1.25 Georgia,serif}
.badge{display:inline-block;padding:6px 9px;border-radius:999px;background:var(--lav2);color:#54365e;font-size:.78rem;font-weight:850}.small{font-size:.86rem;color:var(--muted)}
.complete{text-align:center}.cat{font-size:5rem}.warnbox{border-left:5px solid #c88742;padding-left:12px}
.home-links{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.home-links a{display:block;text-align:center;padding:12px;border:1px solid var(--line);border-radius:13px;background:white;text-decoration:none}
footer{font-size:.84rem;color:var(--muted);padding:12px 4px 0}
.aletheia-constellation{margin-top:22px}
@media(max-width:520px){
  .controls{grid-template-columns:1fr 1fr}.stage{height:350px}.home-links{grid-template-columns:1fr}
}
@media(min-width:800px){body{padding:22px}.app{border-radius:28px;min-height:calc(100vh - 44px)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}