/* V12 — a coastal desktop of precise instruments and small collected objects. */
:root {--instrument-ink:#28353d;--instrument-rim:#f9fbfc;}
html {overflow-x:clip;}
body {background:linear-gradient(180deg,#dcecf08c,#e3edf29e),url('/assets/coast.webp') center/cover fixed;color:#21323e;overflow-x:clip;}
.playground,.scene-afterword,.closing,footer {background:transparent;}
.hero-atmosphere {display:none;}
.playground {padding-top:250px;min-height:900px;height:100svh;}
.device-stage {width:min(1260px,calc(100% - 64px));height:530px;}
.macbook {top:50px;width:740px;max-width:70%;}
.desktop-embel-hud {position:absolute;z-index:5;left:30%;top:0;width:40%;height:28px;background:#07090b;border-radius:0 0 13px 13px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;box-shadow:0 3px 9px #17212820;}
.desktop-embel-hud .emble-orb {width:18px;height:18px;}
.desktop-embel-hud svg {width:20px;height:20px;color:#e7edef;}
.desktop-embel-hud::before,.desktop-embel-hud::after {content:'';position:absolute;top:0;width:10px;height:10px;}
.desktop-embel-hud::before{right:100%;background:radial-gradient(circle at 0 100%,transparent 10px,#07090b 10.5px)}
.desktop-embel-hud::after{left:100%;background:radial-gradient(circle at 100% 100%,transparent 10px,#07090b 10.5px)}
.screen-orb {display:none;}
.desktop-work {top:21%;height:59%;left:22%;width:57%;}
.desktop-document h2 {font-size:25px;}
.desktop-document p {color:#677773;}

/* Space is allocated only while Pro is on; the adjacent link travels with it. */
.hud-actions {gap:10px;}
.pro-control {margin-left:0!important;gap:0;}
.pro-control .pro-channels {position:relative;right:auto;left:auto;top:auto;width:0!important;height:44px;overflow:hidden;flex-shrink:0;gap:0;transform:none;opacity:0;visibility:hidden;transition:width 380ms var(--shell-ease),opacity 200ms ease,visibility 0s 380ms;}
.hud.pro-previewing .pro-channels {width:88px!important;opacity:1;visibility:visible;transform:none;transition:width 380ms var(--shell-ease),opacity 220ms ease 80ms,visibility 0s;}
.pro-channels button {min-width:44px;width:44px;height:44px;padding:10px;flex-shrink:0;display:grid;place-items:center;}
.pro-channels svg {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.hud #pro-preview {color:#cdd7e1;min-width:45px;}
.hud #pro-preview[aria-pressed="true"] {color:#d7eaff;background:#3358854d;box-shadow:inset 0 0 0 1px #9ac7ff5c,0 0 15px #7bb5ff32;}
#pro-preview[aria-pressed="true"] .pro-dot {background:#bbdbff;box-shadow:0 0 6px 2px #7bb7ff99;}
html[data-pro-channel~="listen"] .pro-edge,html[data-pro-channel~="watch"] .pro-edge {opacity:1;}
.hud .playground-link {visibility:visible;pointer-events:auto;}
.hud.compact .hud-reveal {height:0;}

/* The tools share precision and controls, not an identical material. */
.overlay,.overlay[data-size="compact"] {width:214px;touch-action:none;}
.overlay-shell {cursor:grab;}
.overlay.dragging .overlay-shell {cursor:grabbing;}
.overlay button,.overlay textarea,.overlay input,.overlay canvas {cursor:auto;}
.overlay button {cursor:pointer;}
.overlay-header {min-height:33px;padding:0 14px;gap:8px;position:relative;}
.overlay-header .overlay-title {font-size:14px!important;font-weight:560;letter-spacing:.1px;}
.overlay-header .tool-indicator {width:4px;height:4px;border-radius:50%;background:#718b7a;margin-left:auto;}
.keyboard-move {position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;}
.keyboard-move:focus-visible {position:static;width:30px;height:28px;opacity:1;}
.keyboard-move img {width:16px;height:16px;}
.overlay.selected .overlay-shell {outline:none;}
.overlay:focus-visible .overlay-shell {outline:2px solid #72a8e5;outline-offset:4px;}
.overlay[data-type="counter"] {width:232px;}
.overlay[data-type="counter"] .overlay-shell {background:linear-gradient(130deg,#e3e6e7,#f9f9f5 50%,#c5ccd0);border:1px solid #f9fbfb;border-radius:17px;color:#29373e;box-shadow:0 14px 28px -16px #23374680,inset 0 -2px 1px #abb7bd,inset 0 1px 0 white;}
.overlay[data-type="counter"] .overlay-shell::after {display:none;}
.overlay[data-type="counter"] .overlay-header {border:0;margin:0;padding:0 14px;}
.overlay[data-type="counter"] .overlay-body {padding:6px 13px 17px;min-height:93px;}
.overlay[data-type="counter"] .counter-value {display:flex;align-items:center;justify-content:center;width:103px;min-height:59px;background:linear-gradient(#1e2c33 48%,#34464b 49%,#182930 51%);color:#f8f5dd;box-shadow:inset 0 2px 6px #0009,0 1px 0 white;border:3px solid #a5b1b6;border-radius:9px;font:500 34px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:3px;text-shadow:0 0 8px #daf2bc24;}
.overlay[data-type="counter"] .counter-actions {top:8px;right:13px;gap:5px;}
.overlay[data-type="counter"] .round-control {width:35px;height:54px;border-radius:8px;border:1px solid #b5c0c4;background:linear-gradient(#fffef5,#dce2df);box-shadow:0 2px 0 #929fa4,inset 0 1px white;}
.overlay[data-type="counter"] .round-control img {width:17px;height:17px;}
.overlay[data-type="counter"] .step-label {display:none;}
.overlay[data-type="timer"] {width:218px;}
.overlay[data-type="timer"] .overlay-shell {background:linear-gradient(135deg,#f8faf5,#dce2df);border:1px solid #fff;border-radius:25px;color:#344542;box-shadow:0 14px 28px -16px #23374680,inset 0 -2px 0 #acbdb8;}
.overlay[data-type="timer"] .overlay-header {padding-left:17px;}
.overlay[data-type="timer"] .overlay-body {min-height:100px;padding:2px 14px 13px 16px;}
.overlay[data-type="timer"] .timer-value {font:500 33px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#24483d;letter-spacing:-1.8px;margin-top:2px;}
.overlay[data-type="timer"] .timer-dial {position:absolute;right:16px;top:0;width:45px;height:45px;border-radius:50%;background:repeating-conic-gradient(#657d7020 0deg 2deg,transparent 2deg 30deg),radial-gradient(circle,#eaf0df 55%,#849887 57%,#f9fbef 61%,#bdc8bd 65%,#f2f4ec 69%);box-shadow:inset 0 1px 4px #405a5030,0 1px 0 #fff;}
.timer-dial i {position:absolute;left:21px;top:8px;width:2px;height:16px;border-radius:2px;background:#6e8e50;transform-origin:50% 14px;transform:rotate(calc((1 - var(--timer-progress,1))*360deg));}
.overlay[data-type="timer"] .timer-track {display:none;}
.overlay[data-type="timer"] .timer-actions {position:static;margin-top:12px;display:flex;gap:7px;}
.overlay[data-type="timer"] .timer-actions .round-control {width:44px;height:44px;min-height:44px;border-radius:17px;border:1px solid #b8c4ba;background:#f6f7ef;box-shadow:0 1px 1px #7f96873b;}
.overlay[data-type="timer"] .timer-actions .round-control img {width:15px;height:15px;filter:none;}
.overlay[data-type="timer"] .timer-toggle {background:#244e42!important;border-color:#244e42!important;}
.overlay[data-type="timer"] .timer-toggle img {filter:invert(1)!important;}
.overlay[data-type="timer"][data-running="true"] .tool-indicator {background:#40875d;box-shadow:0 0 5px #5c9f62;}
.overlay[data-type="timer"] .timer-state {display:none;}
.overlay[data-type="note"] {width:220px;}
.overlay[data-type="note"] .overlay-shell {border-radius:8px 8px 14px 14px;background:#f4f1e7;border:1px solid #fdfcf8;box-shadow:0 14px 24px -15px #16334470,inset 0 0 0 1px #d6d3c1;}
.overlay[data-type="note"] .overlay-header {background:#354e71;color:#f1f5f7;min-height:35px;border:0;padding:0 14px;}
.overlay[data-type="note"] .overlay-header .tool-indicator {background:#afc3da;}
.overlay[data-type="note"] .overlay-body {padding:10px 14px 13px;}
.overlay[data-type="note"] .note-input {height:104px;min-height:104px;resize:none;background:repeating-linear-gradient(transparent 0 23px,#7194ab25 23px 24px);font:14px/24px system-ui;color:#3f576c;}
.overlay[data-type="note"] .overlay-shell::after {display:none;}
.overlay[data-type="game"] {width:338px;}
.overlay[data-type="game"] .overlay-shell {background:linear-gradient(130deg,#37434c,#1d2b34 45%,#26343f);border:1px solid #778790;border-radius:17px;box-shadow:0 18px 32px -16px #102337b0,inset 0 1px 0 #bdc5c866,inset 0 -3px 0 #0d1c24;}
.overlay[data-type="game"] .overlay-header {height:31px;min-height:31px;border:0;padding:0 15px;}
.overlay[data-type="game"] .overlay-title {font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px!important;letter-spacing:2.4px;color:#d2dde2;text-transform:uppercase;}
.overlay[data-type="game"] .tool-indicator {background:#637a82;}
.overlay[data-playing="true"] .tool-indicator {background:#d3e9a6;box-shadow:0 0 4px #d3e9a680;}
.overlay[data-type="game"] .game-wrap {padding:0 10px 9px;}
.overlay[data-type="game"] .game-scorebar {min-height:33px;padding:5px 9px;margin-bottom:8px;background:#142229;border:1px solid #081820;border-radius:6px;box-shadow:0 1px 0 #ffffff14,inset 0 1px 3px #0003;}
.overlay[data-type="game"] .game-scorebar b {color:#e9efcc;}
.overlay[data-type="game"] [data-game-score] {font-size:18px;}
.overlay[data-type="game"] .game-canvas {background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px),#09131a;border:4px solid #101b23;border-radius:8px;box-shadow:0 1px 0 #8eabb348,inset 0 2px 8px #0007;aspect-ratio:640/240!important;}
.overlay[data-type="game"] .game-bottom {min-height:47px;padding:6px 0 0;display:flex;justify-content:flex-end;}
.overlay[data-type="game"] .game-controls {gap:7px;}
.overlay[data-type="game"] .game-controls button {width:44px;min-width:44px;height:44px;min-height:44px;border-radius:20px;background:linear-gradient(#e7ece5,#bdc9c5);color:#213438;border:1px solid #eefff075;box-shadow:0 2px 0 #0c161c,inset 0 1px white;padding:10px;}
.overlay[data-type="game"] .game-controls img {width:16px;height:16px;filter:none!important;}
.overlay[data-type="game"] .game-status,.overlay[data-type="game"] .game-key-hint {position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;}
.overlay[data-color="blue"] .overlay-shell {box-shadow:0 14px 27px -17px #255da6a0,inset 0 1px white;}
.overlay[data-color="blue"][data-type="counter"] .overlay-shell {background:linear-gradient(130deg,#c7d8ea,#eff6fa,#a7bbd0);}
.overlay[data-color="sage"][data-type="counter"] .overlay-shell {background:linear-gradient(130deg,#c5d2bb,#f2f5e9,#aebb9e);}
.overlay[data-color="blush"][data-type="counter"] .overlay-shell {background:linear-gradient(130deg,#dcc9cd,#fff1eb,#c1abb3);}
.overlay[data-color="blue"][data-type="timer"] .overlay-shell,.overlay.story-blue[data-type="timer"] .overlay-shell {background:linear-gradient(135deg,#ecf6ff,#c2d4e6);border-color:#f6fbff;}
.overlay[data-color="sage"][data-type="timer"] .overlay-shell {background:linear-gradient(135deg,#f1f7e7,#cfdbc5);}
.overlay[data-color="blush"][data-type="timer"] .overlay-shell {background:linear-gradient(135deg,#fff0ed,#e1cacf);}

/* A collected desk: independent silhouettes, consistent light from upper left. */
.object-space {z-index:6;}
.desk-object {cursor:grab;touch-action:none;outline:none;}
.desk-object:focus-visible {outline:2px solid #e9f6ff;outline-offset:6px;border-radius:9px;}
.desk-object.object-moving {cursor:grabbing;z-index:20;}
.object-art {pointer-events:none;position:relative;}
.desk-object:hover .object-art,.object-moving .object-art {animation-play-state:paused!important;}
.object-reminder {width:52px;height:59px;}
.reminder-badge {width:52px;height:52px;rotate:-9deg;}
.reminder-badge span {font-size:38px;}
.object-reminder .object-art {animation:reminder-nudge 8s ease-in-out infinite;}
@keyframes reminder-nudge {0%,72%,100%{transform:rotate(0)}77%{transform:rotate(-9deg)}82%{transform:rotate(6deg)}87%{transform:rotate(-3deg)}92%{transform:rotate(0)}}
.object-sign {width:165px;height:61px;}
.street-plaque {padding:7px 10px;gap:10px;rotate:3deg;}
.street-plaque>span {font:650 11px/1.2 system-ui;letter-spacing:.6px;flex:1;color:#fffce4;}
.street-plaque>b {font-size:22px;font-weight:400;color:#fffce4;}
.sign-post {height:22px;width:6px;}
.object-sign .object-art {animation:sign-breeze 11s ease-in-out infinite;transform-origin:50% 100%;}
@keyframes sign-breeze {0%,100%{transform:rotate(-1deg)}50%{transform:rotate(2deg)}}
.object-photo {width:113px;height:139px;}.photo-print {padding:6px 6px 10px;rotate:7deg;}.photo-print img {width:99px;height:103px;}.photo-print>span {display:block;font:9px/1.3 system-ui;text-align:center;color:#63767a;margin-top:7px;}
.object-photo .object-art {animation:photo-drift 13s ease-in-out infinite;}
@keyframes photo-drift {0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.object-music {width:168px;height:64px;}.mini-player {display:flex;align-items:center;gap:9px;width:168px;height:60px;border-radius:12px;background:linear-gradient(130deg,#f8f6ea,#d5dad3);border:1px solid #fff7;box-shadow:inset 0 -2px #aebbb655;padding:8px;}.record-disc {display:block;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:repeating-radial-gradient(circle,#26343a 0 1px,#101b22 1px 2px);position:relative;}.record-disc::after {content:'';position:absolute;inset:13px;border-radius:50%;background:#c48268;border:5px solid #e2bc87;}.mini-player>div>span {font-size:10px;color:#334c51;}.mini-player>svg {width:12px;fill:none;stroke:#647f81;stroke-width:2;}.sound-bars {height:18px;display:flex;align-items:center;gap:3px;}.sound-bars i{width:3px;height:13px;background:#527777;border-radius:2px;animation:levels 1.3s ease-in-out infinite;animation-delay:calc(var(--i)*-173ms);transform-origin:50% 100%;}
@keyframes levels{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.object-clock {width:62px;height:62px;}.clock-face{position:relative;width:62px;height:62px;border-radius:50%;border:4px solid #d4d7ce;background:repeating-conic-gradient(#4b676b 0deg 2deg,transparent 2deg 30deg),radial-gradient(circle,#fcf9e9 59%,#d1d2c7 60%);box-shadow:inset 0 0 0 4px #faf6e6,inset 0 0 6px #b6bba3,0 1px 0 #fff;}.clock-face::before{content:'';position:absolute;inset:6px;border-radius:50%;background:#faf7e9;}.clock-face i{position:absolute;z-index:1;left:25px;bottom:27px;transform-origin:50% 100%;width:2px;border-radius:2px;}.clock-hour{height:14px;background:#375258;transform:rotate(310deg);}.clock-minute{height:19px;background:#375258;transform:rotate(55deg);}.clock-second{height:21px;background:#c4624d;animation:clock-tick 60s linear infinite;}.clock-face b{position:absolute;width:4px;height:4px;border-radius:50%;left:24px;top:25px;background:#d87657;z-index:2;}
@keyframes clock-tick{to{transform:rotate(360deg)}}
.object-calendar {width:68px;height:80px;}.calendar-page {width:68px;border-radius:6px;background:#fdfbee;box-shadow:0 3px 0 #d0d2c8,0 4px 0 #faf9ea;border:1px solid #edeede;text-align:center;rotate:-6deg;overflow:hidden;}.calendar-page span {display:block;background:#b85243;color:#fff4e0;font:650 9px/20px system-ui;letter-spacing:2px;}.calendar-page b {display:block;color:#32434d;font:450 29px/36px system-ui;}.calendar-page small{display:block;color:#6f7e7f;font:8px/15px system-ui;letter-spacing:2px;}
.object-ticket{width:134px;height:63px;}.idea-ticket{padding:7px 12px;width:134px;border:1px solid #d5b780;background:#f3d5a1;border-radius:4px;rotate:-5deg;position:relative;overflow:hidden;}.idea-ticket small{display:block;font:7px/1.4 ui-monospace,monospace;letter-spacing:1.7px;color:#785e3d;}.idea-ticket strong{font:650 15px/1.5 ui-monospace,monospace;color:#654c37;letter-spacing:.2px;}.idea-ticket span{display:block;font:7px/1.2 ui-monospace,monospace;color:#8b734c;letter-spacing:2px;}.idea-ticket i{position:absolute;width:12px;height:60px;top:0;right:5px;background:repeating-linear-gradient(0deg,#a58b6555 0 1px,transparent 1px 3px);}
.object-plane{width:73px;height:59px;}.paper-plane{width:73px;height:59px;}.object-plane .object-art{animation:plane-air 10s ease-in-out infinite;}
@keyframes plane-air{0%,100%{transform:translate(0,0) rotate(-7deg)}50%{transform:translate(8px,-7px) rotate(-2deg)}}
.object-walker{width:84px;height:55px;}.little-walker{position:relative;width:40px;height:48px;animation:walk-across 9s ease-in-out infinite;}.walker-body{position:absolute;top:2px;left:5px;width:30px;height:29px;border-radius:12px 12px 10px 10px;background:linear-gradient(125deg,#eff3f0,#b6c9cd);box-shadow:inset -3px -2px 5px #657e8e44,inset 1px 1px 0 white;display:flex;justify-content:center;align-items:center;gap:5px;animation:walker-bob .6s ease-in-out infinite;}.walker-body i{display:block;width:4px;height:6px;background:#294753;border-radius:3px;}.walker-foot{position:absolute;top:29px;left:8px;width:9px;height:6px;border-radius:50%;background:#63858e;animation:walker-step .6s ease-in-out infinite;}.walker-foot.right{left:24px;animation-delay:-.3s;}.walker-shadow{position:absolute;left:5px;bottom:4px;width:36px;height:5px;border-radius:50%;background:#29435230;filter:blur(2px);}
@keyframes walker-bob{50%{transform:translateY(-2px)}}@keyframes walker-step{50%{transform:translateY(-3px) rotate(15deg)}}@keyframes walk-across{0%,10%{transform:translateX(0)}45%,55%{transform:translateX(35px)}90%,100%{transform:translateX(0)}}
.desk-object:hover .object-art *,.object-moving .object-art *{animation-play-state:paused!important;}
html[data-motion-preference="paused"] .object-art,html[data-motion-preference="paused"] .object-art *,html[data-visible="false"] .object-art,html[data-visible="false"] .object-art *,html[data-hero-visible="false"] .object-art,html[data-hero-visible="false"] .object-art *{animation-play-state:paused!important;}

/* A continuous coast, with one chapter in focus as it crosses the viewport. */
.scene-afterword {padding:90px 24px 100px;}
.scene-afterword .story-caption {font-size:34px;color:#213b44;}
.scene-afterword .hero-description {color:#405e69;}
.feature {padding:140px 0;min-height:780px;}
.feature::after {background:#dfeaf0c7;border-radius:36px;backdrop-filter:blur(2px);}
.feature-copy {position:relative;z-index:2;}
.feature-copy h2 {color:#1d3541;}.feature-copy>p:not(.eyebrow){color:#37505f;}
.feature-scene {box-shadow:0 24px 48px -28px #193b4e80;}
.feature.is-focused .feature-scene {transform:translateY(-4px);}
.closing {padding:160px 24px 100px;}
footer {border-color:#577b9233;}

@media(min-width:900px) and (max-height:800px){.playground{padding-top:225px;min-height:850px;}.device-stage{height:555px;width:min(1160px,calc(100% - 64px));}.macbook{width:710px;top:62px;}.overlay[data-type="game"]{width:310px;}.overlay{width:202px;}.overlay[data-type="timer"]{width:207px;}.overlay[data-type="note"]{width:202px;}}
@media(min-width:900px) and (max-width:1100px){.device-stage{width:calc(100% - 44px);}.macbook{width:680px;max-width:70%;top:90px;}.object-music{scale:.85;transform-origin:left center;}.overlay[data-type="game"]{width:290px;}.object-photo{scale:.8;transform-origin:right center;}}
@media(max-width:899px){
 body{background-attachment:fixed;}.playground{padding-top:198px;height:auto;min-height:0;padding-bottom:50px;}.device-stage{width:calc(100% - 36px);height:auto;max-width:540px;}.macbook{width:100%;max-width:none;top:0;}.desktop-embel-hud{height:17px;width:46%;left:27%;padding:0 6px;border-radius:0 0 7px 7px;}.desktop-embel-hud .emble-orb{width:12px;height:12px;}.desktop-embel-hud svg{width:13px;height:13px;}.desktop-work{top:23%;height:59%;left:20%;width:62%;}.desktop-document h2{font-size:17px;}.desktop-document p{font-size:6px;}.desktop-document{padding:9px 12px;}
 .hud .hud-tabs{max-width:150px;transition:max-width 380ms var(--shell-ease),opacity 180ms;overflow:hidden;}.hud.pro-previewing .hud-tabs{max-width:0;opacity:0;visibility:hidden;}.hud-actions{gap:3px;}.hud .playground-link{min-width:28px;visibility:visible;}.hud.pro-previewing .playground-link{visibility:visible;pointer-events:auto;}.pro-control .pro-channels{background:transparent;}.hud #pro-preview{min-width:38px;padding:0 6px;}.hud .get-button{font-size:10px;}.hud .hud-top{gap:5px;}
 .space>.overlay,.space>.overlay[data-type="game"],.space>.overlay[data-type="timer"],.space>.overlay[data-type="note"]{width:100%;max-width:380px;touch-action:pan-y;}.overlay-shell{cursor:auto;}.overlay-header{min-height:37px;}.overlay[data-type="counter"] .overlay-body{min-height:100px;}.overlay[data-type="counter"] .counter-value{width:calc(100% - 111px);max-width:170px;}.overlay[data-type="counter"] .round-control{width:44px;height:57px;}.overlay[data-type="timer"] .overlay-body{min-height:102px;}.overlay[data-type="timer"] .timer-value{font-size:37px;}.overlay[data-type="timer"] .timer-actions{gap:8px;}.overlay[data-type="timer"] .timer-actions .round-control{width:50px;min-height:44px;}.overlay[data-type="timer"] .timer-dial{width:55px;height:55px;}.timer-dial i{left:26px;top:13px;}.overlay[data-type="game"] .game-controls button{height:44px;min-height:44px;}.mobile-reorder{min-height:40px;font-size:10px;}.mobile-reorder button{min-height:40px;}.overlay[data-type="timer"] .mobile-reorder,.overlay[data-type="timer"] .mobile-reorder button{color:#536a62;border-color:#82988a30;}
 .object-space{position:relative;inset:auto;display:flex;justify-content:center;align-items:center;gap:28px 22px;width:100%;max-width:390px;margin:45px auto 0;}.desk-object{flex-shrink:0;touch-action:pan-y;}.object-music{width:168px;}.object-sign{width:165px;}.object-photo{order:4;}.object-ticket{order:5;}.object-plane{order:6;}.object-walker{order:7;}.scene-afterword{padding:70px 24px 50px;}.scene-afterword .story-caption{font-size:28px;}.feature{min-height:0;padding:85px 0;}.feature::after{border-radius:20px;}.feature-copy h2{font-size:34px;}.closing{padding:100px 24px 60px;}
}
@media(max-width:359px){.hud .hud-tabs{gap:0;}.hud .hud-tabs button{padding:0 5px;}.hud .playground-link{min-width:24px;width:24px;}.hud #pro-preview{min-width:32px;padding:0 4px;}.pro-dot{margin-left:3px;}.hud-actions{gap:1px;}.device-stage{width:calc(100% - 30px);}.desktop-document h2{font-size:14px;}.object-space{gap:24px 18px;}.hud.pro-previewing .pro-channels{width:88px!important;}.pro-channels button{width:44px;min-width:44px;}}
@media(prefers-reduced-motion:reduce){.object-art,.object-art *{animation:none!important;}.pro-control .pro-channels,.hud .hud-tabs,.feature-scene{transition:none!important;}}
.object-folder{width:68px;height:62px;}.floating-folder{position:relative;width:62px;height:45px;margin:3px;filter:drop-shadow(0 4px 3px #233f5c25);animation:folder-breathe 12s ease-in-out infinite;}.floating-folder i{position:absolute;inset:6px 0 0;background:linear-gradient(#87ceee,#519dca);border:1px solid #aadffa;border-radius:3px;}.floating-folder i::before{content:'';position:absolute;width:26px;height:8px;left:-1px;top:-7px;border-radius:4px 6px 0 0;background:#8dd3f1;border:1px solid #b5e6f8;border-bottom:0;}.floating-folder b{position:absolute;inset:13px -2px -2px 2px;background:linear-gradient(#a2def3,#73bce4);border:1px solid #c1eafa;border-radius:4px;transform:skewX(-5deg);box-shadow:inset 0 1px #e8faff;}.floating-folder span{position:absolute;top:50px;width:100%;text-align:center;color:#345668;font:10px/1 system-ui;text-shadow:0 1px #fff9;}
@keyframes folder-breathe{0%,100%{transform:rotate(-5deg)}50%{transform:translateY(-3px) rotate(-2deg)}}
.object-bin{width:45px;height:58px;}.desktop-bin{position:relative;width:36px;height:43px;perspective:100px;}.desktop-bin i{position:absolute;inset:9px 1px 0;background:repeating-linear-gradient(90deg,#89a1aa66 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,#92a4aa44 0 1px,transparent 1px 4px),linear-gradient(90deg,#d1dce25e,#f6fbffd9,#afc6d188);border:1px solid #c1d0d7;border-radius:2px 2px 8px 8px;transform:rotateX(-12deg);}.desktop-bin b{position:absolute;inset:5px 0 auto;height:9px;border-radius:50%;background:#a3b6c0;border:2px solid #f0f4f0;box-shadow:0 1px 1px #4f6976;}.desktop-bin span{position:absolute;top:5px;left:8px;width:14px;height:18px;background:linear-gradient(130deg,#fbf7e7,#b9cad4);rotate:-15deg;clip-path:polygon(0 14%,65% 0,100% 26%,88% 100%,10% 85%);}
.landing-dock{position:relative;z-index:10;display:flex;align-items:center;gap:9px;width:max-content;margin:30px auto 24px;padding:8px 12px;border:1px solid #f8ffffa8;border-radius:20px;background:linear-gradient(135deg,#eff9f28c,#ebf4f057);backdrop-filter:blur(18px);box-shadow:0 12px 30px -15px #0f334e70,inset 0 1px #fff8;}
.landing-dock>button,.landing-dock>a{width:44px;height:44px;display:grid;place-items:center;position:relative;transition:transform 200ms var(--ease);}
.landing-dock>button:hover,.landing-dock>a:hover{transform:translateY(-7px) scale(1.08);}
.landing-dock .emble-orb{width:36px;height:36px;}.landing-dock-divider{height:35px;width:1px;background:#78949c44;margin:0 2px;}
.dock-tooltip{position:absolute;bottom:58px;left:50%;transform:translateX(-50%) translateY(5px);padding:6px 10px;white-space:nowrap;font-size:11px;background:#f5faf7e8;border:1px solid #fff8;border-radius:7px;color:#39525c;opacity:0;pointer-events:none;transition:opacity 150ms,transform 180ms;}
.landing-dock>button:hover .dock-tooltip,.landing-dock>a:hover .dock-tooltip,.landing-dock>button:focus-visible .dock-tooltip,.landing-dock>a:focus-visible .dock-tooltip{opacity:1;transform:translateX(-50%) translateY(0);}
.dock-folder-icon{position:relative;width:35px;height:28px;border-radius:4px;background:linear-gradient(#b1e3f7,#67b7e2);box-shadow:inset 0 1px #d9f5ff,0 2px 2px #4f859d35;}.dock-folder-icon::before{content:'';position:absolute;left:0;top:-5px;width:16px;height:7px;background:#93d0ee;border-radius:4px 5px 0 0;z-index:-1;}
.dock-note-icon{width:32px;height:36px;border-radius:6px;background:repeating-linear-gradient(0deg,transparent 0 7px,#cdd5c962 7px 8px),linear-gradient(#f4d374 0 9px,#fffcdf 9px);box-shadow:inset 0 1px #fff5,0 2px 3px #5a6f6533;}
.dock-compass-icon{position:relative;width:36px;height:36px;border-radius:50%;border:3px solid #f5f9fb;background:repeating-conic-gradient(#eefaff 0deg 2deg,transparent 2deg 30deg),linear-gradient(#9dd8f5,#4889c4);box-shadow:0 1px 3px #325f8140;}.dock-compass-icon::after{content:'';position:absolute;inset:3px 12px;background:linear-gradient(#e2725e 50%,#e6f2f8 50%);rotate:35deg;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.playground{height:auto;min-height:910px;}
@media(min-width:900px) and (max-height:800px){.playground{min-height:900px;}.landing-dock{margin-top:28px;}}
@media(max-width:899px){.playground{min-height:0;}.landing-dock{margin-top:43px;}.object-bin{margin:0 10px;}}
@media(prefers-reduced-motion:reduce){.floating-folder{animation:none!important;}.landing-dock>button,.landing-dock>a,.dock-tooltip{transition:none;}}

/* Presentation changes retain each instrument's shape and usable controls. */
.overlay[data-type="note"][data-color="blue"] .overlay-header{background:#355c87;}
.overlay[data-type="note"][data-color="sage"] .overlay-header{background:#52705e;}
.overlay[data-type="note"][data-color="blush"] .overlay-header{background:#966d79;}
.overlay[data-type="game"][data-color="blue"] .overlay-shell{background:linear-gradient(135deg,#365775,#182e43);}
.overlay[data-type="game"][data-color="sage"] .overlay-shell{background:linear-gradient(135deg,#52665c,#233a35);}
.overlay[data-type="game"][data-color="blush"] .overlay-shell{background:linear-gradient(135deg,#725963,#352c3f);}
@media(min-width:900px){
 .overlay[data-type="counter"][data-size="compact"]{width:214px;}
 .overlay[data-type="counter"][data-size="compact"] .counter-value{width:85px;}
 .overlay[data-type="timer"][data-size="compact"]{width:202px;}
 .overlay[data-type="timer"][data-size="compact"] .timer-value{font-size:30px;}
 .overlay[data-type="note"][data-size="compact"]{width:198px;}
 .overlay[data-type="note"][data-size="compact"] .note-input{height:80px;min-height:80px;}
 .overlay[data-type="game"][data-size="compact"]{width:300px;}
}

.calendar-page,.idea-ticket,.desktop-bin{transition:transform 220ms var(--shell-ease);}
.object-calendar:hover .calendar-page{transform:translateY(-3px) rotate(3deg);}
.object-ticket:hover .idea-ticket{transform:translateY(-3px) rotate(2deg);}
.object-bin:hover .desktop-bin{transform:rotate(-6deg);}
@media(prefers-reduced-motion:reduce){.calendar-page,.idea-ticket,.desktop-bin{transition:none;}.object-calendar:hover .calendar-page,.object-ticket:hover .idea-ticket,.object-bin:hover .desktop-bin{transform:none;}}
/* Keep the optical playfield undistorted inside its physical border. */
.overlay[data-type="game"] .game-canvas{box-sizing:content-box;width:calc(100% - 8px);}
/* The coast stays visible around a readable, quiet chapter surface. */
.feature::before{content:'';position:absolute;inset:40px -50px;z-index:-1;pointer-events:none;border-radius:36px;background:linear-gradient(125deg,#eef4f2ed,#e3edf0e6);border:1px solid #f7ffff80;box-shadow:0 24px 70px -50px #1c405777;}
@media(max-width:899px){.feature::before{inset:20px -15px;border-radius:20px;}}

.overlay.selected .overlay-header .tool-indicator{background:#8ab7e5;box-shadow:0 0 4px #79a9d66b;}
/* Chapter focus is a light veil across the wallpaper, not another glass card. */
.feature::before{left:50%;right:auto;top:0;bottom:0;width:100vw;transform:translateX(-50%);border:0;border-radius:0;box-shadow:none;background:linear-gradient(180deg,#eaf1f300,#eaf1f3eb 14%,#eaf1f3eb 86%,#eaf1f300);}
.feature::after{border-radius:0;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);}