@font-face{font-family:Mattone;src:url('fonts/mattone-bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{color-scheme:light;--page:#f8f8f7;--text:#353538;--subtle:#69676e;--purple:#513695;--surface:#eff0f5;--ease:cubic-bezier(.65,0,.35,1);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);font:400 16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:progress}a{color:inherit}button:focus-visible,a:focus-visible,[tabindex="-1"]:focus-visible{outline:2px solid #6f57a6;outline-offset:5px}button{touch-action:manipulation}img,canvas{display:block}[hidden]{display:none!important}.landing-stage{max-width:1080px;margin:auto;padding:24px 60px 48px}.page-header{height:168px;display:flex;align-items:flex-start;padding-top:60px}.brand{display:inline-flex;min-height:32px;align-items:flex-start}.brand img{width:24px;height:24px}.hero{display:grid;grid-template-columns:380px minmax(0,1fr);gap:48px;align-items:start}.intro-copy{font-size:24px;line-height:1.2;letter-spacing:-.025em}.intro-copy p{margin:0 0 32px}.intro-copy p:last-child{margin-bottom:0}.inline-brand{font-family:Mattone,system-ui,sans-serif;font-size:.9em;font-weight:700;letter-spacing:-.04em;color:#41217e}.computer-inset{position:relative;isolation:isolate;min-width:0;height:440px;margin-top:-32px;background:linear-gradient(145deg,#f0f0f7,#eaeaf2);border-radius:24px;box-shadow:inset 0 1px 2px #35304009;overflow:visible}.entry-actions{position:absolute;z-index:3;top:24px;left:20px;right:20px;display:flex;justify-content:center;gap:12px}.action{border:0;border-radius:100px;padding:10px 20px;min-height:44px;white-space:nowrap;font-size:14px;font-weight:500;transition:background 140ms,box-shadow 140ms,translate 180ms var(--ease)}.action-primary{color:#fff;background:linear-gradient(160deg,#7150c8,#43207f);box-shadow:0 2px 4px #321b5720,inset 0 1px #ffffff33}.action-primary:hover{background:linear-gradient(160deg,#7c5ad3,#4c288b);box-shadow:0 3px 7px #321b5728}.action-primary:active{translate:0 1px}.action-secondary{background:#ffffff30;color:#70677f;box-shadow:inset 0 0 0 1px #70618b22}.action-secondary:hover{background:#ffffff70;color:#4d4261}.computer-visual{position:absolute;inset:78px -12px -8px;min-width:0;pointer-events:none}.computer-visual canvas,.computer-fallback{width:100%;height:100%;object-fit:contain}.screen-action{position:absolute;z-index:2;border:0;min-height:36px;padding:6px 14px;white-space:nowrap;border-radius:100px;background:linear-gradient(#fffefa,#edeae3);color:#242329;font-size:12px;box-shadow:0 2px 4px #0003,inset 0 1px #fff;transform:translate(-50%,-50%);pointer-events:auto}.screen-action:hover{background:#fff;box-shadow:0 3px 8px #0004}.entry-status{position:absolute;bottom:8px;left:24px;right:24px;font-size:13px;color:var(--subtle);margin:0}.return-home{position:absolute;z-index:5;top:max(24px,var(--safe-top));left:32px;border:0;background:transparent;min-height:44px;padding:8px 0;font-size:14px;color:#625e69}.return-home span{margin-right:8px}.explore-content{position:absolute;inset:0;z-index:2;pointer-events:none}.destination-list{position:absolute;width:244px;left:calc(50% - 272px);top:50%;translate:0 -50%;display:grid;gap:18px;pointer-events:auto}.destination{position:relative;display:flex;align-items:center;width:100%;min-height:64px;border:0;border-radius:9px;padding:14px 18px 14px 86px;text-align:left;font-size:14px;line-height:1.25;color:#282932;box-shadow:inset 0 1px #ffffffa0,inset 0 0 0 1px #54445816,0 2px 4px #2d263a10;isolation:isolate;transition:box-shadow 160ms,filter 160ms}.destination:hover{box-shadow:inset 0 1px #ffffffb0,0 4px 9px #2d263a15;filter:saturate(1.08)}.destination[aria-expanded=true]{outline:1px solid #766b8544;outline-offset:3px}.destination-pricing{background:linear-gradient(145deg,#f3d7b2,#ebc8ad 65%,#eed1c1)}.destination-about{background:linear-gradient(145deg,#c8e5ef,#b9d8ea 65%,#c6d5eb)}.destination-faq{background:linear-gradient(145deg,#e7cee5,#dfc5df 55%,#e8cbdc)}.motif{position:absolute;left:12px;top:50%;translate:0 -50%;width:56px;height:66px;pointer-events:none}.motif-coins{perspective:130px}.motif-coins i{position:absolute;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#fffdfa,#d5d4d0 75%,#eeece7);border:1px solid #c7c4c1;box-shadow:inset 0 0 0 3px #eeece7,inset 0 0 0 4px #d4d0ce,2px 4px 0 #a79abd,3px 7px 5px #51495429;transform:rotateX(28deg) rotateY(-30deg) rotateZ(-24deg);left:0;top:25px}.motif-coins i+i{left:28px;top:0;transform:rotateX(28deg) rotateY(-28deg) rotateZ(18deg)}.motif-globe{height:64px;width:64px;left:7px}.motif-globe svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(1px 4px 2px #49405419)}.motif-question{font:700 72px/.9 system-ui,sans-serif;color:#987aaf;text-shadow:1px 1px #e9def3,2px 3px #8c73a9,3px 5px 4px #57456529;top:44%;text-align:center}.globe-stage>canvas,.globe-stage>svg{position:absolute;inset:0;width:100%;height:100%}.globe-fallback{display:none}.globe-stage[data-renderer=svg] .globe-fallback{display:block}.globe-stage[data-renderer=svg] canvas{display:none}.globe-motion-toggle{position:absolute;right:0;top:0;width:32px;height:32px;background:transparent;border:0;z-index:2}.globe-motion-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}.no-script{max-width:600px;margin:24px auto}.skip-link{position:fixed;top:12px;left:16px;z-index:30;padding:8px 12px;background:white;transform:translateY(-200%)}.skip-link:focus{transform:none}.lesson-view{position:fixed;inset:0;z-index:20;background:var(--page)}.lesson-view iframe{width:100%;height:100%;border:0}.lesson-back{position:absolute;top:max(12px,var(--safe-top));left:16px;z-index:2;border:0;border-radius:100px;padding:10px 16px;background:#fafafae8;box-shadow:0 2px 8px #0001;font-size:14px}body[data-view=lesson]{overflow:hidden}
body[data-view=explore] .computer-inset{position:fixed;inset:16px;height:auto;margin:0;z-index:10;border-radius:24px;background:linear-gradient(135deg,#f6f8fa,#f1f4f8)}body[data-view=explore] .computer-visual{inset:0;left:calc(50% + 4px);width:300px;height:300px;top:50%;translate:0 -50%}body[data-view=explore] .intro-copy,body[data-view=explore] .page-header{visibility:hidden}.is-transitioning .computer-inset{pointer-events:none}body[data-view=explore] .entry-actions{display:none}
@media(min-width:1440px){.computer-inset{height:464px}}
@media(max-width:959px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}.intro-copy{font-size:22px}.computer-inset{height:400px}.entry-actions{gap:8px;left:12px;right:12px}.action{padding-inline:15px}}
@media(max-width:699px){.landing-stage{padding:24px 24px max(32px,var(--safe-bottom))}.page-header{height:80px;padding-top:16px}.hero{display:flex;flex-direction:column;gap:36px}.intro-copy{font-size:24px;line-height:1.2;max-width:380px}.computer-inset{width:100%;height:380px;margin-top:0}.computer-visual{inset:70px -8px -8px}.entry-actions{top:20px}.action{font-size:14px}.return-home{left:24px}body[data-view=explore] .computer-inset{inset:8px;border-radius:20px}body[data-view=explore] .computer-visual{left:50%;top:40%;width:min(280px,80vw);height:280px;translate:-50% -50%}.destination-list{left:50%;top:auto;bottom:max(32px,var(--safe-bottom));translate:-50% 0;width:min(320px,calc(100% - 48px));gap:14px}.destination{min-height:52px;padding-left:78px}.motif{scale:.8;transform-origin:center}.screen-action{font-size:12px}}
@media(max-height:650px) and (min-width:700px){.page-header{height:120px;padding-top:36px}.computer-inset{height:360px}.destination-list{gap:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Incoming navigation waits until the expanded receiver has landed. */
.is-transitioning .explore-content,.is-transitioning .return-home,.is-transitioning .entry-actions{visibility:hidden;opacity:0}
body[data-view=explore]:not(.is-transitioning) .destination{animation:destination-arrive 260ms var(--ease) both}
body[data-view=explore]:not(.is-transitioning) .destination:nth-child(2){animation-delay:45ms}body[data-view=explore]:not(.is-transitioning) .destination:nth-child(3){animation-delay:90ms}
@keyframes destination-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* The established native cabinet and camera are the sole computer renderer. */
.native-computer-frame{position:absolute;width:100vw;height:100vh;border:0;transform-origin:center;pointer-events:none;opacity:0;background:#eff0f5;transition:opacity 180ms}
.native-computer-frame[data-ready=true]{opacity:1}
.computer-visual{overflow:hidden;inset:78px 0 0;border-radius:0 0 24px 24px}
body[data-view=work]{overflow:hidden}body[data-view=work] .computer-inset{position:fixed;inset:0;height:auto;margin:0;z-index:20;border-radius:0;background:#eff0f5}body[data-view=work] .computer-visual{inset:0;width:100%;height:100%;translate:none;border-radius:0;pointer-events:auto}body[data-view=work] .native-computer-frame{pointer-events:auto}body[data-view=work] .entry-actions{display:none}body[data-view=work] .intro-copy,body[data-view=work] .page-header{visibility:hidden}
body[data-view=explore] .computer-visual{border-radius:12px}
@media(max-width:699px){.computer-visual{inset:70px 0 0}}
.computer-inset{background:#eff0f5}body[data-view=explore] .computer-inset{background:#eff0f5}
body[data-view=explore] .computer-inset{width:auto}
@media(max-width:699px){
 .destination-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(336px,calc(100% - 40px));bottom:max(40px,var(--safe-bottom))}
 .destination{min-height:86px;padding:43px 8px 10px;align-items:flex-start;justify-content:center;text-align:center;font-size:12px;line-height:1.2}
 .destination .motif{left:50%;top:2px;translate:-50% -28%;scale:.7}
 .destination .motif-globe{left:50%;width:64px;height:64px}
 .destination .motif-question{top:1px}
 body[data-view=explore] .computer-visual{top:44%;width:min(260px,76vw);height:270px}
}
@media(max-height:450px) and (min-width:700px){
 .landing-stage{padding-block:16px}.page-header{height:64px;padding-top:12px}.intro-copy{font-size:18px;line-height:1.2}.intro-copy p{margin-bottom:24px}.computer-inset{height:calc(100svh - 100px);margin-top:0}.entry-actions{top:12px}.computer-visual{inset:62px 0 0}
 body[data-view=explore] .computer-visual{height:260px;width:260px}.destination-list{gap:12px}.destination{min-height:52px}
}
/* Phone information replaces the directory in place; it is not a modal sheet. */
@media(max-width:699px){
}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* One measured page-frame and fit budget, resolved through Design's unit. */
.landing-stage{padding-inline:var(--frame-pad,60px)}.page-header{height:var(--header-height,168px);padding-top:var(--header-inset,60px)}.hero{grid-template-columns:var(--hero-columns,380px minmax(0,1fr));gap:var(--hero-gap,48px)}.intro-copy{font-size:var(--reading-size,24px)}
.landing-stage[data-layout=stack] .hero{display:flex;flex-direction:column;gap:36px}.landing-stage[data-layout=stack] .intro-copy{max-width:380px}body[data-view=home] .landing-stage[data-layout=stack] .computer-inset{width:100%;margin-top:0}
body:not([data-view=home]) .skip-link{display:none}

/* Restored peer path and quiet, usable product answers. */
.interactive-entry{display:none;position:absolute;z-index:3;left:calc(50% + 154px);top:calc(50% + 138px);translate:-50% 0;min-height:44px;padding:12px 4px;font-size:13px;color:#615a6c;text-decoration:none;white-space:nowrap}.interactive-entry:hover{text-decoration:underline;text-underline-offset:4px}body[data-view=explore]:not(.is-transitioning) .interactive-entry{display:block}
.motif-coins i{display:grid;place-items:center;font-size:19px;font-style:normal;font-weight:600;color:#775d99;text-shadow:0 1px #fff9;backface-visibility:visible}.destination-pricing:active .motif-coins{transform:rotateY(180deg)}.motif-coins{transition:transform 450ms cubic-bezier(.65,0,.35,1)}
@media(max-width:699px){.interactive-entry{left:50%;top:calc(44% + 130px)}}
@media(prefers-reduced-motion:reduce){.motif-coins{transition:none}.destination-pricing:active .motif-coins{transform:none}}

@media(max-width:699px){}.destination-pricing:active .motif-coins{transform:none}

.destination:hover{filter:none}.destination{transition:box-shadow 160ms,background 160ms}.destination:focus-visible{outline:2px solid #6f57a6;outline-offset:5px}

.screen-action[data-preview=true]{font-size:0;color:transparent;background:transparent;box-shadow:none;padding:0;min-height:0;border-radius:10px;cursor:zoom-in}.screen-action[data-preview=true]:hover{background:transparent;box-shadow:inset 0 0 0 2px #c8b8fb80}.screen-action[data-preview=true]:focus-visible{outline:2px solid #8c74c9;outline-offset:4px}.destination[aria-pressed=true]{box-shadow:inset 0 0 0 2px #7a639c,0 2px 4px #2d263a10}

/* Entry actions belong to the product copy, rather than the computer preview. */
.intro-copy .entry-actions{position:relative;inset:auto;margin-top:32px;justify-content:flex-start;flex-wrap:wrap;gap:12px;letter-spacing:normal}

.intro-copy .entry-actions{width:100%;flex-wrap:nowrap}.intro-copy .entry-actions .action{flex:1;min-width:0;padding-inline:12px}
body[data-isolated=true] .computer-visual{left:50%;top:50%;translate:-50% -50%}
body[data-isolated=true] .interactive-entry{display:none!important}

body[data-view=explore] .computer-inset{inset:var(--isolate-block,24px) var(--isolate-inline,24px)}
body[data-isolated=true] .screen-action{background:transparent;box-shadow:none;color:#f7f5ef;border-radius:0;font-size:12px;font-weight:500;text-shadow:0 0 5px #fff5;padding:8px 4px}
body[data-isolated=true] .screen-action:hover{background:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:4px}

body[data-view=home] .computer-inset{cursor:pointer}

/* A quiet phosphor inscription, with the glass itself as the click target. */
body[data-isolated=true] .screen-action{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 6px;color:#eee9dd;font:500 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.025em;text-shadow:0 0 9px #ead9ff50;transition:color 180ms ease,text-shadow 180ms ease}
.screen-start-icon{font-family:system-ui,sans-serif;font-size:15px;line-height:1;color:#cfb5ed;text-shadow:0 0 8px #bc8de370;transition:translate 180ms ease}
.screen-start-label{position:relative;padding-block:3px}
.screen-start-label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#c4dce380,#d4b7e6b0,#ead9af70);opacity:.55;transform:scaleX(.72);transition:transform 180ms ease,opacity 180ms ease}
body[data-isolated=true] .screen-action:hover{color:#fffaf1;text-decoration:none;text-shadow:0 0 10px #e8d6ff80}
.screen-action:hover .screen-start-label::after,.screen-action:focus-visible .screen-start-label::after{opacity:1;transform:scaleX(1)}
.screen-action:hover .screen-start-icon{translate:1px 0}
.screen-action[data-preview=true] .screen-start-icon,.screen-action[data-preview=true] .screen-start-label{visibility:hidden}

/* The invitation is rendered by the physical CRT shader; this is only its hit target. */
.screen-action,.screen-action:hover{background:transparent!important;box-shadow:none!important;border:0!important;text-shadow:none!important}
.screen-action>span{visibility:hidden!important}

body[data-view=home] .computer-visual{inset:8px 0 0;border-radius:0 0 24px 24px}

.explore-picker{position:absolute;left:calc(50% - 350px);top:50%;translate:0 -50%;width:340px;pointer-events:auto}
@media(max-width:699px){.explore-picker{left:24px;right:24px;top:auto;bottom:max(24px,var(--safe-bottom));translate:none;width:auto}body[data-view=explore]:not([data-isolated=true]) .computer-visual{top:28%}}

.intro-copy .entry-actions{flex-direction:column;align-items:stretch;gap:12px}
.intro-copy .entry-actions>.action{flex:none;width:100%}
.intro-copy .explore-picker{position:relative;inset:auto;translate:none;width:100%;font-size:14px;letter-spacing:normal}
/* Entry controls share the page's surface ramp and one lighting direction. */
.intro-copy .action-primary{
 min-height:50px;border-radius:16px;color:var(--brand-ink,#41217e);
 background:linear-gradient(165deg,color-mix(in oklch,var(--paper,#fff) 42%,#c8b8fb),color-mix(in oklch,var(--paper,#fff) 26%,#c8b8fb));
 box-shadow:inset 0 1px 0 #ffffffc9,inset 0 0 0 1px #78609524,0 3px 0 #b3a3ca,0 5px 9px #38264f14;
 font-size:14px;font-weight:600;transition:translate 140ms cubic-bezier(.4,0,.2,1),box-shadow 140ms,filter 140ms;
}
.intro-copy .action-primary:hover{translate:0 -2px;filter:brightness(1.025);box-shadow:inset 0 1px 0 #ffffffdf,inset 0 0 0 1px #78609538,0 5px 0 #b3a3ca,0 8px 14px #38264f1c}
.intro-copy .action-primary:active{translate:0 2px;filter:brightness(.98);box-shadow:inset 0 1px 2px #38264f12,inset 0 0 0 1px #78609530,0 1px 0 #b3a3ca,0 2px 4px #38264f10}
.intro-copy .entry-actions{gap:18px}
.intro-copy .shyft-picker{--shyft-popover:color-mix(in oklch,var(--paper,#fff) 90%,#c8b8fb)}
.intro-copy [data-slot=shapeshift-shell]{border-radius:16px;box-shadow:inset 0 1px #fff,inset 0 0 0 1px #78609520,0 2px 0 #d9d3e2,0 4px 8px #38264f0b;transition:box-shadow 140ms,background 140ms}
.intro-copy [data-slot=shapeshift-shell]:hover{box-shadow:inset 0 1px #fff,inset 0 0 0 1px #78609540,0 3px 0 #d1c7df,0 6px 12px #38264f12}
.intro-copy [data-slot=shapeshift-shell]:focus-within{box-shadow:inset 0 1px #fff,0 0 0 2px #9a83bd55,0 2px 0 #d1c7df,0 5px 12px #38264f12}
.intro-copy [data-slot=shapeshift-bar]{min-height:50px}
.intro-copy [data-slot=shapeshift-input]::placeholder{color:#736080;opacity:1}
/* Typography specimen: neutral ink and native, unsynthesised glyph rendering. */
body,.intro-copy :is(p,button,input),.shyft-picker :is(h2,p,button,input,li,span){
 text-rendering:var(--type-rendering,auto);font-kerning:normal;font-optical-sizing:auto;font-variant-ligatures:normal;font-synthesis:none;
 -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:none;
}
.intro-copy{color:var(--ink)}
.intro-copy .action-primary,.intro-copy .action-primary:hover,.intro-copy .action-primary:active{color:var(--ink);filter:none}
.intro-copy .shyft-picker{--color-popover-foreground:var(--ink);--color-muted-foreground:var(--muted);color:var(--ink)}
.intro-copy [data-slot=shapeshift-input],.intro-copy [data-slot=shapeshift-input]::placeholder,.intro-copy .shyft-preview p{color:var(--ink);opacity:1}
/* Neutral receivers: depth carries the invitation, not a coloured wash. */
.intro-copy .action-primary{background:linear-gradient(165deg,#f5f5f5,#e3e3e5);box-shadow:inset 0 1px #fff,inset 0 0 0 1px #34343d18,0 3px 0 #c3c3c8,0 5px 9px #24242c12}
.intro-copy .action-primary:hover{background:linear-gradient(165deg,#fafafa,#e8e8ea);box-shadow:inset 0 1px #fff,inset 0 0 0 1px #34343d24,0 5px 0 #c3c3c8,0 8px 14px #24242c17}
.intro-copy .action-primary:active{box-shadow:inset 0 1px 2px #24242c12,inset 0 0 0 1px #34343d20,0 1px 0 #c3c3c8,0 2px 4px #24242c0c}
.intro-copy .shyft-picker{--shyft-popover:#fafafa}
.intro-copy [data-slot=shapeshift-shell]{background:transparent;box-shadow:inset 0 0 0 1px #34343d20;border-radius:16px}
.intro-copy [data-slot=shapeshift-shell]:hover{background:#ffffff70;box-shadow:inset 0 0 0 1px #34343d30}
.intro-copy [data-slot=shapeshift-shell]:focus-within{background:#fafafa;box-shadow:inset 0 0 0 1px #34343d30,0 4px 14px #24242c0b}

.secondary-copy{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows 260ms cubic-bezier(.4,0,.2,1),opacity 160ms}
.intro-copy .secondary-copy>p{min-height:0;overflow:hidden;margin:0}
.intro-copy>p:first-of-type{transition:margin-bottom 260ms cubic-bezier(.4,0,.2,1)}
.intro-copy[data-more-open=true] .secondary-copy{grid-template-rows:0fr;opacity:0;visibility:hidden}
.intro-copy[data-more-open=true]>p:first-of-type{margin-bottom:0}
.primary-recess{padding:5px;border-radius:20px;background:#eeeeef;box-shadow:inset 0 2px 4px #24242c18,inset 0 -1px 1px #ffffffd9}
.intro-copy .primary-recess .action-primary{display:block;width:100%;background:#f3f3f3;border-radius:15px;box-shadow:inset 0 1px 1px #ffffffed,0 1px 2px #24242c16,0 3px 6px -2px #24242c1a,-2px -2px 5px #ffffffc9;translate:0 0}
.intro-copy .primary-recess .action-primary:hover{background:#f6f6f6;translate:0 -1px;box-shadow:inset 0 1px 1px #fff,0 2px 3px #24242c17,0 5px 9px -3px #24242c20,-2px -2px 5px #ffffffd9}
.intro-copy .primary-recess .action-primary:active{background:#ededee;translate:0 1px;box-shadow:inset 0 2px 3px #24242c14,inset 0 -1px 1px #ffffffb0}

.screen-action{padding:0!important;min-height:0!important;cursor:pointer;border-radius:10px}
.intro-copy .primary-recess{padding:6px;background:#e8e8e9;box-shadow:inset 0 2px 4px #24242c20,inset 0 -1px 1px #ffffffed}
.intro-copy .primary-recess .action-primary{min-height:58px;font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.015em;color:#454545;background:#f8f8f8;box-shadow:inset 0 1px 1px #fff,0 1px 2px #24242c20,0 4px 8px -2px #24242c25,-2px -2px 5px #ffffffdc}
.intro-copy .primary-recess .action-primary:hover{background:#fff;box-shadow:inset 0 1px 1px #fff,0 2px 3px #24242c21,0 6px 12px -3px #24242c29,-2px -2px 5px #fff}
/* Compact control, with typographic emphasis rather than extra bulk. */
.intro-copy .primary-recess{padding:5px}
.intro-copy .primary-recess .action-primary{min-height:50px;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.25;font-weight:500;letter-spacing:0}
/* The input is the anchor; disclosure grows upward without relocating it. */
.intro-copy .explore-picker{height:50px;min-height:50px}
.intro-copy .shyft-picker{position:absolute;left:0;right:0;bottom:0}
.intro-copy[data-more-open=true] .secondary-copy{grid-template-rows:1fr;opacity:0;visibility:hidden}
.intro-copy[data-more-open=true]>p:first-of-type{margin-bottom:32px}

.intro-copy .primary-recess{position:relative;translate:0 calc(-1 * var(--picker-growth,0px))}

.pricing-coins-escape{position:absolute;right:-25px;top:-54px;width:150px;height:125px;z-index:5;pointer-events:none;filter:drop-shadow(0 5px 3px #39304425)}
.pricing-coins-escape canvas{width:100%;height:100%;display:block}
.shyft-picker:has(.pricing-coins-escape) .shyft-preview{padding-right:55px}
@media(max-width:500px){.pricing-coins-escape{right:-10px;top:-42px;width:120px;height:100px}}

.pricing-coins-escape{right:12px;top:8px;width:120px;height:100px;pointer-events:auto;cursor:pointer;border:0;background:transparent;padding:0;filter:drop-shadow(0 4px 3px #39304420)}
.pricing-coins-escape:focus-visible{outline:2px solid #8970bd;outline-offset:2px;border-radius:16px}
.shyft-picker:has(.pricing-coins-escape) .shyft-preview{padding-right:112px;min-height:104px}
@media(max-width:500px){.pricing-coins-escape{right:8px;top:8px;width:100px;height:90px}.shyft-picker:has(.pricing-coins-escape) .shyft-preview{padding-right:96px}}

.pricing-coins-escape{transition:translate 220ms cubic-bezier(.4,0,.2,1),scale 220ms}
.pricing-coins-escape[data-flipping=true]{translate:30px -32px;scale:1.12}
.topic-content{position:absolute;inset:0;z-index:6;padding:24px 28px;overflow:auto;color:var(--ink);border-radius:inherit;background:inherit}
.computer-inset[data-topic] .computer-visual,.computer-inset[data-topic] .interactive-entry{visibility:hidden}
.topic-back{background:transparent;border:0;padding:0;min-height:32px;font-size:12px;color:var(--muted)}
.topic-body h2{font-size:26px;line-height:1.2;font-weight:500;margin:20px 0 14px;letter-spacing:-.025em}
.topic-body p{font-size:14px;line-height:1.5;margin:8px 0 16px}.topic-intro{color:var(--muted)}
.pricing-tiers>section{border-top:1px solid #55555520;padding:12px 0}.pricing-tiers h3{font-size:15px;font-weight:500;margin:0;display:flex;justify-content:space-between;gap:12px}.pricing-tiers h3 span{font-size:13px;white-space:nowrap}.pricing-tiers p{margin-bottom:0}
.topic-body details{border-top:1px solid #55555520;padding:13px 0}.topic-body summary{cursor:pointer;font-size:14px;font-weight:500}.topic-body details p{color:var(--muted)}
.shyft-picker:has(.pricing-coins-escape) .shyft-preview{padding-right:96px}.shyft-preview button{font-size:13px}
.new-question{font-size:12px!important;color:var(--muted)}
.intro-copy .shyft-picker{--shapeshift-max-height:300px}
.pricing-coins-escape[data-flipping=true]{translate:42px -50px;scale:1.12}

.computer-inset[data-topic]{cursor:auto}

/* The invitation stays anchored to the input while its words morph. */
.picker-morph-label{position:absolute;bottom:0;left:50%;height:48px;display:flex;align-items:center;translate:-50% 0;pointer-events:none;color:var(--ink);font-size:14px;white-space:nowrap;transition:left 340ms ease-in-out,translate 340ms ease-in-out,opacity 120ms}
.shyft-picker[data-reading=true] .picker-morph-label{left:16px;translate:0 0}
.picker-morph-label[data-hidden=true]{opacity:0}
@media(prefers-reduced-motion:reduce){.picker-morph-label{transition:none}}
/* One inset surface: the CRT's clipped region never outgrows the inset it sits in (short viewports), and the inset clips it through every frame. */
body[data-view=explore] .computer-inset{overflow:clip}body[data-view=explore] .computer-visual{max-width:100%;max-height:100%}
/* Ghost controls carry the control radius, so the shared focus ring follows their shape. */
.return-home,.topic-back,.interactive-entry,.stumpers-entry,.globe-motion-toggle,.brand{border-radius:var(--control-radius)}.return-home{padding-inline:12px;margin-left:-12px}.return-home:focus-visible,.topic-back:focus-visible,.interactive-entry:focus-visible,.stumpers-entry:focus-visible,.globe-motion-toggle:focus-visible,.brand:focus-visible{outline-offset:2px}

/* Isolated computer view, tightened (FUNNEL-PLAN.md).
   One surface: the computer's own surface fills the window; no inset box, no seam with the 3D scene's backdrop.
   The computer is as large as the view allows, the Ask sits under it, answers land on its screen, and the logo, Esc
   and the browser go back. */
body[data-view=explore][data-isolated=true] .computer-inset .computer-visual{inset:0 0 var(--ask-room,120px) 0;left:0;top:0;width:auto;height:auto;max-width:none;max-height:none;translate:none;border-radius:0}
body[data-isolated=true] #computer-area .explore-picker{position:absolute;z-index:4;left:50%;right:auto;top:auto;bottom:max(36px,var(--safe-bottom,0px));translate:-50% 0;width:min(380px,calc(100% - 32px));height:50px;min-height:50px;font-size:14px;letter-spacing:normal}
body[data-isolated=true] #computer-area .shyft-picker{position:absolute;left:0;right:0;bottom:0;--shapeshift-max-height:min(72svh,300px)}
@keyframes ask-arrive{from{opacity:0;translate:-50% 8px}to{opacity:1;translate:-50% 0}}
@media(max-height:520px){body[data-view=explore][data-isolated=true]{--ask-room:84px}body[data-isolated=true] #computer-area .explore-picker{bottom:16px}}
@media(prefers-reduced-motion:reduce){body[data-isolated=true]:not(.is-transitioning) #computer-area .explore-picker{animation:none}}

/* Paper and light: a faint grain over the page (not over the live app), and the pastel glow only while the camera moves. */
body:not([data-view=work])::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.55;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#computer-area::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:multiply;transition:opacity 650ms cubic-bezier(.65,0,.35,1);background:radial-gradient(28% 24% at 38% 46%,#bcdfea,transparent 70%),radial-gradient(30% 26% at 50% 40%,#f2b8cf,transparent 70%),radial-gradient(28% 24% at 62% 48%,#f1d59a,transparent 70%),radial-gradient(26% 22% at 54% 58%,#c8b8fb,transparent 70%)}
body.is-transitioning:not([data-view=work]) #computer-area::after{opacity:.28}
@media(prefers-reduced-motion:reduce){#computer-area::after{display:none}}

/* Home composition (2026-10-19): one focal action, one quiet Ask, the copy centred on the computer. The quiz entries
   live in the Ask ("Test yourself") and after the introduction, not as a list under the buttons. */
.intro-copy>.stumpers-entry{display:none}
body[data-view=home] .hero{align-items:center}
body[data-view=home] .computer-inset{margin-top:0}
.intro-copy .secondary-copy{color:#8d8c93}
.intro-copy .entry-actions{gap:10px;margin-top:36px}
.intro-copy .primary-recess,.intro-copy .primary-recess:hover{padding:0;background:none;box-shadow:none;border-radius:13px}
.intro-copy .primary-recess .action-primary{min-height:50px;border-radius:13px;color:#fff;background:#1f1f22;box-shadow:inset 0 1px #ffffff1a,0 2px 4px #1f1f2220;translate:0 0}
.intro-copy .primary-recess .action-primary:hover{color:#fff;background:#2c2c30;translate:0 0;box-shadow:inset 0 1px #ffffff1a,0 3px 8px #1f1f2228}
.intro-copy .primary-recess .action-primary:active{color:#fff;background:#18181a;translate:0 1px;box-shadow:inset 0 1px 2px #0000003a}
.intro-copy .primary-recess .action-primary:focus-visible{outline:2px solid #9a83bd;outline-offset:3px}
.intro-copy [data-slot=shapeshift-shell]{background:transparent;box-shadow:none;border-radius:13px}
.intro-copy [data-slot=shapeshift-shell]:hover{background:#0000000a;box-shadow:none}
.intro-copy [data-slot=shapeshift-shell]:focus-within{background:#fafafa;box-shadow:inset 0 0 0 1px #34343d24,0 4px 14px #24242c0b}
.intro-copy .picker-morph-label{color:#6c6b72}

/* The Ask in the isolated view is the home Ask, moved: same quiet field, same label, no white slab. During the camera
   move the buttons hide but the Ask stays, so it can glide between its two places. */
.is-transitioning .entry-actions{visibility:visible;opacity:1}
.is-transitioning .entry-actions>.primary-recess{visibility:hidden;opacity:0}
#computer-area [data-slot=shapeshift-shell]{background:transparent;box-shadow:none;border-radius:13px;transition:background 160ms,box-shadow 160ms}
#computer-area [data-slot=shapeshift-shell]:hover{background:#0000000a;box-shadow:none}
#computer-area [data-slot=shapeshift-shell]:focus-within{background:#fafafa;box-shadow:inset 0 0 0 1px #34343d24,0 4px 14px #24242c0b}
#computer-area .picker-morph-label{color:#6c6b72}
.ask-flight{position:fixed;z-index:30;pointer-events:none;will-change:transform;font-size:14px;letter-spacing:normal}
.ask-flight .explore-picker{position:absolute;inset:0;width:auto;height:auto;translate:none}
.ask-flight .shyft-picker{position:absolute;left:0;right:0;bottom:0}
.ask-flight [data-slot=shapeshift-shell]{background:transparent;box-shadow:none;border-radius:13px}
.ask-flight .picker-morph-label{color:#6c6b72}

/* Studio light (studio-light.js): only once clicked through. It fades in with the camera move and out on the way home;
   it replaces the pastel glow, so the transition has one light change and no extra motion. */
#computer-area::after{display:none}
.studio-light{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;border-radius:inherit;opacity:0;mix-blend-mode:soft-light;transition:opacity 650ms cubic-bezier(.65,0,.35,1)}
.studio-light[data-lit=true]{opacity:.9}
body:not([data-isolated=true]):not(.is-transitioning) .studio-light{visibility:hidden}
@media(prefers-reduced-motion:reduce){.studio-light{transition:none}}

/* Clicked through, the Ask becomes the app's corner dock: the mark and "Ask", white, 20px from the inset's corner. It
   widens when used and its answers open upward from the corner. The computer takes the room the Ask used to need. */
body[data-view=explore][data-isolated=true]{--ask-room:0px}
body[data-isolated=true] #computer-area .explore-picker{left:auto;right:20px;bottom:20px;translate:none;width:min(360px,calc(100% - 40px));height:44px;min-height:44px}
#computer-area .explore-picker [data-slot=shapeshift]{justify-content:flex-end}
#computer-area [data-slot=shapeshift-shell],#computer-area [data-slot=shapeshift-shell]:hover{background:#fff;border-radius:22px;box-shadow:0 0 0 1px #0000000f,0 12px 24px -14px #1e193c66}
#computer-area [data-slot=shapeshift-shell]:focus-within{background:#fff;box-shadow:0 0 0 1px #0000001a,0 18px 36px -18px #1e193c73}
#computer-area [data-slot=shapeshift][data-state=rest] [data-slot=shapeshift-shell]:not(:focus-within){width:94px!important}
#computer-area [data-slot=shapeshift][data-state=rest] [data-slot=shapeshift-shell]:not(:focus-within):hover{box-shadow:0 0 0 1px #0000001f,0 14px 26px -14px #1e193c80}
#computer-area [data-slot=shapeshift-bar]{height:44px}
.shyft-picker[data-corner=true] .picker-morph-label{left:auto;right:18px;height:44px;translate:none;color:#1d1c21;font-weight:500}
.shyft-picker[data-corner=true][data-reading=true] .picker-morph-label{left:16px;right:auto;font-weight:400;color:#6c6b72}
.picker-mark{display:none;width:15px;height:15px;margin-right:7px}
.shyft-picker[data-corner=true]:not([data-reading=true]) .picker-mark{display:block}
@media(max-width:699px){body[data-isolated=true] #computer-area .explore-picker{right:16px;bottom:16px;width:calc(100% - 32px)}}
/* The menu of options keeps its old limit (it may scroll); an answer opens at its full height and never scrolls. */
.shyft-picker [data-slot=shapeshift][data-state=listing]{--shapeshift-max-height:160px}
/* One clip for every layer in the inset: the area's own rounded corner, in every view and at every width, so no square
   layer (the opaque scene, the light) can poke past the curve; the layers inside keep square corners. */
.computer-inset{overflow:clip}
body[data-view=home] .computer-visual{border-radius:0}
@media(max-width:699px){body[data-view=explore] .computer-inset{border-radius:24px}}
/* The film through the screen: the app underneath, the montage full bleed over it, the Back pill on top. */
.film-view{position:fixed;inset:0;z-index:20;background:#fff;transform-origin:50% 50%}
.film-app{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.film-reel{position:absolute;inset:0;background:#141416}
.film-reel video{width:100%;height:100%;object-fit:cover;display:block}
.film-skip{position:absolute;right:20px;bottom:20px;border:0;border-radius:100px;padding:8px 16px;min-height:36px;background:#ffffffe6;color:#1d1c21;font-size:13px;box-shadow:0 2px 8px #0002}
.film-skip:hover{background:#fff}
.film-view[data-stage=app] .lesson-back{left:auto;right:16px}
body.is-filming{overflow:hidden}