/* A smaller Today sheet; the game keeps its existing size. */
@media(min-width:900px) {
 #space > .today-folio,
 #space .today-folio:has(.folio-tool[data-type="timer"][data-size="compact"]):has(.folio-tool[data-type="checklist"][data-size="compact"]) {
  width:278px;min-height:0;padding:10px 12px 10px 20px;grid-template-rows:24px 64px 46px;
 }
 #space .today-folio-header { height:24px;min-height:24px; }
 #space .today-folio-header>span { font-size:17px; }
 #space .today-folio-date { font-size:10px; }
 #space .today-folio>.folio-tool[data-type="checklist"][data-size] .checklist-items { height:64px;min-height:64px;max-height:64px;background-size:auto; }
 #space .today-folio>.folio-tool[data-type="checklist"] .checklist-items label { height:32px;min-height:32px; }
 #space .today-folio>.folio-tool[data-type="checklist"][data-size] .checklist-text { height:32px;min-height:32px;font-size:12px; }
 #space .today-folio>.folio-tool[data-type="checklist"] input[type="checkbox"] { height:32px; }
 #space .today-folio>.folio-tool[data-type="timer"][data-size] .overlay-shell { height:46px; }
 #space .today-folio>.folio-tool[data-type="timer"][data-size] .overlay-body { height:45px;min-height:45px; }
 #space .today-folio>.folio-tool[data-type="timer"] .overlay-header { height:45px;min-height:45px;left:7px;width:34px; }
 #space .today-folio>.folio-tool[data-type="timer"] .overlay-title { font-size:9px!important; }
 #space .today-folio>.folio-tool[data-type="timer"][data-size] .timer-value { top:12px;left:44px;font-size:21px; }
 #space .today-folio>.folio-tool[data-type="timer"][data-size] .timer-actions { top:5px;right:5px;height:34px;gap:3px; }
 #space .today-folio>.folio-tool[data-type="timer"] .timer-actions .round-control { width:32px;min-width:32px;height:34px;min-height:34px;padding:9px; }
}
/* Keep all four keepsakes, with slightly quieter proportions. Their outer
   nodes retain ownership of drag coordinates and authored placement. */
.desk-object.object-imagination { width:78px;height:62px; }
.desk-object.object-dance { width:59px;height:63px; }
.desk-object.object-glance { width:82px;height:56px; }
.desk-object.object-celebrate { width:68px;height:70px; }

/* The keys are the invitation. Feedback is immediate; no timed pop-up. */
.shortcut-demo { position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 28px);color:#254753;pointer-events:auto; }
.shortcut-demo[hidden] { display:none; }
.shortcut-nudge { position:absolute;white-space:nowrap;font:italic 12px/1.3 Georgia,serif;color:#345562;text-shadow:0 1px 2px #fff9;transform:rotate(-5deg);pointer-events:none; }
.shortcut-nudge-before { right:calc(100% + 12px); }
.shortcut-nudge-after { left:calc(100% + 12px); }
/* Let a little coastline through the lower composer edge, while the text
   and controls retain their full opacity. The attached shoulders stay solid. */
.hud[data-mode="home"] .hud-reveal { background:linear-gradient(to bottom,#0b0d10 0%,#0b0d10 42%,#0b0d10f5 64%,#0b0d10dc 84%,#0b0d10b8 100%); }
.hud[data-mode="home"] .hud-composer { background:transparent; }
.shortcut-hint { font:500 11px/1.35 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-shadow:0 1px #f9fff3b0; }
.shortcut-touch-copy { display:none; }
.shortcut-keys { display:flex;align-items:center;gap:7px; }
.shortcut-keys button { display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:82px;height:44px;padding:6px 11px;border:1px solid #fffef7;border-bottom-color:#99b0b8;border-radius:8px;background:linear-gradient(140deg,#fffff7ed,#e6eeebf0);box-shadow:0 2px 0 #7f9aa780,0 4px 7px -4px #15354f70,inset 0 1px #fff;color:#34515e;cursor:pointer; }
.shortcut-keys button>span { align-self:flex-start;font:17px/1.1 system-ui; }
.shortcut-keys kbd { align-self:flex-end;font:500 10px/1.4 -apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
.shortcut-keys button[aria-pressed="true"] { background:#c0e5ff;border-color:#649fc4;color:#164864;box-shadow:inset 0 1px 3px #356c9028,0 1px 0 #7296a5;transform:translateY(2px); }
.shortcut-keys button:focus-visible { outline:2px solid #337fa7;outline-offset:4px; }
.shortcut-plus { font:12px system-ui;color:#517682; }
.hud .speaking-pill { top:calc(100% + 66px);transform:translateX(-50%);transition:opacity 120ms linear; }
.hud.pill-speaking .speaking-pill { transform:translateX(-50%); }
html.shortcut-preview .pro-edge { opacity:1;background:#76bdff18;box-shadow:inset 0 0 50px 10px #70b7f557,inset 0 0 0 2px #99d6ff75;transition:opacity 120ms linear; }
html.shortcut-preview .flyby-target { visibility:hidden;pointer-events:none; }
@media(max-width:899px) {
 #space > .today-folio,
 #space .today-folio:has(.folio-tool[data-type="timer"][data-size="compact"]):has(.folio-tool[data-type="checklist"][data-size="compact"]) { width:min(100%,300px); }
 .shortcut-demo { gap:9px;top:calc(100% + 44px); }
 .hud .speaking-pill { top:calc(100% + 100px); }
 .shortcut-desktop-copy { display:none; }
 .shortcut-touch-copy { display:inline; }
 .shortcut-hint { font-size:10px;max-width:50px; }
 .shortcut-keys button { min-width:80px; }
 .playground { padding-top:260px; }
}
@media(prefers-reduced-motion:reduce) {
 .hud .speaking-pill { display:flex;transition:none; }
 .hud.compact .speaking-pill,.hud[data-retracted="true"] .speaking-pill { display:none; }
 .pill-wave i { animation:none!important;transform:scaleY(.6); }
 html.shortcut-preview .pro-edge { transition:none; }
}
html[data-motion="paused"] .speaking-pill .pill-wave i { animation-play-state:paused; }

/* V48: two quiet keycaps swap in place with the active voice preview. */
.shortcut-keys { gap:10px; }
.shortcut-keys button { position:relative;min-width:57px;height:31px;padding:4px 7px;gap:5px;border-radius:6px; }
.shortcut-keys button::after { content:'';position:absolute;inset:-6px -3px; }
.shortcut-keys button>span { font-size:13px; }
.shortcut-keys kbd { font-size:8px; }
.hud.pill-speaking .shortcut-demo { opacity:0;visibility:hidden;pointer-events:none; }
.hud .speaking-pill { top:calc(100% + 7px); }
.hud.pill-speaking .speaking-pill { pointer-events:auto;cursor:pointer; }
.hud .speaking-pill:focus-visible { outline:2px solid #bce4ff;outline-offset:3px; }
.cursor-companion { transition:none; }
.cursor-companion:not([hidden]) { will-change:transform; }

/* The dusk stays after the apps, without a second empty screen of coastline. */
.chapter-track.apps-track { margin-bottom:24px; }
.chapter-track.privacy-track { padding-top:140px; }
.privacy-track::before { mask-image:linear-gradient(to bottom,transparent,#00000020 45px,#00000080 100px,#000 180px,#000 calc(100% - 260px),#000000a6 calc(100% - 150px),transparent); }

/* A broad, quiet pool of white light lets the orbital sketch stay over the sea. */
.scene-afterword #story-deck::before { content:'';position:absolute;z-index:-2;inset:-50px -90px;pointer-events:none;background:radial-gradient(ellipse,#f8fffcfa 0%,#f5fcf6e8 32%,#eff9f2a3 55%,#eff9f22b 67%,transparent 76%); }
.scene-afterword #story-caption { color:#153642;text-shadow:0 1px 2px #fff,0 0 12px #ffffff80; }
.scene-afterword #story-caption em { color:#244c5c; }
.scene-afterword .interlude-note { color:#294e5c;text-shadow:0 1px 4px #fff;font-weight:500; }
@media(max-width:899px) {
 .shortcut-keys button { height:34px;min-width:59px; }
 .hud .speaking-pill { top:calc(100% + 42px); }
 .playground { padding-top:228px; }
 .chapter-track.apps-track { margin-bottom:20px; }
 .chapter-track.privacy-track { padding-top:110px; }
 .privacy-track::before { mask-image:linear-gradient(transparent,#00000050 70px,#000 150px,#000 calc(100% - 170px),#00000080 calc(100% - 80px),transparent); }
 .scene-afterword #story-deck::before { inset:-35px -23px; }
}

/* V49: mobile objects keep their own silhouettes and caption space. The
   normal-flow rows also stay clear when someone adds or rearranges a tool. */
@media(max-width:899px) {
 /* Editable text stays at a readable size, including when iOS focuses it. */
 .hud #command { font-size:16px!important; }
 .hud #hud-note-text,
 #playground #space .note-input,
 #playground #space .today-folio > .folio-tool[data-type="checklist"][data-size] .checklist-text,
 #editor-dialog input,#editor-dialog select { font-size:16px; }
 #playground #space > .overlay[data-type][data-size] { margin:0 auto; }
 #playground.is-arranging #space > .overlay[data-type][data-size] { margin-bottom:44px; }
 #playground > .object-space {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:120px;column-gap:24px;row-gap:24px;
  width:calc(100% - 64px);max-width:340px;margin:50px auto 0;
  align-items:center;justify-items:center;
 }
 #playground > .object-space > .desk-object { margin:0; }
 #playground > .object-space > .object-glance { grid-column:1 / -1; }
 #playground .object-space .desk-object:is(.object-imagination,.object-glance,.object-celebrate)::after {
  left:50%;right:auto;top:calc(100% + 9px);bottom:auto;width:140px;
  transform:translateX(-50%);white-space:normal;line-height:1.25;
 }
 #playground .object-space .object-imagination::after { font-size:13px!important; }
 #playground .object-space .object-celebrate::after { font-size:13px!important; }
 #playground .object-space .object-glance::after { font-size:12px!important; }
 #playground > .landing-dock { position:relative;inset:auto;transform:none;margin:35px auto 0; }
 #playground { padding-bottom:82px; }
 #playground .desktop-buddy { left:26px;bottom:15px;transform:rotate(-3deg); }
 #playground .desktop-walkway { height:60px; }

 /* The Mac is one row, with a little space for the paper and game below it.
    Their height comes from their content, not a phone-specific y coordinate. */
 .screen-chapter-stage {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px 24px;height:auto;padding:66px 8px 12px;
 }
 .screen-chapter-stage .chapter-mac {
  position:relative;grid-column:1 / -1;inset:auto;transform:none;
  width:calc(100% + 16px);max-width:none;margin:0 -8px;
 }
 .screen-chapter-stage .chapter-mac figcaption {
  position:static;width:auto;margin:16px 0 0;text-align:center;
  font-size:12px;line-height:1.5;
 }
 .screen-chapter-stage .screen-schedule,
 .screen-chapter-stage .cross-circle {
  position:relative;inset:auto;width:100%;max-width:230px;align-self:start;justify-self:center;
 }
 .screen-chapter-stage .cross-circle { margin-top:24px; }
}
@media(max-width:359px) {
 #playground > .object-space { width:calc(100% - 44px);column-gap:16px; }
 #playground .object-space .desk-object:is(.object-imagination,.object-glance,.object-celebrate)::after { width:124px; }
 .screen-chapter-stage { grid-template-columns:minmax(0,1fr);row-gap:34px; }
 .screen-chapter-stage .screen-schedule { width:200px; }
 .screen-chapter-stage .cross-circle { width:200px;margin-top:0; }
}

/* V51: the phone composition keeps the Mac and a few small keepsakes.
   Full-size desktop cards stay out of the default phone scene. */
@media(max-width:599px) {
 #playground { padding-bottom:58px; }
 #playground .device-stage { margin-bottom:0; }
 #playground .mobile-desk-toolbar,
 #playground .desktop-buddy { display:none; }
 #playground #space { display:block;width:calc(100% - 40px);max-width:370px;margin:0 auto; }
 #playground #space > .object-music,
 #playground #space > .today-folio,
 #playground #space > .overlay[data-type][data-size] { display:none; }
 /* A tool explicitly chosen in the composer still appears in this one slot. */
 #playground #space > .overlay.selected[data-type][data-size]:not([hidden]) { display:block;max-width:100%;margin:0 0 0 auto; }
 #playground > .object-space {
  position:absolute;inset:0;display:block;pointer-events:none;
  width:auto;height:auto;max-width:none;margin:0;
 }
 #playground > .object-space > .desk-object { display:none; }
 #playground > .object-space > .object-glance { display:block;position:absolute;top:208px;right:10px;left:auto;width:68px;height:46px;pointer-events:auto; }
 #playground > .object-space > .object-dance { display:block;position:absolute;top:184px;left:24px;width:42px;height:45px;pointer-events:auto; }
 #playground .object-space .object-glance::after { display:none; }
 #playground > .landing-dock { margin:28px auto 0; }
 #playground .desktop-walkway { height:48px; }
 #playground .cat-asides { display:none; }
 .screen-chapter-stage { display:block;height:auto;padding:66px 0 8px; }
 .screen-chapter-stage .chapter-mac { width:100%;margin:0; }
 .screen-chapter-stage .screen-schedule,
 .screen-chapter-stage .cross-circle { display:none; }
}

/* The keyboard invitation belongs to the computer experience. Hide before
   scripts mount too, so it never flashes into the phone composition. */
@media(max-width:599px), (hover:none) and (pointer:coarse) {
 .hud .shortcut-demo,.hud .speaking-pill { display:none; }
}

/* V52: a small, colorful constellation around the thought. The text stays
   still; only the ornaments float and twinkle, at independent slow tempos. */
.interlude-orbit { pointer-events:none;border-color:#7aaca64d;border-top-color:#c6a2b95c;border-bottom-color:#619ebd57; }
.interlude-orbit::after { border-color:#8b8cc73b;border-right-color:#d496805e; }
.interlude-orbit .interlude-planet {
 right:7%;top:1%;width:38px;height:38px;
 background:radial-gradient(circle at 28% 22%,#fffdecbf,transparent 43%),radial-gradient(circle at 72% 84%,#393f805c,transparent 65%),linear-gradient(135deg,#ffdab3 6%,#ee9eae 28%,#ae94db 49%,#81caca 71%,#2e788e);
 box-shadow:inset 1px 1px 2px #fff9,inset -4px -5px 7px #314b6d30,2px 6px 10px #53677e27,0 0 22px #d7b9e057;
 animation:interlude-float 8s ease-in-out infinite;
}
.interlude-planet::before { content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7dbb3,transparent 60%);animation:interlude-lustre 5s ease-in-out infinite; }
.interlude-planet::after { content:'';position:absolute;left:-38%;top:30%;width:176%;height:36%;border:2px solid #efc8ad;border-top-color:#d7d0f2b0;border-bottom-color:#ffedcf;border-radius:50%;transform:rotate(-27deg);box-shadow:0 1px 1px #9176a04a,inset 0 -1px #fff9; }
.interlude-orbit .interlude-star { position:absolute;width:27px;height:27px;left:auto;right:auto;top:auto;bottom:auto;animation:interlude-twinkle 4.8s ease-in-out infinite; }
.interlude-star::before { content:'';position:absolute;inset:0;clip-path:polygon(50% 0,63% 35%,100% 50%,63% 63%,50% 100%,36% 64%,0 50%,35% 36%);background:linear-gradient(140deg,#fff8db 2%,var(--star-light) 35%,var(--star-deep) 85%); }
.interlude-star::after { content:'';position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,var(--star-light),transparent 70%);opacity:.28;z-index:-1; }
.interlude-orbit .star-coral { left:3%;bottom:18%;--star-light:#ffb497;--star-deep:#cb6a88;transform:rotate(12deg); }
.interlude-orbit .star-lilac { right:-3%;top:53%;width:21px;height:21px;--star-light:#d6b9ff;--star-deep:#8664bd;animation-delay:-2.4s;animation-duration:5.4s; }
.interlude-orbit .star-gold { left:12%;top:-2%;width:18px;height:18px;--star-light:#ffdf7d;--star-deep:#d68a4c;animation-delay:-1.6s;animation-duration:4.2s; }
.interlude-orbit .star-aqua { right:24%;bottom:-3%;width:14px;height:14px;--star-light:#8ce7d7;--star-deep:#469aaa;animation-delay:-3.1s;animation-duration:6s; }
@keyframes interlude-twinkle { 0%,100% { opacity:.6;transform:scale(.8) rotate(-10deg); } 46% { opacity:1;transform:scale(1.14) rotate(12deg); } 68% { opacity:.82;transform:scale(.95) rotate(3deg); } }
@keyframes interlude-float { 0%,100% { transform:translate3d(0,0,0) rotate(-8deg); } 50% { transform:translate3d(-7px,-10px,0) rotate(8deg); } }
@keyframes interlude-lustre { 0%,100% { opacity:.35; } 50% { opacity:.95; } }
.scene-afterword:not([data-scene-active="true"]) :is(.interlude-star,.interlude-planet),
.scene-afterword:not([data-scene-active="true"]) .interlude-planet::before,
html[data-motion="paused"] :is(.interlude-star,.interlude-planet),
html[data-motion="paused"] .interlude-planet::before,
html[data-visible="false"] :is(.interlude-star,.interlude-planet),
html[data-visible="false"] .interlude-planet::before { animation-play-state:paused; }
@media(max-width:599px) {
 .interlude-orbit .interlude-planet { width:27px;height:27px;right:8%;top:-5%; }
 .interlude-orbit .star-coral { width:21px;height:21px;left:2%;bottom:10%; }
 .interlude-orbit .star-gold { left:7%;top:-4%;width:14px;height:14px; }
 .interlude-orbit .star-lilac { right:-2%;top:67%;width:17px;height:17px; }
 .interlude-orbit .star-aqua { bottom:-8%; }
}
@media(prefers-reduced-motion:reduce) {
 .interlude-orbit :is(.interlude-star,.interlude-planet),.interlude-planet::before { animation:none; }
}

/* A drag starts on the object surface, never as a text-selection gesture.
   Editable fields retain normal selection outside an active drag. */
#playground .overlay-shell,
#playground .today-folio,
#playground .desk-object { -webkit-user-select:none;user-select:none; }
#playground :is(input,textarea,[contenteditable="true"]) { -webkit-user-select:text;user-select:text; }
#playground :is(.overlay-shell,.today-folio,.desk-object) img { -webkit-user-drag:none; }
html:has(#playground :is(.dragging,.object-moving)),
html:has(#playground :is(.dragging,.object-moving)) * { -webkit-user-select:none!important;user-select:none!important; }