/* Tactile chapters. The negative sticky inset lets long panels finish scrolling. */
:root{--header-height:72px}html{scroll-padding-top:90px}body{padding-top:var(--header-height)}button,select,input{font-family:var(--sans)}button{color:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.site-header.wrap{position:fixed;inset:0 0 auto;width:100%;height:var(--header-height);padding-inline:max(32px,calc((100vw - 1280px)/2));background:#f7f3e8f5;backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid var(--ink)}.site-header .wordmark{font-size:29px}.skip-link{z-index:120}main{isolation:isolate}.scene{position:relative;background:var(--ivory);min-height:calc(100svh - var(--header-height));box-shadow:0 -2px 0 var(--ink);isolation:isolate}.experience-ready:not(.motion-off) .scene{position:sticky;top:var(--pin,72px)}.scene:after{content:'';position:absolute;inset:0;background:var(--ink);opacity:var(--shade,0);pointer-events:none;z-index:8;transition:opacity .1s linear}.scene>div,.scene>section{position:relative}.opening-scene{box-shadow:none;display:grid;align-items:center}.hero{padding-block:60px 86px;min-height:calc(100svh - 72px)}.film-ribbon{position:relative;z-index:2;margin-block:-20px;pointer-events:none}.film-ribbon>div{will-change:transform}.why-scene{background:var(--teal);color:var(--ivory);display:grid;align-items:center}.why-scene p,.why-scene .eyebrow,.why-scene .underlined-note{color:var(--ivory)}.why-scene .outlined{-webkit-text-stroke-color:var(--ivory)}.why-scene .why-section{padding-block:140px}.why-scene .scribble{color:var(--peach)}.why-scene .underlined-note{border-color:var(--peach)}.tool-preview{background:var(--ivory)}.memory-scene{background:var(--peach)}.prompt-section{background:var(--ink)}.drawing-scene{background:var(--glass)}.closing-scene{display:grid;align-items:center}.site-footer{position:relative;z-index:30;padding-bottom:96px;background:var(--ink)}.site-footer p{color:inherit}.scene .section-heading{margin-bottom:42px}.section-heading>div:last-child>p{max-width:370px}.text-link,.button,.header-cta,.tool-filters button,.demo-button{transition:transform .22s,box-shadow .22s,background-color .22s}.button:active,.header-cta:active{transform:translate(4px,4px);box-shadow:none}.text-link>span{transition:transform .2s}.text-link:hover>span{transform:translate(3px,-3px)}.desktop-nav a:after{transition:width .25s}.desktop-nav a:hover:after{content:'';position:absolute;height:3px;left:0;bottom:0;background:var(--teal);width:100%}.hero-collage{perspective:900px}.hero-print{translate:calc(var(--pointer-x,0)*10px) calc(var(--pointer-y,0)*10px);rotate:calc(var(--pointer-x,0)*2deg)}.vhs-tape{translate:calc(var(--pointer-x,0)*-12px) calc(var(--pointer-y,0)*-10px)}.peach-sticker{translate:calc(var(--pointer-x,0)*18px) calc(var(--pointer-y,0)*-14px)}.headline-star{rotate:calc(var(--scroll-turn,0)*1deg)}.photo-rec i{animation:rec 2s steps(2,end) infinite}@keyframes rec{50%{opacity:.25}}.revealed{animation:paper-arrival .65s both}@keyframes paper-arrival{from{opacity:.5;translate:0 24px}to{opacity:1;translate:0 0}}.prompt-card.dealing{animation:deal .42s ease-out}@keyframes deal{0%{transform:rotate(-3deg) translateY(0)}40%{transform:rotate(5deg) translateY(-18px)}100%{transform:rotate(-3deg) translateY(0)}}
/* A project reel: focus, arrows, swipe, and direct chapter selection all agree. */
.reel-controls{display:flex;justify-content:space-between;align-items:end;border-bottom:2px solid var(--ink);gap:20px}.reel-tabs{display:flex;gap:4px}.reel-tabs button{border:1px solid var(--ink);border-bottom:0;padding:15px 24px;background:transparent;font-size:12px;display:flex;gap:15px;align-items:center;position:relative}.reel-tabs button[aria-selected=true]{background:var(--ink);color:var(--ivory);translate:0 0}.reel-tabs button:hover{background:var(--peach);color:var(--ink)}.reel-tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:-8px;left:50%;width:14px;height:14px;background:var(--ink);rotate:45deg;z-index:4}.transport{display:flex;gap:18px;align-items:center;padding-bottom:10px}.transport button{width:40px;height:40px;border:1px solid var(--ink);border-radius:50%;background:transparent;font-size:20px}.transport button:hover{background:var(--teal);color:var(--ivory)}.transport span{font-size:10px;letter-spacing:2px}.project-reel{display:block;margin-top:0}.project-reel .tool-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);border-top:0;box-shadow:none;min-height:470px;background:transparent;overflow:hidden}.project-reel .tool-card:hover{transform:none;box-shadow:none}.project-reel .tool-visual{min-height:470px;border-bottom:0;border-right:1px solid var(--ink)}.project-reel .tool-card-copy{align-self:center;padding:50px}.project-reel h3{font-family:var(--display);font-size:65px;letter-spacing:0;text-transform:uppercase;line-height:.95}.project-reel .tool-card-copy p{max-width:360px;font-size:15px;line-height:1.8}.project-reel .card-link{margin-top:32px}.project-reel .tool-card.reel-enter .tool-visual>*{animation:reel-in .5s ease-out}@keyframes reel-in{from{translate:55px 0;rotate:8deg;opacity:.4}to{translate:0 0;opacity:1}}.project-reel .mini-book{width:245px}.project-reel .mini-card{width:310px}.project-reel .mini-idea{width:280px}
/* Memory stickers are bounded within this board, including at narrow widths. */
.memory-wall{position:relative;height:510px;border:1px solid #27323870;background:radial-gradient(#27323840 .8px,transparent .8px) 0 0/16px 16px;box-shadow:inset 0 0 0 12px #f7f3e820;overflow:hidden}.memory-sticker{--lift:0px;position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--rotation));translate:0 var(--lift);font:800 clamp(20px,2.5vw,39px)/.94 var(--display);padding:20px 26px;border:3px solid var(--ivory);box-shadow:3px 5px 0 #27323845;cursor:grab;touch-action:none;user-select:none;white-space:nowrap;transition:box-shadow .2s,translate .2s;z-index:2}.memory-sticker:hover,.memory-sticker:focus-visible{--lift:-7px;box-shadow:6px 12px 0 #27323840;z-index:6}.memory-sticker:focus-visible{outline:3px dashed var(--ink);outline-offset:5px}.memory-sticker.dragging{cursor:grabbing;scale:1.05;--lift:0px;box-shadow:10px 18px 0 #27323835;transition:none}.memory-sticker[aria-pressed=true]{outline:2px dashed var(--ink);outline-offset:5px}.sticker-teal{background:var(--teal);color:var(--ivory)}.sticker-ivory{background:var(--ivory);color:var(--ink)}.sticker-ink{background:var(--ink);color:var(--ivory)}.sticker-glass{background:var(--glass);color:var(--ink)}.sticker-peach{background:var(--peach);color:var(--ink)}.memory-sticker.pill{border-radius:80px}.memory-sticker.round{border-radius:50%;width:180px;height:180px;font-size:30px;white-space:normal}.memory-sticker.script{font:italic 38px/1.1 Serif,Georgia,serif;padding:14px 22px}.memory-sticker.ticket{border-style:dashed}.wall-doodle{position:absolute;font-size:150px;left:42%;top:30%;opacity:.18;line-height:1}.wall-caption{position:absolute;bottom:16px;right:20px;text-transform:uppercase;font-size:9px;letter-spacing:2px}.reset-stickers{border:0;border-bottom:1px solid var(--ink);background:none;padding:0 0 4px;margin-top:20px}.wall-under{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:20px}.wall-under p{font-size:11px;color:var(--ink);line-height:1.7}.wall-under #sticker-idea{font-size:14px;font-weight:600;text-align:right;min-height:48px}.drawing-scene .scribble{font-size:26px;display:block;margin-top:24px;color:var(--ink)}
/* The title-card workbench has a separate art layer so exports stay sharp. */
.drawing-studio{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}.drawing-desk{background:var(--ink);padding:12px;box-shadow:8px 8px 0 #27323830;border:1px solid var(--ink)}.slate-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:6px 4px 16px;color:var(--ivory);font-size:9px;letter-spacing:1.5px}.slate-header>span{display:flex;align-items:center;gap:8px}.slate-header .record-dot{background:var(--peach)}.slate-header button{font-size:10px;letter-spacing:0;background:var(--ivory);color:var(--ink);border:0;padding:7px 12px;border-radius:20px;white-space:nowrap}.slate-header button[aria-pressed=false]{background:var(--peach)}.canvas-frame{position:relative;background:var(--ivory);aspect-ratio:16/9;overflow:hidden;transition:aspect-ratio .3s;max-height:660px;margin:auto;max-width:100%}.canvas-frame canvas{display:block;width:100%;height:100%;touch-action:none;cursor:none;outline-offset:-5px}.canvas-frame canvas:focus-visible{outline:3px dashed var(--teal)}.canvas-frame.drawing-paused canvas{touch-action:pan-y;cursor:auto}.canvas-hint{position:absolute;left:50%;top:50%;translate:-50% -50%;font:italic 24px Serif,Georgia,serif;color:#27323870;pointer-events:none;white-space:nowrap}.brush-cursor{position:absolute;border:1px solid var(--ink);background:#f7f3e830;border-radius:50%;pointer-events:none;translate:-50% -50%;display:none;z-index:2}.canvas-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ivory);padding:14px 3px 3px;font-size:10px;min-height:45px}.canvas-bottom>span{max-width:50%}.canvas-bottom>div{display:flex;gap:9px;flex-shrink:0}.canvas-bottom button{background:none;border:0;color:var(--ivory);font-size:11px;padding:5px}.canvas-bottom button:disabled{opacity:.35;cursor:default}.art-controls fieldset{padding:0;margin:0 0 20px;border:0}.art-controls legend{font-size:9px;font-weight:800;letter-spacing:1.8px;margin-bottom:12px}.ink-colors{display:flex;gap:8px;align-items:center}.ink-colors>button,.custom-ink{width:33px;height:42px;border:1px solid var(--ink);background:var(--swatch);position:relative;box-shadow:2px 2px 0 #27323850;transition:translate .2s}.ink-colors>button:before{content:'';position:absolute;inset:4px 8px auto;height:4px;background:currentColor;opacity:.25}.ink-colors>button[aria-pressed=true]{translate:0 -5px;outline:2px solid var(--ink);outline-offset:3px}.ink-colors>button:hover{translate:0 -5px}.custom-ink{display:grid;place-items:center;background:var(--ivory);cursor:pointer}.custom-ink input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.custom-ink:focus-within{outline:3px solid var(--ink);outline-offset:3px}.brushes{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.brushes button{background:transparent;border:1px solid var(--ink);padding:7px 2px;font-size:9px}.brushes button span{display:block;font-size:22px;line-height:1.1;margin-bottom:5px}.brushes button[aria-pressed=true]{background:var(--ink);color:var(--ivory)}.range-label{display:flex;justify-content:space-between;font-size:11px;margin-top:14px}.art-controls input[type=range]{width:100%;accent-color:var(--ink);height:22px;margin:3px 0 0}.field-label{display:block;font-size:11px;margin:12px 0 5px}.art-controls input[type=text],.art-controls select{width:100%;border:1px solid var(--ink);background:#f7f3e8c0;padding:11px 12px;border-radius:0;font-size:12px;color:var(--ink)}.art-controls .button{width:100%;font-size:11px}.art-controls>p{font-size:10px;line-height:1.6;color:var(--ink);margin-top:17px}input:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:3px}dialog#art-preview{padding:28px;background:var(--ivory);color:var(--ink);border:1px solid var(--ink);max-width:min(900px,calc(100vw - 32px));width:100%;max-height:90svh;box-shadow:12px 12px 0 #0003}dialog::backdrop{background:#273238ce;backdrop-filter:blur(8px)}.preview-top,.preview-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}.preview-top h2{font-size:34px}.preview-top button{border:1px solid var(--ink);background:none;width:38px;height:38px;font-size:25px}.preview-top{margin-bottom:22px}.preview-bottom{margin-top:22px}.preview-bottom p{font-size:11px}#export-image{margin:auto;max-height:58svh;object-fit:contain;width:auto;max-width:100%;border:1px solid var(--ink)}
/* Persistent playback navigation is deliberately quiet until it is needed. */
.chapter-player{position:fixed;left:24px;bottom:22px;z-index:90;color:var(--ivory)}.chapter-toggle{display:flex;gap:13px;align-items:center;background:var(--ink);border:1px solid var(--ivory);color:var(--ivory);padding:10px 14px;box-shadow:4px 4px 0 #27323835;text-align:left;min-width:222px}.chapter-toggle small{display:block;font-size:7px;letter-spacing:2px;opacity:.7}.chapter-toggle strong{display:block;font-size:11px;font-weight:600}.chapter-toggle>span:last-child{margin-left:auto}.chapter-reel{display:grid;place-items:center;width:33px;height:33px;font-size:25px;border:1px solid #f7f3e860;border-radius:50%;rotate:calc(var(--page-progress,0)*1080deg);color:var(--peach)}#chapter-menu{position:absolute;bottom:74px;left:0;width:265px;background:var(--ink);padding:10px;border:1px solid var(--ivory);box-shadow:5px 5px 0 #27323830}#chapter-menu a{display:flex;align-items:center;gap:16px;color:var(--ivory);text-decoration:none;font-size:12px;padding:11px 12px}#chapter-menu a span{color:var(--glass);font-size:9px}#chapter-menu a:hover,#chapter-menu a[aria-current]{background:var(--ivory);color:var(--ink)}#chapter-menu a[aria-current] span{color:var(--teal)}.experience-options{position:fixed;right:24px;bottom:22px;display:flex;gap:8px;z-index:90}.experience-options button,.experience-options a{border:1px solid var(--ink);background:var(--ivory);box-shadow:3px 3px 0 #27323830;padding:10px 13px;font-size:10px;text-decoration:none;display:grid;place-items:center}.experience-options a{font-size:22px;width:42px;padding:3px}.motion-off .scene{--shade:0!important}.motion-off .film-ribbon>div{transform:none!important}.motion-off .hero-collage{--pointer-x:0!important;--pointer-y:0!important}.motion-off .headline-star,.motion-off .chapter-reel{rotate:0deg}.motion-off *, .motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}.motion-off{scroll-behavior:auto}.motion-off .scene:after{display:none}
/* Tool objects: open a book, flip a card, deal an idea before committing. */
.tools-opening{padding-bottom:65px;display:flex;flex-direction:column;justify-content:center}.tool-directory.wrap{width:100%;max-width:none}.directory-top{width:min(1280px,calc(100% - 112px));margin:auto;padding-block:38px}.tool-feature{padding:90px max(56px,calc((100% - 1280px)/2));margin:0;gap:7%;border-top:1px solid var(--ink);align-items:center}.tool-feature:nth-of-type(2){background:#d7e7db}.tool-feature:nth-of-type(3){background:var(--peach)}.tool-feature .feature-art{min-height:510px;perspective:1200px;overflow:visible}.tool-feature .feature-copy{padding-block:10px}.feature-art .mini-book,.feature-art .mini-card{transition:transform .65s,opacity .4s;z-index:2}.feature-art .demo-button{position:absolute;bottom:26px;left:50%;translate:-50% 0;z-index:5;border:1px solid var(--ink);background:var(--ivory);padding:10px 17px;font-size:10px;white-space:nowrap;box-shadow:3px 3px 0 var(--ink)}.feature-art .feature-art-tag{top:25px;bottom:auto;font-size:8px}.feature-art .corner-number{z-index:0}.feature-art.demo-open .mini-book{transform:translateX(-65%) rotateY(-65deg) rotate(-4deg);opacity:.18}.book-inside,.card-back{position:absolute;inset:19% 16% 22%;background:var(--ivory);padding:20px;box-shadow:8px 8px 0 #27323820;border:1px solid var(--ink);z-index:1;opacity:0;transform:rotate(5deg) scale(.9);transition:opacity .5s,transform .5s;pointer-events:none}.book-inside>span,.card-back>span{font-size:8px;letter-spacing:1.5px}.book-inside h3,.card-back h3{font:800 40px/.9 var(--display);margin:12px 0}.book-inside img{height:100px;object-fit:cover;width:100%}.book-inside p,.card-back p{font-size:10px;margin-top:10px}.feature-art.demo-open .book-inside{opacity:1;transform:rotate(3deg);z-index:3}.card-back{text-align:center;inset:18% 17% 24%;transform:rotateY(-180deg) rotate(5deg);backface-visibility:hidden}.card-back img{width:80px;margin:auto}.feature-art.demo-open .mini-card{transform:rotateY(180deg) rotate(-5deg);opacity:0}.feature-art.demo-open .card-back{transform:rotateY(0) rotate(5deg);opacity:1;z-index:3}.how-section{background:var(--ivory)}.faq-scene{background:#e9a278;display:grid;align-items:center}.tools-last{display:grid;align-items:center}.faq-list details[open]{background:#f7f3e850;padding-inline:16px}.faq-list details{transition:background .25s,padding .25s}
@media(min-width:1450px){.hero h1{font-size:140px}.hero-collage{height:590px}.memory-wall{height:570px}}
@media(max-width:1000px){.drawing-studio{grid-template-columns:minmax(0,1fr) 225px;gap:20px}.tool-feature{gap:35px;padding-inline:36px}.tool-feature .feature-art{min-height:450px}.project-reel .tool-card-copy{padding:35px}.project-reel h3{font-size:54px}.memory-sticker.round{width:145px;height:145px;font-size:25px}.memory-sticker.script{font-size:30px}.memory-sticker{padding:17px 20px}.why-scene .why-section{padding-block:105px}}
@media(max-width:760px){.drawing-studio{grid-template-columns:1fr}.art-controls{display:grid;grid-template-columns:1fr 1fr;gap:15px 28px}.art-controls fieldset{margin:0}.art-controls fieldset:nth-child(3){grid-column:1;grid-row:2}.art-controls .button{grid-column:2;align-self:start;margin-top:26px}.art-controls>p{grid-column:2;margin-top:-80px;align-self:end}.reel-tabs button{padding:14px 15px;gap:8px}.reel-tabs button span{font-size:10px}.transport{gap:10px}.project-reel .tool-card{grid-template-columns:1fr 1fr;min-height:400px}.project-reel .tool-visual{min-height:400px}.project-reel .tool-card-copy{padding:28px}.project-reel h3{font-size:46px}.project-reel .tool-card-copy p{font-size:12px}.project-reel .mini-book{width:190px}.project-reel .mini-card{width:240px}.project-reel .mini-idea{width:210px}.memory-wall{height:470px}.memory-sticker{font-size:27px;padding:14px 17px}.memory-sticker.script{font-size:27px}.memory-sticker.round{width:125px;height:125px;font-size:23px}.wall-under{grid-template-columns:1fr;gap:8px}.wall-under #sticker-idea{text-align:left}.tools-opening{padding-bottom:35px}}
@media(max-width:650px){:root{--header-height:66px}.site-header.wrap{padding-inline:20px}.site-header .wordmark{font-size:27px}.mobile-nav{top:65px;left:0;right:0;width:100%;box-shadow:0 8px 0 #27323830}.hero{padding-block:44px 70px;min-height:0}.scene{min-height:calc(100svh - 66px)}.section-space{padding-block:74px}.scene .section-heading{margin-bottom:30px}.why-scene .why-section{padding-block:80px}.film-ribbon{margin-block:-12px}.why-scene .why-copy h2{font-size:50px}.project-reel .tool-card{grid-template-columns:1fr}.project-reel .tool-visual{min-height:330px;border-right:0;border-bottom:1px solid var(--ink)}.project-reel .tool-card-copy{padding:30px}.project-reel h3{font-size:47px}.project-reel .tool-card-copy p{font-size:14px}.project-reel .mini-book{width:200px}.project-reel .mini-card{width:240px}.project-reel .mini-idea{width:215px}.reel-controls{flex-wrap:wrap;gap:10px}.reel-tabs{width:100%;gap:4px}.reel-tabs button{flex:1;padding:12px 9px;gap:6px;font-size:10px}.transport{width:100%;justify-content:space-between;padding:5px 0 10px}.transport button{width:35px;height:35px}.memory-wall{height:490px}.memory-sticker{font-size:22px;padding:11px 14px;border-width:2px;max-width:63%}.memory-sticker.script{font-size:25px;white-space:normal}.memory-sticker.round{width:103px;height:103px;font-size:21px}.wall-caption{font-size:7px;right:10px;bottom:9px}.wall-doodle{left:35%;font-size:110px}.wall-under p{font-size:10px}.wall-under #sticker-idea{font-size:13px;min-height:66px}.art-controls{grid-template-columns:1fr 1fr;gap:24px 18px}.art-controls fieldset:nth-child(1){grid-column:1/-1}.art-controls fieldset:nth-child(2){grid-column:1/-1}.art-controls fieldset:nth-child(3){grid-column:1/-1;grid-row:auto}.art-controls .button{grid-column:1/-1;margin:0}.art-controls>p{grid-column:1/-1;margin:0}.ink-colors{gap:14px}.ink-colors>button,.custom-ink{width:38px;height:44px}.brushes button{padding:10px;font-size:11px}.brushes button span{font-size:25px}.art-controls fieldset:nth-child(2){display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.art-controls fieldset:nth-child(2) legend,.brushes{grid-column:1/-1}.range-label{grid-row:2}.art-controls input[type=range]{grid-row:3}.range-label[for=ink-flow]{grid-column:2}.drawing-desk{padding:8px;box-shadow:5px 5px 0 #27323830}.slate-header{font-size:7px;letter-spacing:1px;gap:5px;padding-bottom:11px}.slate-header button{font-size:9px;padding:7px 10px}.canvas-hint{font-size:19px}.canvas-bottom{flex-wrap:wrap;gap:8px;font-size:9px;padding-top:10px}.canvas-bottom>span{max-width:100%;flex:1}.canvas-bottom>div{gap:4px}.canvas-bottom button{font-size:10px}.chapter-player{left:12px;bottom:12px}.chapter-toggle{padding:8px 11px;min-width:185px;gap:9px}.chapter-toggle strong{font-size:10px}.chapter-reel{width:27px;height:27px;font-size:20px}.chapter-toggle small{font-size:6px}.experience-options{right:12px;bottom:12px;gap:5px}.experience-options button{font-size:8px;padding:8px}.experience-options a{width:32px;font-size:19px}.chapter-player #chapter-menu{bottom:63px;max-height:60svh;overflow:auto}.directory-top{width:calc(100% - 40px);padding-block:26px}.tool-feature{padding:65px 20px;gap:35px}.tool-feature .feature-art{min-height:390px}.tool-feature .feature-copy{padding:0}.tool-feature .feature-art-tag{font-size:7px;max-width:80%;text-align:center}.book-inside{inset:17% 14% 22%;padding:16px}.book-inside img{height:95px}.card-back{inset:15% 17% 23%}.book-inside h3,.card-back h3{font-size:37px}.preview-top h2{font-size:27px}dialog#art-preview{padding:20px}.preview-bottom{flex-wrap:wrap}.scene:after{transition:none}.site-footer{padding-bottom:100px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene{position:relative!important}.scene:after{display:none}.hero-print,.vhs-tape,.peach-sticker{translate:none}.chapter-reel,.headline-star{rotate:none}}
@media(min-width:651px){.hero h1{font-size:clamp(66px,8.3vw,112px)}}
.film-ribbon{z-index:20}

/* Reserve a calm transport rail; panels finish above it instead of under controls. */
html{overflow-x:clip}
body:after{content:'';position:fixed;inset:auto 0 0;height:84px;background:var(--ivory);border-top:1px solid var(--ink);z-index:80;pointer-events:none}
.scene{min-height:calc(100svh - var(--header-height) - 84px)}
.site-footer{color:var(--ivory)}
.site-footer .footer-bottom{color:#f7f3e8b3;border-color:#f7f3e840}
.site-footer .brand-dot{color:var(--glass)}
@media(max-width:650px){body:after{height:72px}.chapter-player,.experience-options{bottom:12px}}

.directory-top{position:relative;z-index:2;background:var(--ivory);width:100%;padding:38px max(56px,calc((100% - 1280px)/2));border-top:1px solid var(--ink)}
@media(max-width:650px){.directory-top{padding:26px 20px}}

html{scroll-padding-bottom:100px}

/* Preserve palette backgrounds while choosing readable foreground pairings. */
.button,.why-scene,.why-scene p,.why-scene .eyebrow,.why-scene .underlined-note{color:#fffdf5}
.memory-scene .section-heading p,.drawing-scene .section-heading p,.tool-feature .feature-copy p,.tool-feature .tool-format{color:var(--ink)}

@keyframes paper-arrival{from{opacity:1;translate:0 16px}to{opacity:1;translate:0 0}}
@media(max-width:650px){.tools-opening{justify-content:flex-start;min-height:0}.tools-hero{margin-block:0}}

/* Receding backdrops dim, while the text and controls keep their contrast. */
.scene:after{z-index:0}
.scene>div,.scene>section{z-index:1}
body:after{pointer-events:auto}