.life{--ink:#233b43;--cream:#fff5dd;--turq:#236f70;background:var(--cream);color:var(--ink);border-radius:28px;padding:30px;margin:20px 0 55px;border:3px solid #bda36f;scroll-margin-top:14px}.life h2,.life h3{color:var(--ink)}.life p{line-height:1.5}.life-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.life-head h2{font-size:44px;letter-spacing:-1px;margin:8px 0}.life .eyebrow{color:#496d67}.life-balance{background:#f4d272;padding:12px 20px;border:2px solid #a17e31;border-radius:30px;white-space:nowrap;font-weight:800}.life-tabs{display:flex;overflow-x:auto;gap:8px;padding:18px 0;scrollbar-width:thin}.life button,.life select{color:var(--ink);background:#fffaf0;border:2px solid #b7b9a2;border-radius:14px;min-height:44px;font:700 12px/1.3 system-ui;padding:10px 13px}.life button:hover,.life button[aria-pressed=true]{background:#e0edcf;border-color:#4b8175}.life button:focus-visible,.life select:focus-visible,.life-piece:focus-visible{outline:4px solid #b86438;outline-offset:3px}.life-tabs button{flex:none;white-space:nowrap}.life-tabs button span{display:block;font-size:24px}.life-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px}.life-stage-wrap{min-width:0}.life-stage{position:relative;aspect-ratio:900/560;overflow:hidden;isolation:isolate;border:3px solid #365b58;border-radius:20px;background:#b8d8cb;touch-action:pan-y}.life-backdrop{position:absolute;inset:0;pointer-events:none}.life-backdrop svg{width:100%;height:100%;display:block}.life-piece{position:absolute;transform:translate(-50%,-85%);width:12%;height:26%;display:flex;align-items:end;justify-content:center;cursor:grab;touch-action:none;user-select:none;background:none!important;border:0!important;padding:0!important;min-height:0!important;border-radius:10px!important}.life-piece svg{max-width:100%;max-height:100%;filter:drop-shadow(0 6px 1px #365b5825);pointer-events:none}.life-piece.selected{outline:3px dashed #fff2b6;background:#fff5!important}.life-piece[data-person=true]{width:14%;height:39%}.life-caption{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;margin:10px 0}.life-caption p{margin:0}.life-side{background:#e7e6cf;padding:18px;border-radius:18px;border:1px solid #b7c6b2}.life-side h3{font:26px/1.1 Georgia,serif;margin:3px 0 15px}.life-side p{font-size:12px}.life-task{display:grid;gap:7px;margin:15px 0}.life-task span{font-size:12px;padding:8px;border-radius:9px;background:#fff9eb}.life-task span.complete{background:#c7ddbd}.life .life-main-action{background:#236f70;color:#fff9e9;border-color:#184f50;width:100%}.life-options{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.life-options label{font-size:11px;display:grid;gap:4px}.life-options button.swatch{width:44px;padding:0;border-radius:50%;box-shadow:inset 0 0 0 4px #fff7}.life-status{padding:14px;background:#e1edda;border-radius:12px;min-height:50px;font-size:13px;margin:15px 0 0;border:1px solid #98b39b}.life-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.life-card{background:#f0e5c9;border:1px solid #c0ad7e;border-radius:17px;padding:18px}.life-card h3{font:23px Georgia,serif;margin:0 0 10px}.life-card p{font-size:12px}.life-artboard{background:#fff9e9;border:3px solid #c4a063;min-height:100px;padding:12px;border-radius:12px;display:flex;gap:5px;flex-wrap:wrap;align-items:center;font-size:31px}.life-artboard .bead{display:inline-block;width:24px;height:24px;border-radius:50%;border:2px solid #876a2a}.life-board{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:12px 0}.life-board span{background:#fff8df;border:1px solid #b99d64;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:11px;position:relative}.life-board b{position:absolute;inset:0;display:grid;place-items:center;font-size:21px}.life-board b.jackal{transform:translateY(5px)}.life-rules{font-size:12px}.life-hints{font-size:11px;color:#596b63}.life-confetti{position:absolute;inset:0;pointer-events:none;z-index:90;overflow:hidden}.life-confetti i{position:absolute;top:-20px;width:9px;height:16px;animation:life-fall 1.6s ease-in forwards}@keyframes life-fall{to{transform:translateY(650px) rotate(450deg)}}.life-controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.life-museum details{color:var(--ink);border-color:#b5a67e}.life-museum details p{color:var(--ink)}@media(max-width:1000px){.life-grid{grid-template-columns:1fr}.life-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}.life-side .life-main-action{align-self:end}.life-task{margin:0}.life-head h2{font-size:36px}}@media(max-width:600px){.life{padding:14px;margin-inline:-7px;border-radius:20px}.life-head{align-items:start}.life-head h2{font-size:29px}.life-balance{font-size:11px;padding:10px}.life-side{display:block}.life-bottom{grid-template-columns:1fr}.life-stage{aspect-ratio:1.18}.life-piece{width:16%;height:25%}.life-piece[data-person=true]{width:20%;height:37%}.life-caption{display:block}.life-caption button{margin-top:8px}.life-task{margin:10px 0}.life button{font-size:11px}.life-artboard{font-size:26px}}

.life-spiral{display:block;position:relative;aspect-ratio:1;max-width:400px;margin-inline:auto;background:radial-gradient(circle,#e8d39a,#fff9e9);border-radius:50%}.life-spiral span{position:absolute;width:7%;transform:translate(-50%,-50%)}

/* Everyday free play takes the stage; learning stays optional. */
.life-grid{grid-template-columns:1fr}.life-side{display:block;padding:12px}.life-side summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}.life-stage{max-height:74vh}.life-play-tray{padding:16px;background:#e1edda;border:2px solid #97b29c;border-radius:18px;margin-top:12px}.life-play-tray p{font-size:12px}.life-play-tray>button{margin:4px}.life-play-tray details{margin-top:12px}.life-prop-shelf{display:flex;flex-wrap:wrap;gap:7px;padding-top:12px}.life-prop-shelf button{width:65px;height:75px;padding:2px}.life-prop-shelf svg{height:100%;width:100%}.life-piece[data-pose=sleep] svg{transform:rotate(75deg)}.life-piece[data-pose=sit]{height:30%}.life-piece[data-pose=dance] svg{animation:life-dance .7s ease-in-out infinite alternate}@keyframes life-dance{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}@media(prefers-reduced-motion:reduce){.life-piece[data-pose=dance] svg{animation:none}}.hero{min-height:0!important;padding-block:28px!important;display:block!important}.hero h1{font-size:clamp(40px,7vw,76px)!important}.hero .lead{font-size:24px!important}.hero .hero-card{display:none}#history-play{padding:20px;border:1px solid #a78b51;border-radius:20px;margin-block:24px}#history-play>summary{cursor:pointer;font:700 20px system-ui;padding:15px}#history-play .hero-card{margin:20px 0} .life-stage-wrap{min-width:0}@media(max-width:600px){.life-stage{aspect-ratio:1.18;max-height:none}.life-side{display:block}.life-play-tray{padding:10px}}

.life-piece svg{filter:drop-shadow(0 9px 3px #35220d55)}.life-stage{box-shadow:inset 0 0 35px #34241130,0 8px 20px #17281d22;border-color:#916e38}.life-piece.selected{outline:3px solid #fff2b6;box-shadow:0 0 0 5px #5d814150}.life-backdrop{transition:filter .3s}@media(prefers-reduced-motion:reduce){.life-backdrop{transition:none}}