/* Playable MVP reference: preserve the cast and keep the garden in focus. */
html body { --phone-w:440px; --phone-h:min(844px,calc(100dvh - 183px)); }
.playback { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px; }
.playback span { font:12px var(--f-mono);color:#b2c5aa; }
body .segs { flex-wrap:wrap; }
body .segs button { flex:1 1 40%; }
body .bench { padding:20px 24px 40px; }
body .studiobar { align-items:center; margin-bottom:20px; padding-bottom:16px; }
body .brandmark { width:42px;height:42px;border-radius:14px; }
.build-label { display:block;font:500 12px var(--f-mono);color:var(--bench-ink-2);margin-top:5px; }
.review-toggle { border:1px solid #64806b;border-radius:12px;background:#263c2e;color:#edf7e7;padding:11px 16px;font:700 14px var(--f-body);cursor:pointer;min-height:44px; }
.review-toggle:hover { background:#36533e; }
.review-toggle[aria-pressed="true"] { border-color:#a3d970; }
.play-mode .workbench { display:flex;justify-content:center; }
.play-mode .rail,.play-mode .howto,.play-mode .footnote,.play-mode .studiometa { display:none; }
body .devicecol { position:static; }
body .screen { font-size:16px; }
body .statusbar { height:26px; }
body .hud { padding:8px 16px 14px;gap:8px;flex-wrap:wrap; }
body .hudtitle { font-size:20px;white-space:normal; }
body .hud .back { min-width:44px;min-height:44px; }
body .coin { font-size:14px; }
body .nav { padding:8px 4px max(10px,env(safe-area-inset-bottom)); }
body .nav button { font-size:12px;min-height:52px;gap:5px; }
body .nav button.on { background:#e2f0d8; }
body .gardenwrap { padding-top:14px; }
body .goalbar { margin-bottom:18px;padding:13px; }
body .goalbar .gtitle { font-size:18px; }
body .goalbar .gsub { font-size:14px; }
body .plots { gap:10px;padding:0 14px 18px; }
body .plot { min-height:200px;padding:12px 5px;border-radius:22px;justify-content:center;gap:8px; }
body .plot > svg { width:90px;height:110px; }
body .plot .badge { position:static;order:3; }
body .plot .pname { font-size:16px; }
body .plot .lbl { font-size:14px; }
body .plot .pill { font-size:12px;letter-spacing:0;text-transform:none;padding:4px 6px;white-space:normal; }
body .pill { font-size:12px; }
body .sect { font-size:12px;letter-spacing:.08em; }
body .tile .tsub,body .row .rsub { font-size:14px;line-height:1.45; }
body .tile .tmeta { font-size:14px;max-width:100px; }
body .tile .tname,body .row .rname { font-size:16px; }
body .mini { min-height:44px;font-size:14px; }
body .row { flex-wrap:wrap; }
body .moodrow { flex-wrap:wrap;justify-content:center; }
body .carebtn { min-height:78px; }
body .carebtn .ctime { font-size:14px; }
body .carebtn .cname { font-size:16px; }
body .bubble { font-size:16px; }
body .growth .glabels,body .gtick { font-size:12px;letter-spacing:0; }
body .gticks { gap:4px;flex-wrap:wrap; }
body .timebar { margin-top:18px; }
body .tlabel,body .segs button,body .benchbtns button { font-size:13px; }
body .segs button,body .benchbtns button { min-height:44px; }
.session-note { font-size:13px;color:#b2c5aa;line-height:1.5;margin:10px 0 14px; }
.setup-steps { display:flex;gap:8px;margin:0 0 18px;color:var(--ink-2);font-size:14px; }
.setup-steps span { flex:1;border-bottom:3px solid var(--line);padding:8px 0; }
.setup-steps .active { border-color:var(--leaf);color:var(--leaf);font-weight:800; }
.purchase-summary { padding:16px;margin:18px 0;border:1.5px solid var(--line);border-radius:18px;background:#eaf4e1; }
.purchase-summary h3 { margin:0 0 10px;font:600 19px var(--f-display); }
.purchase-summary p { margin:7px 0;font-size:14px;line-height:1.5;display:flex;justify-content:space-between;gap:12px; }
.purchase-summary .total { padding-top:10px;border-top:1px solid #b9cdb0;font-weight:800; }
.purchase-summary .unaffordable { color:#9d3029; }
.customizer { padding:16px;border:1px solid var(--line);border-radius:18px;margin:16px 0; }
.preset-grid { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:10px 0 16px; }
.preset { min-height:44px;min-width:0;border:2px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer;color:var(--ink);font-size:21px; }
.preset[aria-pressed="true"] { border-color:var(--ink);outline:2px solid var(--sprout);outline-offset:2px; }
.customizer p { font-size:14px;line-height:1.5; }
.custom-preview { width:150px;height:165px;margin:0 auto; }
.custom-preview svg { width:100%;height:100%; }
body .welcome { overflow:auto;min-height:0; }
body .wtitle { font-size:58px; }
body .wfoot { font-size:12px;letter-spacing:.02em; }
@media(max-width:600px) {
  html body { --phone-w:100%;--phone-h:calc(100dvh - 146px); }
  .playback { margin:10px 12px; }
  body .bench { padding:12px 0 24px; }
  body .studiobar { padding:0 12px 12px;margin-bottom:0;gap:8px; }
  body .brandtext h1 { font-size:20px; }
  body .kicker { display:none; }
  body .brandmark { width:32px;height:32px; }
  .build-label { font-size:11px; }
  .review-toggle { padding:10px;font-size:13px; }
  body .devicecol { max-width:100%; }
  body .device { border-radius:0;padding:0;box-shadow:none; }
  body .screen { border-radius:0; }
  body .statusbar { display:none; }
  body .timebar { margin:18px 14px; }
  body .plots { padding:0 10px 16px;gap:7px; }
  body .plot { min-height:190px; }
  body .plot > svg { width:78px;height:100px; }
  body .rail,body .howto,body .footnote { margin:18px 14px;width:auto; }
}
@media(max-width:350px) {
  body .brandmark { display:none; }
  body .plot .lbl,body .plot .pill { font-size:12px; }
  body .coin { font-size:12px;padding:5px; }
  body .caregrid { padding-left:10px;padding-right:10px;gap:6px; }
}