@import url('./project-motion.css');
@font-face{font-family:Inter;src:url('/studio-assets/3b61e5a561ecc6c854c5/assets/fonts/Inter-latin.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:Fraunces;src:url('/studio-assets/3b61e5a561ecc6c854c5/assets/fonts/Fraunces-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
:root{color-scheme:dark;--night:#080d17;--ink:#e9e6e1;--dim:#a6b0b9;--teal:#72b8c2;--orange:#ff692e;--rule:#e9e6e125;--safe-top:env(safe-area-inset-top,0px);font-family:Inter,system-ui,sans-serif;background:var(--night);color:var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-underline-offset:5px}a:hover,button:hover{color:var(--orange)}a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:7px}button{cursor:pointer}button:disabled{cursor:default}svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.skip-link{position:absolute;top:12px;left:20px;background:var(--ink);color:var(--night);padding:12px;z-index:20;transform:translateY(-160%)}.skip-link:focus{transform:none}

.space-stage{position:relative;height:100svh;min-height:740px;max-height:1150px;overflow:clip;isolation:isolate;background:#03070e;outline:none}
.space-stage.is-playing #game-canvas{pointer-events:auto;touch-action:none}
#space-canvas,#game-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#space-canvas{z-index:0}#game-canvas{z-index:4}
.space-stage[data-sky=fallback] #space-canvas{opacity:0}
.scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#02071045,transparent 65%),linear-gradient(0deg,#03070e9c,transparent 18%);z-index:1}
.navigation{position:absolute;z-index:8;left:max(6vw,env(safe-area-inset-left,0px));right:max(6vw,env(safe-area-inset-right,0px));top:30px;display:flex;align-items:center;justify-content:space-between}
.small-mark{display:inline-flex;width:38px;height:44px;color:var(--ink)}.small-mark svg{width:100%;height:100%}
.navigation-links{margin-left:auto;display:flex;align-items:center;gap:36px;font-size:13px}.navigation-links a{text-decoration:none;padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.hero-copy{position:absolute;top:27%;left:max(8vw,env(safe-area-inset-left,0px));z-index:3;pointer-events:none}
.hero-copy h1{font-family:Inter,system-ui,sans-serif;font-size:clamp(82px,10.6vw,164px);font-weight:500;letter-spacing:-.065em;line-height:1.08;margin:0 0 22px;padding-right:.08em;text-shadow:0 2px 40px #02071080;white-space:nowrap}
.hero-copy h1 [data-stealable]{display:inline-block}
.hero-copy p{font-size:clamp(16px,1.6vw,21px);letter-spacing:-.015em;margin:0;color:var(--ink);text-shadow:0 2px 14px var(--night)}
.studio-cat{position:absolute;left:76%;top:43%;width:clamp(290px,30vw,430px);aspect-ratio:1;z-index:3;transform:translate(calc(-50% + var(--cat-x,0px)),calc(-50% + var(--cat-y,0px)));--ex:0;--ey:0;padding:0;border:0;background:none;color:inherit;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline-offset:-30px}
.studio-cat>svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:none;filter:drop-shadow(0 8px 24px #0006);pointer-events:none}
.studio-cat .pupil{transform:translate(calc(var(--ex,0)*7px),calc(var(--ey,0)*3px));stroke:none}
.studio-cat:focus-visible{outline:none}.studio-cat:focus-visible::before{content:"";position:absolute;inset:4% 12% 27%;border:1px solid #d0d9e16b;border-radius:8px}
.cat-hint{position:absolute;left:76%;top:55%;transform:translateX(-50%);z-index:3;font-size:11px;color:#c0ccda;letter-spacing:.03em;opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none}
.studio-cat[data-cue-ready=true]:hover~.cat-hint,.studio-cat[data-cue-ready=true]:focus-visible~.cat-hint{opacity:1}.is-playing .cat-hint{display:none}
.play-controls{position:absolute;left:8vw;bottom:10%;z-index:8;width:min(405px,42vw)}
.play-status{margin:0;min-height:0;font-size:12px;line-height:1.7;color:#c4cdd8;max-width:360px;text-wrap:pretty;text-shadow:0 2px 6px #000}
#play-stop{border:0;border-bottom:1px solid #d9e0e980;background:none;padding:12px 0;min-height:44px;color:var(--ink);font-size:12px;margin-top:8px}
.scene-controls{position:absolute;right:6vw;bottom:7%;z-index:8;display:flex;align-items:center}
.down-link{height:48px;width:48px;display:grid;place-items:center;text-decoration:none}.down-link svg{width:24px;height:24px}
.projects-section{position:relative;max-width:1600px;margin:auto;padding:78px 7vw 100px;border-top:1px solid var(--rule);min-height:385px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-title h2{font-family:Inter,system-ui,sans-serif;font-size:clamp(43px,5.5vw,76px);font-weight:400;line-height:1.15;letter-spacing:-.045em;margin:0}.orbit-glyph{width:135px;height:72px;color:var(--teal);opacity:.6;stroke-width:1}.projects-empty{margin:38px 0 25px;font-size:18px;color:var(--dim)}.projects-empty p{margin:0}.text-link{border:0;border-bottom:1px solid #72b8c277;color:var(--teal);background:none;padding:5px 0;font-size:13px}.text-link:after{content:'↗';margin-left:15px}.projects-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:28px}.projects-list:empty{margin-top:0}.project-card{display:block;width:100%;text-align:left;background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:26px}.project-card:hover{border-color:var(--teal)}.project-card h3{font-family:Inter,system-ui,sans-serif;font-size:34px;margin:0 0 12px;font-weight:450}.project-state{display:inline-block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--teal);margin:10px 0 14px}.project-card p{font-size:14px;line-height:1.6;color:var(--dim)}.project-platforms{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--dim)}.project-platforms span{padding:5px 9px;border:1px solid var(--rule);border-radius:3px}.site-footer{border-top:1px solid var(--rule);padding:30px 7vw 38px;display:flex;align-items:center;justify-content:space-between;gap:25px;color:var(--dim);font-size:11px}.site-footer>div{display:flex;gap:28px}.site-footer a{text-decoration:none}
.project-dialog{width:min(920px,calc(100% - 48px));max-height:calc(100svh - 64px);padding:0;border:1px solid #dce3e940;border-radius:10px;background:#14181e;color:var(--ink);box-shadow:none;overscroll-behavior:contain}.project-dialog::backdrop{background:#030812c9;backdrop-filter:blur(12px)}.project-dialog-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:15px 24px;border-bottom:1px solid var(--rule);background:#14181ef5;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}.project-dialog form{margin:0}.close-project{border:1px solid var(--rule);border-radius:50%;background:none;color:var(--ink);height:38px;width:38px;display:grid;place-items:center}.close-project svg{width:18px;height:18px}#project-detail{padding:34px}#project-detail h2,#project-detail h3{font-family:Inter,system-ui,sans-serif;font-weight:500;letter-spacing:-.035em;line-height:1.15;font-size:clamp(32px,5vw,56px);margin:0 0 12px}#project-detail p{max-width:60ch;line-height:1.7}#project-detail figure{margin:24px 0}.project-image,.projectdetailimg{display:block;width:100%;max-height:440px;object-fit:contain;background:#07101a;border-radius:3px}#project-detail figcaption{font-size:11px;color:var(--dim);line-height:1.7;margin-top:10px}.project-description{font-size:17px}.local-review-badge{position:fixed;bottom:12px;left:12px;z-index:30;font-size:11px;padding:8px 13px;border:1px solid var(--teal);background:var(--night);color:var(--ink);border-radius:4px}
.projects-list{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:28px;gap:26px}.project-card{padding:0 0 24px;border:0;border-radius:0;border-bottom:1px solid var(--rule)}.project-card-image{width:100%;aspect-ratio:1.25;object-fit:contain;display:block;padding:30px;background:#111d28;margin-bottom:24px;border:1px solid var(--rule);border-radius:3px;transition:border-color .2s}.project-card:hover .project-card-image{border-color:var(--teal)}.project-card-title{display:block;font:500 26px/1.2 Inter,system-ui,sans-serif;letter-spacing:-.025em;color:var(--ink)}.project-card-summary{display:block;font:400 13px/1.6 Inter,system-ui,sans-serif;color:var(--dim);margin-top:13px;min-height:3.4em}.project-card .project-state{font-size:10px;margin:14px 0 0}.project-platforms{list-style:none;padding:0;margin:16px 0}.project-platforms li{padding:5px 9px;border:1px solid var(--rule);border-radius:3px}.project-store-link{display:inline-block;margin-top:20px;border:1px solid var(--teal);border-radius:30px;padding:12px 20px;text-decoration:none;font-size:13px;color:var(--ink)}.project-store-link:hover{border-color:var(--orange)}
.project-card-image{height:auto}.project-platforms{display:flex}.project-card .project-card-summary{min-height:3.4em}

@media(max-width:760px){
.space-stage{height:100svh;min-height:760px;max-height:1000px}
.navigation{top:20px;left:25px;right:25px}.small-mark{width:28px}.navigation-links{font-size:12px;gap:24px}
.hero-copy{top:18%;left:25px;right:25px}.hero-copy h1{font-size:clamp(65px,18vw,112px);margin-bottom:14px;letter-spacing:-.065em}.hero-copy p{font-size:16px}
.studio-cat{left:53%;top:49%;width:min(340px,90vw)}.cat-hint{left:50%;top:60%;opacity:0;white-space:nowrap}
.play-controls{left:25px;right:25px;bottom:8%;width:auto}.play-status{font-size:11px;max-width:270px}.scene-controls{right:20px;bottom:3%}
.projects-section{padding:48px 25px 65px;min-height:310px}.section-title h2{font-size:46px}.orbit-glyph{display:none}.projects-empty{font-size:16px;margin-top:25px}.projects-list{grid-template-columns:1fr}
.site-footer{padding:26px 25px;align-items:flex-start;flex-wrap:wrap;font-size:10px;gap:22px}.site-footer>div{gap:23px;flex-wrap:wrap}.project-dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px)}.project-dialog-top{padding:12px 17px}#project-detail{padding:25px 21px}.project-description{font-size:15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
.studio-cat::after{content:'';position:absolute;left:38%;right:38%;top:76%;height:2px;background:var(--orange);opacity:0;transform:scaleX(var(--charge,0));transform-origin:left;pointer-events:none}
.studio-cat[data-charging=true]::after{opacity:1}
.studio-cat[data-charging=true] .pupil{filter:drop-shadow(0 0 5px #ff7428)}
.studio-cat[data-cue-ready=true][data-charging=true]~.cat-hint{opacity:1}

.is-playing .scene-shade{background:linear-gradient(90deg,#02071045,transparent 65%),linear-gradient(0deg,#03070eed,transparent 38%)}

/* The title, cat and projects inhabit the same scene. The sky follows its height. */
.space-stage{height:auto;min-height:100svh;max-height:none;padding-top:420px}
.hero-copy{top:142px}.hero-copy h1{font-size:clamp(76px,9.5vw,144px)}
.studio-cat{left:76%;top:220px;width:clamp(260px,29vw,365px)}.cat-hint{left:76%;top:315px}
.space-stage>.projects-section{position:relative;z-index:5;border:0;padding:16px 7vw 48px;background:none;min-height:0}
.space-stage .section-title{padding-left:3px}.space-stage .section-title h2{font:500 13px/1.5 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.space-stage .orbit-glyph{display:none}.space-stage .projects-list{margin-top:20px;margin-bottom:23px}
.space-stage .play-controls{top:326px;bottom:auto;left:8vw;max-width:430px;width:44vw}
.space-stage .scene-controls{display:none}
.space-stage .text-link{font-size:12px}.space-stage .projects-empty{margin-top:36px;margin-bottom:70px}
@media(max-width:699px){.space-stage{padding-top:calc(470px + var(--safe-top))}.navigation{top:20px}.hero-copy{top:calc(var(--safe-top) + 26px);left:25px}.hero-copy h1{font-size:clamp(56px,17vw,108px);margin-bottom:12px}.hero-copy p{font-size:15px}.studio-cat{top:calc(325px + var(--safe-top));left:50%;width:265px}.cat-hint{left:50%;top:calc(420px + var(--safe-top));font-size:10px}.space-stage>.projects-section{padding:22px 25px 40px}.space-stage .play-controls{top:calc(428px + var(--safe-top));left:25px;right:25px;width:auto;max-width:none}.space-stage.is-playing{padding-top:calc(520px + var(--safe-top))}.space-stage.is-playing .play-controls{top:calc(405px + var(--safe-top))}.space-stage .section-title h2{font-size:11px}}

.space-stage.is-playing:focus-visible .play-controls{outline:2px solid var(--teal);outline-offset:8px;border-radius:3px}

/* Keep sky projection and GPU backing size independent of project expansion. */
#space-canvas{position:fixed;inset:0;width:100%;height:100svh}
.site-footer{position:relative;background:var(--night)}

/* Type: Inter, with restrained material and sharper edges. */
.hero-copy h1{letter-spacing:-.06em;text-shadow:none}

/* Sources stays in the page; the standalone document remains a fallback. */
.sources-dialog{position:fixed;inset:auto;top:50%;left:50%;z-index:40;margin:0;transform:translate(-50%,-50%);transform-origin:center;width:min(760px,calc(100% - 40px));max-height:calc(100svh - 40px);overflow:auto;background:linear-gradient(145deg,#202c42df,#0c1220ed);border:1px solid #dae9ff42;border-radius:18px;box-shadow:0 12px 52px #02081766,inset 0 1px 0 #ffffff13;backdrop-filter:blur(24px) saturate(1.25);-webkit-backdrop-filter:blur(24px) saturate(1.25);overscroll-behavior:contain}
.sources-dialog::backdrop{background:transparent;backdrop-filter:none}
.sources-dialog[data-sources-phase=closing]{pointer-events:none}
.sources-dialog-top{background:#152035e8;backdrop-filter:blur(16px);text-transform:none;letter-spacing:normal;gap:24px}
.sources-dialog-top h2{font:500 20px/1.3 Inter,system-ui,sans-serif;letter-spacing:-.025em;margin:0;color:var(--ink)}
.sources-dialog-top button{min-height:44px;padding:8px 14px;border:1px solid var(--rule);border-radius:6px;background:none;color:var(--ink);font-size:13px}
.sources-dialog-top button:hover{border-color:var(--teal)}
.sources-content{padding:28px 30px 34px;font:400 14px/1.7 Inter,system-ui,sans-serif;color:var(--dim);overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.sources-content section+section{margin-top:28px}
.sources-content h2,.sources-content h3{font:500 16px/1.4 Inter,system-ui,sans-serif;margin:0 0 10px;color:var(--ink)}
.sources-content p{margin:0 0 12px}
.sources-content a{color:var(--ink);text-decoration-color:#a6b0b966;text-underline-offset:4px}
.sources-content a:hover{color:var(--orange)}
@media(max-width:699px){.sources-dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px)}.sources-content{padding:24px 20px 28px;font-size:13px}}

/* A brief introduction shares the scene. */
.about-section{position:relative;z-index:5;display:grid;grid-template-columns:1fr 2fr;gap:40px;max-width:1600px;margin:0 auto;padding:54px 7vw 70px;border-top:1px solid var(--rule);scroll-margin-top:100px}
.about-section h2{font:500 13px/1.5 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:8px 0}
.about-content p{max-width:24ch;margin:0 0 26px;font:400 clamp(24px,3vw,40px)/1.3 Inter,system-ui,sans-serif;letter-spacing:-.035em;text-wrap:balance}
.about-links{display:flex;gap:28px;font-size:13px}.about-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration-thickness:1px;text-underline-offset:6px}
@media(max-width:760px){.about-section{grid-template-columns:1fr;gap:16px;padding:38px 25px 45px}.about-content p{font-size:27px}}

/* The Projects heading stays secondary but is easier to find beside the scene. */
.space-stage .section-title h2{font-size:15px;color:var(--dim)}
@media(max-width:699px){.space-stage .section-title h2{font-size:13px}}

/* About: a short story and a timeline. */
.about-content .about-story{margin:0 0 26px}
.about-content .about-story p{max-width:46ch;margin:0 0 10px;font:400 17px/1.65 Inter,system-ui,sans-serif;letter-spacing:-.005em;color:#c9d0d6;text-wrap:pretty}
.about-timeline-title{font:500 13px/1.5 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:30px 0 10px}
.about-timeline{margin:0 0 30px;max-width:46ch;border-top:1px solid var(--rule)}
.about-timeline div{display:grid;grid-template-columns:9.5em 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font:400 15px/1.6 Inter,system-ui,sans-serif}
.about-timeline dt{color:var(--dim)}.about-timeline dd{margin:0}
@media(max-width:760px){.about-content .about-story p{font-size:16px}.about-timeline div{grid-template-columns:8.5em 1fr;font-size:14px}}

/* ---- The backdrop -----------------------------------------------------------
   The ground under the sky is plain night. The photograph is only for a device
   with no rendered sky, where it is sized to the window and not to the section. */
.space-stage[data-sky=fallback]::before{content:"";position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;background:#03070e url('assets/stars-nasa.jpg') center/cover}
/* iOS Safari also shows the page under its floating toolbar, where no fixed
   layer can reach: the sky would stop at a hard line above the toolbar. There
   the sky fades into the same night colour over its last 96 px, so it has no
   edge. iOS only; closed page only. */
@supports(-webkit-touch-callout:none){.space-stage:not(.is-playing)::after{content:"";position:fixed;left:0;right:0;bottom:0;height:96px;z-index:0;pointer-events:none;background:linear-gradient(#03070e00,#03070e)}}

/* The footer takes the header's treatment: the sky runs under it, with a
   thin backing and the same hairline. Plain transparency, no blur. Its links
   are full-height targets. */
.site-footer{background:linear-gradient(#080d1740,#080d1799);border-top:1px solid #e9e6e112;padding:14px 7vw 18px;font-size:13px;gap:20px}
.site-footer>span{text-shadow:0 1px 6px var(--night)}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;text-shadow:0 1px 6px var(--night)}

/* Phone: readable type and full-size targets. Nothing a visitor reads is
   under 14 px. The footer's links come first on their own row, the same
   left edge as the page; the copyright line sits under them. */
@media(max-width:760px){
 .site-footer{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0;padding:8px 25px 20px;font-size:15px}
 .site-footer>div{order:-1;gap:30px;flex-wrap:nowrap}
 .site-footer>span{font-size:14px}
}
@media(max-width:699px){
 .hero-copy p{font-size:17px}
 .space-stage .section-title h2{font-size:14px}
 .about-section h2,.about-timeline-title{font-size:14px}
 .about-content .about-story p{font-size:17px}
 .about-timeline div{font-size:15px}
 .about-links{font-size:15px}
 .sources-content{font-size:15px}
 /* Project entries: only the type. Their layout measures its own text
    (project-reserve.js, project-motion.js), so the held space follows. */
 .project-deck [data-project-layer=summary],.project-deck .project-inline-description{font-size:15px}
 .project-deck .project-inline-actions a,.project-deck .project-inline-actions button{font-size:14px}
 .project-gallery-status{font-size:14px}
 .project-deck .project-inline-meta{font-size:12px}
}

/* An empty text slot takes no space. */
.about-content p:empty,.about-content .about-story:not(:has(p:not(:empty))){display:none}
.about-content:has(>p:empty) .about-timeline-title{margin-top:8px}
/* Playing: the cat is aiming space; nothing on it pans. */
.is-playing .studio-cat{touch-action:none}
/* Phones: the page behind the status area is the scene's own colour (viewport-fit=cover). */
@media(max-width:699px){html{background:#03070e}}

/* The timeline is a thread, not a table: left-aligned, dated above each line, no rules between rows. */
.about-timeline{position:relative;max-width:46ch;margin:0 0 30px;padding:2px 0 0 24px;border-top:0}
.about-timeline::before{content:"";position:absolute;left:3px;top:10px;bottom:14px;width:1px;background:linear-gradient(#8e9ca900,#8e9ca966 14%,#8e9ca966 86%,#8e9ca900)}
.about-timeline div{position:relative;display:block;padding:0 0 20px;border:0}
.about-timeline div::before{content:"";position:absolute;left:-24px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--night,#03070e);border:1px solid #c9d0d6aa}
.about-timeline div:first-child::before{background:var(--orange,#ff8a48);border-color:var(--orange,#ff8a48)}
.about-timeline dt{font:500 12px/1.5 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0 0 2px}
.about-timeline dd{font:400 17px/1.5 Inter,system-ui,sans-serif;margin:0;color:#e4e8ec}
/* Social links carry their mark. Marks: Simple Icons (CC0). */
.social-icon{width:18px;height:18px;flex:none;margin-right:9px;fill:currentColor}
.about-links a,.site-footer a:has(.social-icon){display:inline-flex;align-items:center}

/* ---- Where the line under the name sits ----------------------------------------
   Default (no attribute): under the name; on a phone the name and the line come first, then the links.
   One attribute on <html> moves it:
     data-tagline="under-cat"  the line sits under the cat, by the thing you play with;
     data-tagline="after-run"  it is not shown until a run has been played, then it sits
                               under the cat with how the run went.
   In both, the cue takes its place: when the cue comes up the line is knocked down
   and out, and it settles back when the cue has gone. The line under the name is then kept
   for screen readers only, so it is read once. Nothing here moves unless the attribute is set. */
.cat-line{display:none}
html:is([data-tagline=under-cat],[data-tagline=after-run]) .hero-copy p{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-tagline=under-cat] .studio-cat .cat-line,html[data-tagline=after-run] .studio-cat:has(.forest-last:not([hidden])) .cat-line{display:block;position:absolute;top:84%;left:50%;width:max-content;max-width:88vw;transform:translateX(-50%);font:400 clamp(15px,1.5vw,20px)/1.4 Inter,system-ui,sans-serif;letter-spacing:-.015em;color:var(--ink);text-shadow:0 2px 14px var(--night);pointer-events:none;transition:opacity .2s ease,transform .42s cubic-bezier(.2,1.5,.4,1)}
html[data-tagline=after-run] .studio-cat:has(.forest-last:not([hidden])) .cat-line{animation:cat-line-in .6s cubic-bezier(.2,.8,.25,1) both}
@keyframes cat-line-in{from{opacity:0;transform:translate(-50%,10px)}}
html:is([data-tagline=under-cat],[data-tagline=after-run]) .studio-cat .forest-last{top:calc(84% + 30px)}
html:is([data-tagline=under-cat],[data-tagline=after-run]) .studio-cat:is([data-invite-open=true],[data-charging=true],[data-cue-ready=true]:is(:hover,:focus-visible)) .cat-line,html:is([data-tagline=under-cat],[data-tagline=after-run]) :is(.is-docking,.is-compact,.is-playing) .cat-line{opacity:0;transform:translate(-50%,16px) rotate(4deg) scale(.9);transition:opacity .16s ease,transform .3s cubic-bezier(.5,0,.8,.4)}
@media(prefers-reduced-motion:reduce){.cat-line{transition:opacity .01s!important;animation:none!important}}

/* ---- About, a row a month ------------------------------------------------------
   The timeline grows a row a month: a gap of years is a break in the line,
   and the newest row carries the lit dot. */
.about-timeline{max-width:52ch}
.about-timeline div.after-gap{margin-top:44px}
.about-timeline div.after-gap::after{content:"";position:absolute;left:-22px;top:-50px;width:3px;height:44px;background:repeating-linear-gradient(var(--night,#080d17) 0 5px,#0000 5px 9px)}
.about-timeline div:first-child::before{background:var(--night,#03070e);border-color:#c9d0d6aa}
.about-timeline div:last-child::before{background:linear-gradient(135deg,#62c9ff,#c4a9ff);border-color:#c4a9ff;box-shadow:0 0 8px #7fd0ff66}
.about-timeline dd{text-wrap:pretty}
/* A small tag beside a line or a row; a larger first line. */
.about-draft-tag{display:inline-block;margin:0 0 16px;padding:3px 10px;border:1px solid #eab94d80;border-radius:999px;font:500 11px/1.6 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#eab94d}
.about-content p.about-statement{max-width:21ch}
.about-timeline dt .about-draft-tag{margin:0 0 0 10px;padding:0 8px;font-size:10px;letter-spacing:.08em}
.about-timeline div.is-draft::before{border-style:dashed;border-color:#eab94d}
/* An entry's small amber tag leads its line. */
.project-tag{display:inline-block;margin-right:8px;padding:0 8px;border:1px solid #eab94d80;border-radius:999px;font:500 12px/1.6 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#eab94d;vertical-align:1px}
.projects-plain{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:30px;max-width:60ch}.projects-plain h3{font:500 22px/1.3 Inter,system-ui,sans-serif;margin:0 0 6px}.projects-plain p{margin:0 0 8px;font:400 16px/1.6 Inter,system-ui,sans-serif;color:#c9d0d6}.projects-plain a{display:inline-flex;align-items:center;min-height:44px;color:var(--teal);text-underline-offset:4px}