:root{--deep:#0c4944;--teal:#3f857d;--cream:#fbf8ee;--gold:#cfaa4d;--ink:#163d3a;--line:#d8ded8;--pale:#fffdf7}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:linear-gradient(135deg,#fbfaf2,#edf5ec);color:var(--ink);font-family:Georgia,'Times New Roman',serif;overflow:hidden}.app-shell{height:100vh;display:grid;grid-template-rows:78px 1fr auto;gap:8px;padding:10px 18px}.topbar{display:flex;justify-content:space-between;align-items:center;min-height:0}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink)}.brand-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;border:3px solid var(--teal);background:#fff}.brand strong{display:block;font-size:42px;line-height:.88}.brand em{font-style:normal;font-size:16px;opacity:.75}.top-actions{display:flex;gap:10px;align-items:center}button{border:1px solid var(--line);border-radius:999px;background:#fffdf7;color:var(--ink);font-weight:700;padding:10px 22px;font-size:16px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.04)}.primary,.modes button.active{background:var(--teal);color:white;border-color:transparent}.hidden{display:none!important}.opening{display:grid;place-items:center;min-height:0}.hero-card{width:min(780px,92vw);height:min(610px,calc(100vh - 162px));border-radius:34px;background:rgba(255,255,255,.74);box-shadow:0 18px 50px rgba(0,0,0,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px}.hero-card h1{font-size:42px;margin:10px 0 4px}.hero-card p{font-size:20px;margin:0 0 14px}.begin{font-size:20px;padding:14px 42px}.ghost{margin-top:8px;background:transparent}.sound-notice{font-family:Arial,sans-serif;font-size:13px;opacity:.7;margin-top:10px}.practice{min-height:0;display:grid;grid-template-columns:290px minmax(460px,1fr) 320px;gap:16px}.side{border-radius:24px;background:linear-gradient(180deg,#0b4b46,#0b3936);color:white;padding:22px;min-height:0;box-shadow:0 14px 35px rgba(0,0,0,.12);overflow:auto}.side h2{margin:0 0 18px;font-size:26px}.left-panel ol{list-style:none;margin:0;padding:0}.left-panel li{display:flex;gap:12px;align-items:center;padding:12px 10px;border-radius:12px;font-size:17px;font-weight:700}.left-panel li.active{background:rgba(255,255,255,.18)}.num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);background:rgba(255,255,255,.1);flex:0 0 auto}.active .num{background:#fff;color:var(--teal)}.mantra{margin-top:28px;border:1px solid var(--gold);border-radius:12px;padding:16px;color:#f2d27a;line-height:1.55;font-weight:700}.left-panel small{display:block;text-align:center;margin-top:20px;opacity:.78}.center-panel{min-height:0;background:rgba(255,255,255,.72);border-radius:28px;padding:18px 24px;display:grid;grid-template-rows:auto minmax(250px,1fr) auto auto auto;box-shadow:0 12px 35px rgba(0,0,0,.08)}.stage-head{border:1px solid var(--line);border-radius:18px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.6)}.stage-head small{letter-spacing:.12em;color:var(--teal);font-weight:800}.stage-head h1{font-size:36px;margin:2px 0 0}.stage-head strong{font-size:27px}.sage-stage{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:22px;background:radial-gradient(circle at center,#fff 0,#f9f2df 46%,#eaf3e6 100%);min-height:0}.sage-stage:before{content:'';position:absolute;inset:0;background:url('assets/sage/idle.png?v=22') center/cover no-repeat;opacity:.10;filter:blur(1px)}.opening-sage{width:390px;height:390px;max-width:80vw;max-height:43vh}.sage-img{position:relative;z-index:2;max-width:76%;max-height:96%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.18))}.opening-sage .sage-img{max-width:92%;max-height:92%}.water-ripples{position:absolute;z-index:1;bottom:12%;left:50%;width:42%;height:16%;transform:translateX(-50%);pointer-events:none}.water-ripples span{position:absolute;inset:0;border:2px solid rgba(207,170,77,.35);border-radius:50%;animation:ripple 4.5s infinite}.water-ripples span:nth-child(2){animation-delay:1.4s}.water-ripples span:nth-child(3){animation-delay:2.8s}@keyframes ripple{0%{transform:scale(.55);opacity:.65}100%{transform:scale(1.35);opacity:0}}.instruction{text-align:center;font-size:20px;line-height:1.34;margin:11px 0}.unlock{justify-self:center;padding:9px 24px;color:#6a6f6d;margin-bottom:7px}.progress{height:10px;border-radius:99px;background:#dce2dc;overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold))}.resources{background:linear-gradient(180deg,#498b82,#28675f)}.resources a{display:block;color:white;text-decoration:none;margin:0 0 18px;padding:14px;border-radius:14px;background:rgba(255,255,255,.07)}.resources span{display:block;opacity:.82;margin-top:6px;font-family:Arial,sans-serif}.audio-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:22px;box-shadow:0 -8px 28px rgba(0,0,0,.08);overflow:hidden}.settings-title{width:100%;border:0;border-radius:0;background:transparent;display:grid;grid-template-columns:1fr 1fr 40px;text-align:left;box-shadow:none;padding:10px 20px}.settings-title span{text-align:center}.settings-title i{text-align:right;color:var(--gold);font-style:normal}.settings-body{padding:0 20px 14px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.collapsed .settings-body{display:none}.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;grid-column:1/-1}.modes button{padding:9px 12px}label{font-family:Arial,sans-serif;font-weight:700;font-size:14px}select,input{width:100%;margin-top:7px;font-size:16px}select{padding:10px;border-radius:12px;border:1px solid var(--line);background:white}.audio-status{grid-column:1/-1;font-family:Arial,sans-serif;margin:0;opacity:.72}@media(max-width:1120px){body{overflow:auto}.app-shell{height:auto;min-height:100vh}.practice{grid-template-columns:1fr}.side{max-height:none}.center-panel{min-height:620px}.resources{order:3}.brand strong{font-size:34px}.settings-body{grid-template-columns:1fr}.modes{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start}.top-actions{flex-wrap:wrap;justify-content:flex-end}}@media(max-height:790px) and (min-width:1121px){.app-shell{grid-template-rows:66px 1fr auto;padding:7px 12px;gap:7px}.brand-avatar{width:44px;height:44px}.brand strong{font-size:33px}.brand em{font-size:14px}button{padding:8px 18px}.practice{grid-template-columns:250px minmax(430px,1fr) 290px;gap:10px}.side{padding:16px;border-radius:20px}.side h2{font-size:23px;margin-bottom:12px}.center-panel{padding:12px 16px;border-radius:22px}.stage-head{padding:9px 16px}.stage-head h1{font-size:29px}.stage-head strong{font-size:24px}.instruction{font-size:17px;margin:7px 0}.left-panel li{padding:8px 9px;font-size:15px}.resources a{margin-bottom:10px;padding:10px}.mantra{margin-top:16px;padding:12px}.settings-title{padding:8px 18px}.settings-body{padding-bottom:10px}.modes button{padding:7px}.opening-sage{width:320px;height:320px}.hero-card{height:min(520px,calc(100vh - 142px))}.hero-card h1{font-size:34px}.hero-card p{font-size:18px}.begin{font-size:18px;padding:11px 34px}}

/* v20 opening MP4 and mobile session refinements */
.opening-video{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.mobile-edge-tab,.mobile-drawer-close,.mobile-panel-scrim{display:none}

@media(max-width:1120px){
  body{overflow:hidden}
  .app-shell{height:100svh;min-height:100svh;grid-template-rows:auto 1fr auto;padding:8px;gap:6px;overflow:hidden}
  .topbar{align-items:center;gap:8px;min-height:54px}
  .brand{gap:8px;min-width:0}
  .brand-avatar{width:42px;height:42px;border-width:2px}
  .brand strong{font-size:clamp(26px,8vw,34px);line-height:.9}
  .brand em{font-size:12px}
  .top-actions{gap:6px;justify-content:flex-end;flex-wrap:nowrap}
  .top-actions button{font-size:13px;padding:8px 10px}
  .opening{height:100%;min-height:0;overflow:hidden}
  .hero-card{width:100%;height:100%;max-height:none;padding:12px;border-radius:24px;justify-content:center}
  .opening-sage{width:min(72vw,360px);height:min(72vw,360px);max-height:42svh}
  .hero-card h1{font-size:clamp(28px,8vw,38px);margin:8px 0 4px}
  .hero-card p{font-size:clamp(16px,4.5vw,19px);margin-bottom:10px}
  .begin{font-size:18px;padding:12px 34px}
  .practice{position:relative;height:100%;min-height:0;display:block;overflow:hidden}
  .center-panel{height:100%;min-height:0;border-radius:24px;padding:10px;grid-template-rows:auto minmax(0,1fr) auto auto auto}
  .stage-head{padding:10px 12px;border-radius:16px}
  .stage-head h1{font-size:clamp(22px,6vw,31px)}
  .stage-head strong{font-size:clamp(20px,6vw,26px)}
  .main-sage-stage{min-height:0;height:100%}
  .main-sage-stage .sage-img{max-width:88%;max-height:92%}
  .instruction{font-size:clamp(16px,4.2vw,20px);margin:8px 2px;line-height:1.28}
  .side{position:fixed;z-index:40;top:0;bottom:0;width:min(84vw,340px);max-height:none;border-radius:0;padding:58px 18px 18px;transition:transform .24s ease;box-shadow:0 18px 50px rgba(0,0,0,.28)}
  .mobile-drawer-left{left:0;transform:translateX(-104%)}
  .mobile-drawer-right{right:0;transform:translateX(104%)}
  body.mobile-left-open .mobile-drawer-left{transform:translateX(0)}
  body.mobile-right-open .mobile-drawer-right{transform:translateX(0)}
  .mobile-drawer-close{display:grid;position:absolute;top:12px;right:12px;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;font-size:28px;line-height:1;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:none}
  .mobile-edge-tab{display:none;position:fixed;z-index:32;border-radius:16px 16px 0 0;background:var(--teal);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:0 6px 20px rgba(0,0,0,.18);font-family:Arial,sans-serif;font-size:13px;padding:8px 13px}
  .practice:not(.hidden) .mobile-edge-tab{display:block}
  .left-tab{left:-30px;top:48%;transform:rotate(90deg)}
  .right-tab{right:-48px;top:48%;transform:rotate(-90deg)}
  .bottom-tab{left:50%;bottom:6px;transform:translateX(-50%);border-radius:16px 16px 0 0}
  .mobile-panel-scrim{position:fixed;display:block;inset:0;z-index:35;background:rgba(0,0,0,.36)}
  .mobile-panel-scrim.hidden{display:none!important}
  .audio-panel{position:fixed;z-index:42;left:8px;right:8px;bottom:8px;max-height:78svh;overflow:auto;transform:translateY(calc(100% + 20px));transition:transform .24s ease;border-radius:22px}
  body.mobile-settings-open .audio-panel{transform:translateY(0)}
  .settings-title{grid-template-columns:1fr auto 32px;padding:12px 14px}
  .settings-title span{text-align:left;margin-left:8px}
  .settings-body{grid-template-columns:1fr;padding:0 14px 14px;gap:10px}
  .modes{grid-template-columns:1fr 1fr}
}

@media(max-width:560px){
  .app-shell{padding:6px;grid-template-rows:50px 1fr auto}
  .brand-avatar{width:38px;height:38px}
  .brand strong{font-size:27px}
  .brand em{display:none}
  .top-actions button{font-size:12px;padding:7px 8px}
  .hero-card{border-radius:20px;padding:10px}
  .opening-sage{width:min(78vw,330px);height:min(78vw,330px);max-height:44svh}
  .center-panel{border-radius:20px;padding:8px}
  .stage-head{padding:8px 10px}
  .stage-head small{font-size:11px}
  .instruction{font-size:16px}
  .unlock{padding:8px 18px;margin-bottom:5px}
}


/* v22 panda sizing, resource cleanup, and history page upgrades */
.practice-video{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.main-sage-stage{width:390px;height:390px;max-width:80vw;max-height:min(390px,52vh);justify-self:center;align-self:center}
.main-sage-stage .sage-img{width:100%;height:100%;max-width:92%;max-height:92%;object-fit:contain}
.mantra{border:0;border-radius:0;padding:0;color:#d4dddb;background:transparent;line-height:1.55;font-weight:700}
.resources{display:flex;flex-direction:column}
.resources a{font-weight:800;font-size:17px;line-height:1.18}
.resources span{display:none}
.creator-credit{display:block;margin-top:auto;text-align:center;color:rgba(255,255,255,.78);font-size:14px;line-height:1.35;padding-top:24px}

.history-page{overflow:auto}
.history-page .app-shell{min-height:100vh;height:auto;grid-template-rows:78px auto;padding-bottom:24px}
.history-main{display:grid;place-items:center;padding:12px 0 28px}
.history-card{width:min(980px,94vw);border-radius:34px;background:rgba(255,255,255,.82);box-shadow:0 18px 50px rgba(0,0,0,.1);padding:28px;text-align:left}
.history-card h1{text-align:center;font-size:42px;margin:8px 0 10px}
.history-lede{text-align:center;font-size:20px;line-height:1.42;margin:0 auto 22px;max-width:820px}
.history-art-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0 24px}
.history-art{border-radius:24px;background:linear-gradient(145deg,#fff8e6,#eaf3e6);border:1px solid var(--line);padding:14px;text-align:center}
.history-art img{width:100%;max-height:260px;object-fit:contain;display:block}
.history-art figcaption{font-family:Arial,sans-serif;font-size:14px;color:#5f706d;margin-top:8px}
.history-sections{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.history-note,.history-section{background:rgba(236,245,235,.72);border:1px solid var(--line);border-radius:22px;padding:18px}
.history-section h2,.history-note h2{margin:0 0 8px;font-size:26px}
.history-section p,.history-note p{font-size:17px;line-height:1.5;margin:0 0 10px}
.history-note{margin-top:18px;background:rgba(255,248,230,.86)}
.history-actions{text-align:center;margin-top:22px}
.history-actions .begin{display:inline-block;text-decoration:none}

@media(max-width:1120px){
  .main-sage-stage{width:min(72vw,360px);height:min(72vw,360px);max-height:42svh}
  .main-sage-stage .sage-img{max-width:92%;max-height:92%}
  .creator-credit{margin-top:24px}
  .history-page{overflow:auto}
  .history-page .app-shell{height:auto;min-height:100svh;overflow:visible}
}

@media(max-width:760px){
  .history-card{padding:18px;border-radius:24px}
  .history-card h1{font-size:32px}
  .history-lede{font-size:17px}
  .history-art-grid,.history-sections{grid-template-columns:1fr}
  .history-art img{max-height:220px}
}

@media(max-width:560px){
  .main-sage-stage{width:min(78vw,330px);height:min(78vw,330px);max-height:44svh}
}

/* v23 calming panda swell restored for MP4 video on all devices */
.sage-img{
  transform-origin:center center;
  animation:sageCalmSwell 7.5s ease-in-out infinite;
  will-change:transform;
}

@keyframes sageCalmSwell{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}

@media (prefers-reduced-motion: reduce){
  .sage-img{
    animation:none;
  }
}