/* encreanimation.com Ink on paper. One drop of red. Paper by default for everyone; ink only when the visitor flips the header switch. Drawing surfaces (boards, stages) are always paper, like sheets on a desk. */ /* ---------------------------------------------------------------- fonts */ @font-face{font-family:"Adventor";src:url(../fonts/adventor-bold.woff) format("woff");font-weight:700;font-display:swap} @font-face{font-family:"Adventor";src:url(../fonts/adventor-regular.woff) format("woff");font-weight:400;font-display:swap} @font-face{font-family:"Charter";src:url(../fonts/charter-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Charter";src:url(../fonts/charter-italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Charter";src:url(../fonts/charter-bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Cursor";src:url(../fonts/cursor-regular.woff) format("woff");font-weight:400;font-display:swap} @font-face{font-family:"Cursor";src:url(../fonts/cursor-bold.woff) format("woff");font-weight:700;font-display:swap} /* ---------------------------------------------------------------- tokens */ :root{ color-scheme:light; /* brand constants */ --ink-900:#0E0B0A; --ink-800:#17120F; --ink-700:#241D19; --ink-600:#352B25; --cream:#FFF3E9; --paper:#FAF6F1; --paper-2:#F0E9E1; --paper-3:#E3D9CD; --crimson:#C8233C; --crimson-deep:#A31B31; --crimson-bright:#E8546A; --muted-on-ink:#9A8E86; --muted-on-paper:#6B625C; /* page (light = paper) */ --bg:var(--paper); --bg-2:var(--paper-2); --fg:var(--ink-900); --fg-2:#3A322D; --muted:var(--muted-on-paper); --line:#DDD2C5; --accent:var(--crimson); --accent-text:var(--crimson-deep); --focus:var(--crimson); --btn-ghost-line:#CFC3B5; /* drawing surfaces: always paper */ --sheet:#FFFDFA; --sheet-line:#E4DACD; --sheet-ink:#17120F; --sheet-muted:#8C827A; --sheet-shadow:0 1px 0 rgba(23,18,15,.04), 0 14px 34px -12px rgba(23,18,15,.18); /* type */ --display:"Adventor","Avenir Next","Century Gothic","Futura",sans-serif; --body:"Charter","Bitstream Charter","Iowan Old Style","Georgia",serif; --mono:"Cursor","Courier Prime","Courier New",ui-monospace,monospace; --gutter:clamp(18px,4vw,40px); --maxw:1180px; } /* Paper by default, whatever the system setting. The ink palette applies only when the visitor picks it with the header switch (data-theme="dark" on , set by theme.js). */ :root[data-theme="dark"]{ color-scheme:dark; --bg:var(--ink-900); --bg-2:var(--ink-800); --fg:var(--cream); --fg-2:#E6D9CD; --muted:var(--muted-on-ink); --line:var(--ink-600); --accent-text:var(--crimson-bright); --focus:var(--crimson-bright); --btn-ghost-line:#4A3E36; --sheet-shadow:0 1px 0 rgba(0,0,0,.4), 0 22px 50px -14px rgba(0,0,0,.75); } /* ---------------------------------------------------------------- base */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--bg);color:var(--fg); font-family:var(--body);font-size:18px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg,canvas{display:block;max-width:100%} [hidden]{display:none!important} a{color:inherit} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px} ::selection{background:var(--crimson);color:var(--cream)} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--fg);color:var(--bg); padding:10px 14px;border-radius:4px;font-family:var(--mono);font-weight:700;font-size:14px;text-decoration:none} .skip:focus{top:12px} /* utility type */ .label{ font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.09em; text-transform:uppercase;color:var(--muted); } .eyebrow{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.14em; text-transform:uppercase;color:var(--accent-text);margin:0 0 18px} /* ---------------------------------------------------------------- masthead */ .mast{ position:sticky;top:env(safe-area-inset-top,0px);z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid transparent;transition:border-color .2s ease; } .mast.scrolled{border-bottom-color:var(--line)} .mast .wrap{display:flex;align-items:center;gap:22px;height:68px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg)} .brand .mark{width:29px;height:24px;flex:none} /* viewBox cropped to the ε itself: the gap is real */ .wordmark{height:22px;width:auto} .wm-ink{fill:var(--fg)} .wm-dot{fill:var(--accent)} .mark .m-ink{fill:var(--fg)} .mark .m-dot{fill:var(--accent)} .nav{display:flex;gap:26px;margin-left:auto;align-items:center} .nav a{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);text-decoration:none;transition:color .15s ease} .nav a:hover{color:var(--fg)} .nav .nav-cta{color:var(--fg);border:1px solid var(--btn-ghost-line);padding:8px 14px;border-radius:999px} .nav .nav-cta:hover{border-color:var(--fg)} .nav a{white-space:nowrap} @media (max-width:1400px){ .nav{gap:18px} .nav a{font-size:12px;letter-spacing:.08em} } @media (max-width:1180px){ .nav a:not(.nav-cta):not(.nav-keep){display:none} } @media (max-width:760px){ .nav a:not(.nav-cta){display:none} } /* second header row (Studio): the page's own sections, under the logo row */ .brand{flex:none} .subnav{border-top:1px solid var(--line)} .mast .subnav .wrap{height:44px;gap:26px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .mast .subnav .wrap::-webkit-scrollbar{display:none} .subnav a{position:relative;flex:none;font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--muted);text-decoration:none;padding:6px 0;transition:color .15s ease} .subnav a:hover,.subnav a[aria-current="true"]{color:var(--fg)} .subnav a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)} @media (max-width:760px){ .subnav{display:none} } @media (min-width:761px){ .mast.has-subnav .nav-menu{display:none} } :root:has(.mast.has-subnav){scroll-padding-top:52px} /* sections menu: only where the header has hidden its links */ .nav-menu{display:none;align-items:center;gap:8px;font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase; color:var(--fg);background:none;border:1px solid var(--btn-ghost-line);border-radius:999px;padding:8px 12px;cursor:pointer} .nav-menu svg{width:14px;height:14px;flex:none} .nav-menu:hover,.nav-menu[aria-expanded="true"]{border-color:var(--fg)} @media (max-width:1180px){ .nav-menu{display:inline-flex} } @media (max-width:560px){ /* phones: icon-only menu, compact CTA, slightly smaller logo */ .nav-menu span{display:none} .nav-menu{padding:8px 9px} .mast .wrap{gap:12px} .nav{gap:8px} .nav .nav-cta{padding:7px 11px;font-size:11px;letter-spacing:.06em} .mast .brand{gap:10px} .mast .brand .mark{width:25px;height:21px} .mast .wordmark{height:19px} } @media (max-width:360px){ /* the smallest phones */ .mast .wrap{gap:8px} .mast .brand{gap:8px} .mast .brand .mark{width:21px;height:18px} .mast .wordmark{height:16px} .nav .nav-cta{padding:6px 9px;font-size:10.5px;letter-spacing:.04em} } .nav-sheet{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line); box-shadow:0 18px 30px -18px rgba(14,11,10,.35);max-height:calc(100vh - 68px);overflow-y:auto} .mast .nav-sheet-list{display:grid;height:auto;align-items:stretch;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 18px;padding-top:10px;padding-bottom:16px} .nav-sheet a{font:700 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);text-decoration:none; padding:13px 0;border-bottom:1px solid var(--line)} .nav-sheet a:hover{color:var(--accent-text)} @media (max-width:760px){ .mast .nav-sheet-list{grid-template-columns:repeat(2,minmax(0,1fr))} } .mast.menu-open{border-bottom-color:var(--line)} /* light / dark switch */ .theme-toggle{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;padding:0;cursor:pointer; background:none;color:var(--fg);border:1px solid var(--btn-ghost-line);transition:border-color .15s ease,color .15s ease} .theme-toggle svg{width:15px;height:15px} .theme-toggle:hover{border-color:var(--fg)} .theme-toggle:focus-visible,.theme-row:focus-visible{outline:2px solid var(--focus);outline-offset:2px} @media (max-width:560px){ .theme-toggle{display:none} } /* phones: it lives in the sections sheet */ .theme-row{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:6px;padding:13px 0;background:none;border:0; border-bottom:1px solid var(--line);font:700 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);cursor:pointer;text-align:left} .theme-row svg{width:15px;height:15px} .theme-row:hover{color:var(--accent-text)} /* back to top */ .to-top{position:fixed;z-index:9;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px)); width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer; background:var(--fg);color:var(--bg);box-shadow:0 10px 24px -10px rgba(14,11,10,.55); opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s} .to-top svg{width:18px;height:18px} .to-top.show{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s} .to-top:hover{background:var(--accent);color:#fff} .to-top:focus-visible{outline:2px solid var(--focus);outline-offset:3px} @media (prefers-reduced-motion:reduce){ .to-top,.to-top.show{transition:none;transform:none} } @media print{ .to-top,.nav-menu,.nav-sheet{display:none!important} } /* ---------------------------------------------------------------- buttons */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.005em; padding:14px 22px;border-radius:5px;border:1px solid transparent; cursor:pointer;text-decoration:none;line-height:1; transition:background .16s ease,border-color .16s ease,color .16s ease,transform .1s ease; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--crimson);color:#FFF3E9} .btn-primary:hover{background:var(--crimson-deep)} .btn-ghost{background:transparent;color:var(--fg);border-color:var(--btn-ghost-line)} .btn-ghost:hover{border-color:var(--fg)} .btn[disabled]{opacity:.6;cursor:default} .btn .tri{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent} /* ---------------------------------------------------------------- hero */ .hero{padding-block:clamp(56px,9vw,112px) 28px} .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0} h1.display{ font-family:var(--display);font-weight:700; font-size:clamp(58px,11.2vw,132px);line-height:.9;letter-spacing:-.04em; margin:0;text-wrap:balance; } .display .stop{color:var(--accent)} .lede{font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--fg-2);max-width:34em;margin:28px 0 0;text-wrap:pretty} .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px} /* board strip */ .board{margin-top:clamp(52px,7vw,84px)} .slate{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:14px} .slate .label b{color:var(--fg);font-weight:700} .panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,20px)} @media (max-width:760px){.panels{grid-template-columns:1fr}} .panel{margin:0;background:var(--sheet);border:1px solid var(--sheet-line);border-radius:3px; box-shadow:var(--sheet-shadow);overflow:hidden;transition:border-color .18s ease, transform .18s ease} .panel.live{border-color:var(--crimson);transform:translateY(-2px)} .panel svg{width:100%;height:auto;aspect-ratio:16/9} .panel figcaption{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-top:1px solid var(--sheet-line); font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--sheet-muted)} .panel.live figcaption .n{color:var(--crimson)} .ink path,.ink circle,.ink line,.ink ellipse{fill:none;stroke:var(--sheet-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .ink .red{stroke:var(--crimson)} .ink [data-draw]{stroke-dasharray:1;stroke-dashoffset:0} .drawing .ink [data-draw]{stroke-dashoffset:1;animation:draw var(--dur,.55s) cubic-bezier(.65,0,.35,1) var(--delay,0s) forwards} @keyframes draw{to{stroke-dashoffset:0}} /* exposure sheet */ .xsheet{margin-top:18px;border:1px solid var(--line);border-radius:3px;background:var(--bg-2)} .xs-head{display:flex;flex-wrap:wrap;gap:6px 22px;padding:11px 14px;border-bottom:1px solid var(--line)} .track{position:relative;padding:14px;overflow-x:auto;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none} .track:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} @media (max-width:620px){.frames,.ticks{min-width:0}.ticks span:not(.dim){font-size:9px}} .xs-now{margin-left:auto} .xs-now b{color:var(--accent-text)} .frames,.ticks{display:flex;gap:2px;min-width:560px} .cell{flex:1;height:38px;border-radius:2px;background:var(--line)} .cell.key{background:var(--muted)} .cell.cut{background:var(--crimson)} .ticks{margin-top:7px;font-family:var(--mono);font-weight:700;font-size:10.5px;color:var(--muted)} .ticks span{flex:1;text-align:center;font-variant-numeric:tabular-nums} .ticks span.dim{visibility:hidden} .playhead{position:absolute;top:9px;height:49px;width:3px;left:14px;background:var(--crimson);border-radius:2px;opacity:0;pointer-events:none; box-shadow:0 0 12px rgba(200,35,60,.55)} .playhead::after{content:"";position:absolute;top:-6px;left:-4.5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--crimson)} .playing .playhead{opacity:1} .legend{display:flex;flex-wrap:wrap;gap:8px 22px;padding:0 14px 13px} .legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:8px;vertical-align:-1px} .legend .sw-key{background:var(--muted)} .legend .sw-hold{background:var(--line)} .legend .sw-cut{background:var(--crimson)} /* ---------------------------------------------------------------- sections */ .section{padding-block:clamp(84px,11vw,150px);border-top:1px solid var(--line)} .section-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start} @media (max-width:900px){.section-grid{grid-template-columns:minmax(0,1fr)}} .section-head{position:sticky;top:150px} /* under both header rows (68 + 45) */ @media (max-width:900px){.section-head{position:static}} h2.verb{font-family:var(--display);font-weight:700;font-size:clamp(52px,8vw,104px);line-height:.9;letter-spacing:-.045em;margin:0;padding-top:.08em} .section .eyebrow{margin-bottom:22px} h2.verb .stop{color:var(--accent)} .section p{max-width:32em;text-wrap:pretty} .section-head p{color:var(--fg-2);margin:24px 0 0} .note{font-size:15px;line-height:1.55;color:var(--muted);margin-top:18px} .note em{font-style:italic} /* stage (shared by looks, motion, recipe) */ .stage{background:var(--sheet);border:1px solid var(--sheet-line);border-radius:3px;box-shadow:var(--sheet-shadow);overflow:hidden;position:relative} .stage svg,.stage canvas{width:100%;height:auto} .stage-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 14px;border-top:1px solid var(--sheet-line); font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.04em;color:var(--sheet-muted);background:var(--sheet)} .stage-bar b{color:var(--sheet-ink);font-weight:700} .stage-bar .tabnum{font-variant-numeric:tabular-nums} .stage-bar .grow{flex:1} /* chips */ .chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px} .chips-label{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-width:64px} .world-controls .chips.clouds{margin-top:0} .chips-label-gap{margin-left:18px} .chip{ font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.04em; padding:9px 13px;border-radius:999px;border:1px solid var(--btn-ghost-line); background:transparent;color:var(--fg);cursor:pointer; transition:background .14s ease,border-color .14s ease,color .14s ease; } .chip:hover{border-color:var(--fg)} .chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)} .chip .fam{opacity:.6;font-weight:400;margin-left:6px} .readout{margin-top:16px;font-family:var(--mono);font-size:13.5px;line-height:1.75;color:var(--muted); border-left:2px solid var(--line);padding-left:14px;min-height:3.5em} .readout b{color:var(--fg);font-weight:700} .readout .k{color:var(--accent-text);font-weight:700} /* looks stage extras */ #look-stage{aspect-ratio:16/10} #look-stage svg,#look-stage canvas{position:absolute;inset:0;width:100%;height:100%} #look-stage canvas{image-rendering:pixelated;image-rendering:crisp-edges} .look-art path,.look-art circle,.look-art line{fill:none;stroke:var(--art-ink,#17120F);stroke-width:var(--art-w,2.4);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .look-art .red{stroke:var(--art-red,#C8233C)} .hatch-fill{display:none} .look-hatch .hatch-fill{display:inline} .rules{display:none} .look-ballpoint .rules{display:inline} .look-ballpoint{--art-ink:#1F3690;--art-red:#1F3690;--art-w:1.5} .look-ballpoint .look-ghost{display:inline} .look-ghost{display:none;opacity:.32} .look-boil{--art-w:3.1} /* motion */ .motion-scrub{display:flex;align-items:center;gap:12px;flex:1;min-width:200px} .motion-scrub input{flex:1} .iconbtn{appearance:none;border:1px solid var(--sheet-line);background:var(--sheet);color:var(--sheet-ink);border-radius:4px; width:34px;height:30px;display:inline-grid;place-items:center;cursor:pointer} .iconbtn:hover{border-color:var(--sheet-ink)} .iconbtn svg{width:12px;height:12px} input[type=range]{accent-color:var(--crimson);height:24px;touch-action:pan-y} /* vertical swipes scroll; sideways ones move the slider */ @media (pointer:coarse){ input[type=range]{height:44px} } /* a finger-sized target on phones and tablets */ .families{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 20px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)} @media (max-width:560px){.families{grid-template-columns:repeat(2,minmax(0,1fr))}} .family h3{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} .family ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--fg-2)} .family li.on{color:var(--accent-text);font-weight:700} .count{margin:14px 0 0;font-family:var(--display);font-weight:700;font-size:15px;color:var(--fg);letter-spacing:0;text-transform:none} #move-svg .ink path,#move-svg .ink circle{stroke-width:4.5} .recipe-intro{margin-bottom:clamp(28px,4vw,48px);grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:end} @media (max-width:900px){.recipe-intro{grid-template-columns:minmax(0,1fr)}} .recipe-intro h2.verb{white-space:nowrap} @media (max-width:420px){.recipe-intro h2.verb{white-space:normal}} .flush{margin:0} #ball-readout{gap:4px 16px;font-size:12px} /* world */ .world-intro{margin-bottom:clamp(28px,4vw,44px);grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:end} @media (max-width:900px){.world-intro{grid-template-columns:minmax(0,1fr)}} .world-stage{background:#0E0B0A;border-color:var(--ink-600)} .world-stage canvas{width:100%;height:auto;aspect-ratio:16/9} .world-clock{position:absolute;top:14px;left:16px;font-family:var(--mono);font-weight:700;font-size:clamp(15px,2vw,22px); letter-spacing:.06em;color:#FFF3E9;background:rgba(14,11,10,.42);padding:4px 10px;border-radius:4px;font-variant-numeric:tabular-nums;pointer-events:none} .world-readout{display:block;font-size:12px;line-height:1.7} .world-readout .sep{display:inline-block;width:14px} .world-controls{margin-top:18px} .presets{margin-top:0} .sliders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 28px;margin-top:22px} .sliders.cloud-sliders{margin-top:10px} .sliders.look-sliders{margin-top:10px} .world-controls .chips.mood{margin-top:16px} @media (max-width:900px){.sliders{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.sliders{grid-template-columns:minmax(0,1fr)}} .slider{display:grid;grid-template-columns:118px minmax(0,1fr) 48px;align-items:center;gap:10px; font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--muted)} .slider input{width:100%} .slider output{color:var(--fg);text-align:right;font-variant-numeric:tabular-nums} /* recipe */ .recipe-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px;margin-top:6px;align-items:start} @media (max-width:1040px){.recipe-grid{grid-template-columns:minmax(0,1fr)}} .code{margin:0;background:var(--ink-800);color:#E9DDD2;border-radius:3px;border:1px solid var(--ink-600); font-family:var(--mono);font-size:12.5px;line-height:1.62;overflow-x:auto;padding:16px 0} .code .ln{display:block;padding:0 18px;white-space:pre;border-left:3px solid transparent;transition:background .12s ease,border-color .12s ease} .code .ln.hot{background:rgba(200,35,60,.2);border-left-color:var(--crimson)} .code .c{color:#8E8279} .code .s{color:#F0B98B} .code .n{color:#F4C7CF} .code .kw{color:#FF8FA3} .code .f{color:#FFF3E9} .code-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px} .seg{display:inline-flex;border:1px solid var(--sheet-line);border-radius:4px;overflow:hidden} .seg button{appearance:none;border:0;background:var(--sheet);color:var(--sheet-muted);font:inherit;font-weight:700;padding:5px 10px;cursor:pointer} .seg button[aria-pressed="true"]{background:var(--sheet-ink);color:var(--sheet)} /* ---------------------------------------------------------------- beta */ .beta{padding-block:clamp(90px,12vw,160px);border-top:1px solid var(--line)} .beta-inner{max-width:760px} .beta h2{font-family:var(--display);font-weight:700;font-size:clamp(44px,7vw,88px);line-height:.92;letter-spacing:-.04em;margin:0;text-wrap:balance} .beta h2 .stop{color:var(--accent)} .beta p{color:var(--fg-2);max-width:30em;margin:22px 0 0} .join{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;max-width:560px} .join input[type=email]{ flex:1 1 260px;min-width:0;font-family:var(--body);font-size:18px;color:var(--fg); background:var(--bg-2);border:1px solid var(--btn-ghost-line);border-radius:5px;padding:13px 15px; } .join input[type=email]::placeholder{color:var(--muted)} .join input[type=email]:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent} .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .join-msg{font-family:var(--mono);font-weight:700;font-size:14px;margin-top:14px;min-height:1.5em;color:var(--muted)} .join-msg.ok{color:var(--fg)} .join-msg.err{color:var(--accent-text)} .beta .eyebrow{margin:0 0 20px} .beta .join-msg{margin:12px 0 0;min-height:1.4em} .beta .join-msg:empty{margin:0;min-height:0} .beta .fine{margin-top:14px;color:var(--muted)} .fine{font-size:14px;color:var(--muted);margin-top:4px} /* ---------------------------------------------------------------- footer */ .foot{border-top:1px solid var(--line);padding-block:44px 56px} .foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px} .foot .brand .wordmark{height:18px} .foot .brand .mark{width:24px;height:20px} .foot .brand{gap:10px} .foot .tag{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--muted)} .foot .links{display:flex;gap:22px;margin-left:auto} .foot .links a{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--muted);text-decoration:none} .foot .links a:hover{color:var(--fg)} .foot small{flex-basis:100%;font-family:var(--mono);font-size:12.5px;color:var(--muted)} /* ---------------------------------------------------------------- 404 */ .lost{min-height:70vh;display:grid;align-content:center;padding-block:80px} @media (prefers-reduced-motion:reduce){ .drawing .ink [data-draw]{animation:none;stroke-dashoffset:0} .btn,.chip,.panel,.code .ln{transition:none} } /* World controls, grouped */ .ctl-group{border-top:1px solid var(--line);padding:14px 0 6px;margin-top:14px} /* settings tabs (built by site.js on World and Animate) */ .ctl-tabs{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:0 0 4px} .ctl-tabs::-webkit-scrollbar{display:none} .ctl-tab{flex:none;position:relative;background:none;border:0;padding:14px 0 13px;cursor:pointer; font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .15s ease} .ctl-tab:hover,.ctl-tab[aria-selected="true"]{color:var(--fg)} .ctl-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)} .ctl-tab:focus-visible{outline:2px solid var(--focus);outline-offset:3px} .has-tabs > .ctl-group{border-top:0;margin-top:0;padding-top:4px} .has-tabs .ctl-title{display:none} .ctl-group:first-child{border-top:0;margin-top:6px} .ctl-title{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin:0 0 2px} .ctl-group .chips{margin-top:10px} .ctl-group .chips-label{min-width:0;margin-right:4px} .ctl-group .chips .chips-label:first-child{display:none} .ctl-group .chips .chips-label-gap{display:inline;margin-left:16px} .ctl-group .chips.mood .chips-label:first-child,.ctl-group .chips.layers .chips-label:first-child{display:inline} /* Brushes */ .brush-intro{margin-bottom:28px} .brush-feature{display:grid;grid-template-columns:5fr 7fr;gap:22px;align-items:stretch} .brush-feature figure{margin:0;display:flex;flex-direction:column;background:#fff;overflow:hidden} .brush-hand img{width:100%;height:auto;flex:1;object-fit:contain;background:#fff} .brush-feature figcaption{font-size:14px;line-height:1.45;color:var(--sheet-muted);padding:12px 16px 14px;background:var(--sheet);border-top:1px solid var(--sheet-line)} .brush-feature figcaption b{color:var(--sheet-ink)} .brush-build{background:#FAF6F1} .build-view{flex:1;display:flex;align-items:center;justify-content:center;background:#FAF6F1;min-height:240px;padding:12px} .build-view img{width:100%;height:auto} .brush-filter{margin-top:34px} .chip .n{font-weight:400;opacity:.6;margin-left:2px} .brush-grid{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .brush-card{background:#FAF6F1;border:1px solid #E4DACD;border-radius:6px;overflow:hidden} .brush-card[hidden]{display:none} .brush-strip{padding:6px 10px 0} .brush-strip img{display:block;width:100%;height:auto;aspect-ratio:5/1} .brush-meta{margin:0;padding:8px 14px 12px;display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:12px;color:#6B625C} .brush-meta b{font-family:var(--display);font-size:15px;color:#17120F;letter-spacing:0} .brush-libs{margin-top:18px} @media (max-width:1000px){.brush-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:900px){.brush-feature{grid-template-columns:1fr}} @media (max-width:620px){.brush-grid{grid-template-columns:1fr}} /* Animate */ .animate-intro{margin-bottom:26px} .anim-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:22px;align-items:start} .anim-stage canvas#anim-canvas{display:block;width:100%;height:auto;aspect-ratio:960/440;background:#FAF6F1} .anim-sheet{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;padding:8px 10px;background:var(--sheet);border-top:1px solid var(--sheet-line)} .xcell{font-family:var(--mono);font-size:11px;text-align:center;padding:5px 0;border-radius:2px;color:#b3a89c;background:#f3ede4} .xcell.start{color:#17120F;font-weight:700;background:#e9e0d3} .xcell.start.key{background:#C8233C;color:#fff} .xcell.start.breakdown{background:#e7a33a;color:#17120F} .xcell.start.extreme{background:#3a3430;color:#fff} .xcell.now{outline:2px solid #17120F;outline-offset:-2px} .anim-side .ctl-group:first-child{margin-top:0;padding-top:0} .anim-arc{display:block;width:100%;height:auto;aspect-ratio:360/230;margin-top:10px;border:1px solid #E4DACD;border-radius:6px;background:#FAF6F1} .anim-passes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px} .anim-hand video{display:block;width:100%;height:auto;aspect-ratio:240/220;object-fit:contain;background:#fff} .anim-passes figure{margin:0;border:1px solid #E4DACD;border-radius:6px;overflow:hidden;background:#FAF6F1} .anim-passes canvas{display:block;width:100%;height:auto;aspect-ratio:240/220} .anim-passes figcaption{font-size:13.5px;line-height:1.45;color:#6B625C;padding:10px 14px 12px;border-top:1px solid #E4DACD} .anim-passes figcaption b{color:#17120F} @media (max-width:980px){.anim-grid{grid-template-columns:1fr}} @media (max-width:980px){.anim-passes{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){.anim-passes{grid-template-columns:1fr}.xcell{font-size:9px}} .anim-side .chips .chips-label:first-child{display:inline;min-width:84px} /* City */ .city-intro{margin-bottom:26px} .city-stage canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#070a1c} .city-controls{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;margin-top:22px;align-items:start} .city-sources{margin:0;border-radius:6px;overflow:hidden;border:1px solid var(--line)} .city-sources canvas{display:block;width:100%;height:auto;aspect-ratio:640/170} .city-sources figcaption{font-size:13.5px;color:var(--muted);padding:10px 14px;background:var(--sheet)} .city-sources figcaption b{color:var(--fg)} .city-sliders{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0} .city-controls .chips .chips-label:first-child{display:inline} @media (max-width:900px){.city-controls{grid-template-columns:1fr}} /* The work */ .work-intro{margin-bottom:26px} .work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .work-item{position:relative;display:block;border-radius:6px;overflow:hidden;background:#0E0B0A;text-decoration:none;color:inherit} .work-item img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease} .work-item:hover img,.work-item:focus-visible img{transform:scale(1.03)} .work-lead{grid-column:span 2;grid-row:span 2} .work-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;background:linear-gradient(transparent,rgba(14,11,10,.78));color:#FFF3E9;display:flex;flex-direction:column;gap:2px} .work-cap b{font-family:var(--display);font-size:16px} .work-cap span{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;opacity:.8} @media (max-width:760px){.work-grid{grid-template-columns:1fr}.work-lead{grid-column:auto;grid-row:auto}} @media (max-width:620px){.city-sliders{grid-template-columns:1fr}} /* Studio page */ .studio-hero{padding:120px 0 40px} .studio-hero .lede{max-width:40ch} .studio-index{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .studio-index a{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--fg);background:var(--sheet)} .studio-index a:hover,.studio-index a:focus-visible{border-color:var(--accent)} .studio-index b{font-family:var(--display);font-size:18px} .studio-index span{font-family:var(--mono);font-size:11.5px;color:var(--muted)} .studio-intro{margin-bottom:24px} .studio-sec canvas{display:block;width:100%;height:auto;background:#FAF6F1;touch-action:none} #time-stage{aspect-ratio:960/200} #time-graph{aspect-ratio:960/300;border-top:1px solid var(--sheet-line)} #path-canvas{aspect-ratio:960/420} #vector-canvas{aspect-ratio:960/380} #panels-canvas{aspect-ratio:960/620} #guides-canvas{aspect-ratio:960/480;cursor:crosshair} #pose-canvas{aspect-ratio:960/560;cursor:grab} #pixel-canvas{aspect-ratio:960/540;cursor:ew-resize} .studio-ctl{margin-top:14px} .studio-ctl .chips{margin-top:10px} .studio-ctl .chips .chips-label{min-width:92px} .studio-hint{font-size:14px;color:var(--muted);margin:12px 0 0} .bubble-text{display:flex;align-items:center;gap:12px;margin-top:12px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .bubble-text input{flex:1;max-width:520px;font:16px var(--body,inherit);letter-spacing:0;text-transform:none;padding:8px 12px;border:1px solid var(--line);border-radius:4px;background:var(--sheet);color:var(--fg)} .soon{display:inline-block;vertical-align:middle;margin-left:10px;padding:4px 10px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .rig-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:22px;align-items:start} #rig-canvas{aspect-ratio:640/520} .rig-pad{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:1;border:1px solid var(--line);border-radius:6px;margin-top:10px;touch-action:none;cursor:pointer} .rig-readout{font-family:var(--mono);font-size:13px;color:var(--muted);margin:10px 0 0} .rig-list{margin:18px 0 0;padding-left:18px;font-size:15px;line-height:1.6;color:var(--fg-2)} .studio-end{text-align:left} @media (max-width:900px){.studio-index{grid-template-columns:repeat(2,minmax(0,1fr))}.rig-grid{grid-template-columns:1fr}} .hl{color:var(--accent)} #lib-canvas{aspect-ratio:960/540;cursor:move} .lib-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:18px;align-items:start} .lib-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px} .lib-tile{appearance:none;border:1px solid var(--line);background:var(--sheet);border-radius:6px;padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font:700 11px var(--mono);color:var(--fg)} .lib-tile:hover,.lib-tile:focus-visible{border-color:var(--accent)} .lib-tile canvas{width:64px;height:64px} .shelves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px} .shelf{border:1px solid var(--line);border-radius:6px;padding:14px 16px;background:var(--sheet)} .shelf b{font-family:var(--display);font-size:17px;display:block} .shelf span{font-family:var(--mono);font-size:11.5px;color:var(--accent-text)} .shelf p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)} .deliver-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px;align-items:start} #deliver-canvas{aspect-ratio:720/400} .deliver-side .chips{margin-top:0} .deliver-card{margin-top:16px;border:1px solid var(--line);border-radius:6px;padding:16px 18px;background:var(--sheet)} .deliver-card dl{display:grid;grid-template-columns:88px 1fr;gap:6px 14px;margin:10px 0 0;font-size:14.5px} .deliver-card dt{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px} .deliver-card dd{margin:0;color:var(--fg)} .deliver-status{display:inline-block;margin:0;padding:3px 10px;border-radius:999px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em} .deliver-status.now{background:#1f7a4d;color:#fff}.deliver-status.part{background:var(--amber,#FFC42E);color:#17120F}.deliver-status.plan{background:var(--ink-800,#17120F);color:#FFF3E9} .deliver-note{font-size:13px;color:var(--muted);margin:14px 0 0} @media (max-width:900px){.lib-grid,.deliver-grid{grid-template-columns:1fr}.shelves{grid-template-columns:repeat(2,minmax(0,1fr))}.lib-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}} @media (max-width:520px){.shelves{grid-template-columns:1fr}.lib-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Studio teaser on the home page */ .studio-teaser{background:#0E0B0A;color:#FFF3E9} .studio-teaser .eyebrow{color:#E8546A} .studio-teaser .verb{color:#FFF3E9} .studio-teaser .flush{color:#e9dfd5} .btn-big{font-size:17px;padding:16px 26px} .teaser-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:10px} .teaser-tile{position:relative;display:block;border-radius:8px;overflow:hidden;background:#17120F;text-decoration:none;color:#FFF3E9;outline-offset:3px;transition:transform .35s ease} .teaser-tile img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .6s ease,filter .35s ease;filter:saturate(.92)} .teaser-tile:hover,.teaser-tile:focus-visible{transform:translateY(-4px)} .teaser-tile:hover img,.teaser-tile:focus-visible img{transform:scale(1.05);filter:saturate(1.08)} .teaser-big{grid-column:span 2;grid-row:span 2} .teaser-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;background:linear-gradient(transparent,rgba(14,11,10,.85));display:flex;flex-direction:column;gap:2px} .teaser-cap b{font-family:var(--display);font-size:17px} .teaser-big .teaser-cap b{font-size:24px} .teaser-cap span{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;opacity:.8} @media (max-width:900px){.teaser-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.teaser-grid{grid-template-columns:1fr}.teaser-big{grid-column:auto;grid-row:auto}} .studio-honest{font-size:13px;border-left:3px solid var(--accent);padding-left:10px} .studio-ctl .chips[hidden],.studio-ctl .sliders[hidden]{display:none} .pose-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:18px;align-items:start} .pose-panel{margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--sheet)} .pose-panel canvas{display:block;width:100%;height:auto;aspect-ratio:480/300} .pose-panel figcaption{font-size:13.5px;color:var(--muted);padding:10px 14px} .pose-panel figcaption b{color:var(--fg)} @media (max-width:900px){.pose-grid{grid-template-columns:1fr}} /* Studio · Sheet (X-sheet) */ .sheet-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:18px;align-items:start} #sheet-stage{aspect-ratio:640/520} #sheet-bars{aspect-ratio:640/104;border-top:1px solid var(--sheet-line);cursor:ew-resize} .sheet-side #sheet-canvas{aspect-ratio:360/628;border:1px solid var(--line);border-radius:3px;box-shadow:var(--sheet-shadow);cursor:cell;background:#FFFCF3} #sheet-canvas:focus{outline:none}#sheet-canvas:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(200,35,60,.35),var(--sheet-shadow)} .keypad{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:10px} .key{appearance:none;border:1px solid var(--line);background:var(--sheet);border-radius:5px;padding:8px 0;font:700 14px var(--mono);color:var(--fg);cursor:pointer} .key:hover,.key:focus-visible{border-color:var(--accent)} .key-wide{grid-column:span 3;font-size:12px;letter-spacing:.06em} .key-enter{grid-column:span 4;background:#17120F;color:#FFF3E9;border-color:#17120F;font-size:12px;letter-spacing:.06em} .sheet-msg{font-family:var(--mono);font-size:12.5px;line-height:1.45;color:var(--muted);margin:10px 0 0;min-height:2.9em} .sheet-msg.err{color:var(--accent-text,#A61B30)} @media (max-width:900px){.sheet-grid{grid-template-columns:1fr}.sheet-side{max-width:460px}} .brush-tones{margin-top:10px} .brush-tones-note{font-size:13px;color:var(--muted);margin-left:6px} /* Direct: the storyboard */ .sb-board{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px} .sb-panel{display:flex;flex-direction:column;min-width:0} .sb-frame{appearance:none;display:block;width:100%;padding:0;margin:0;border:1.5px solid #1d1714;border-radius:2px;background:#FFFDF8;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.04);transition:transform .2s ease} .sb-frame:hover{transform:translateY(-2px)} .sb-frame:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .sb-frame canvas{display:block;width:100%;height:auto;aspect-ratio:16/9} .sb-panel.is-sel .sb-frame{outline:3px solid var(--accent);outline-offset:3px} .sb-panel.is-live .sb-cap b{color:var(--accent-text,#A61B30)} .sb-cap{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-top:10px;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .sb-cap b{color:var(--fg);font-size:12.5px} .sb-trans{margin-left:auto;color:var(--accent-text,#A61B30)} .sb-notes{display:grid;grid-template-columns:68px minmax(0,1fr);gap:4px 10px;margin:8px 0 0;font-size:14px;line-height:1.45;border-top:1px solid var(--line);padding-top:8px} .sb-notes dt{font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px} .sb-notes dd{margin:0;color:var(--fg)} .sb-notes dd.dlg{font-style:italic} .sb-notes dd.cam{color:var(--accent-text,#A61B30);font-family:var(--mono);font-size:12px;line-height:1.5} .sb-play{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:22px;margin-top:34px;align-items:start} #sb-view{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#FFFDF8} .sb-shot{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:auto} .sb-card .eyebrow{margin:0} .sb-sel{font-family:var(--display);font-size:26px;margin:4px 0 0} .sb-card .chips{margin-top:12px} .sb-card .chips-label{min-width:64px} .sb-honest{font-size:13px;color:var(--muted);border-left:3px solid var(--accent);padding-left:10px;margin:14px 0 0} @media (max-width:1000px){.sb-board{grid-template-columns:repeat(2,minmax(0,1fr))}.sb-play{grid-template-columns:1fr}} @media (max-width:560px){.sb-board{grid-template-columns:1fr}} /* Studio · Depth */ .depth-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:18px;align-items:start} #ride-view{aspect-ratio:960/540} .depth-rig{margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--sheet)} .depth-rig canvas{display:block;width:100%;height:auto;aspect-ratio:640/440;background:#FBF8F3;touch-action:none} .depth-rig figcaption{font-size:13.5px;color:var(--muted);padding:10px 14px} .depth-rig figcaption b{color:var(--fg)} @media (max-width:900px){.depth-grid{grid-template-columns:1fr}} #line-canvas{aspect-ratio:960/540;background:#161310} #classics-canvas{aspect-ratio:960/540} #classics-sack-ctl[hidden],#classics-moon-ctl[hidden],#classics-horse-ctl[hidden]{display:none} .foot .links{flex-wrap:wrap;row-gap:10px} .foot .links a{white-space:nowrap} @media (max-width:640px){.foot .links{margin-left:0;flex-basis:100%}} /* ---------------------------------------------------------------- colophon: the name, and a thank-you */ .foot .colophon{flex-basis:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px 48px; padding-top:22px;border-top:1px dashed var(--line)} .foot .colophon{align-items:baseline} .foot .credit{justify-self:end;text-align:right;max-width:34em} @media (max-width:760px){ .foot .colophon{grid-template-columns:minmax(0,1fr)} .foot .credit{justify-self:start;text-align:left} } .foot .colophon p{margin:0;font-family:var(--body);font-size:15px;line-height:1.6;color:var(--fg-2)} .foot .define b{font-family:var(--display);font-weight:700;font-size:21px;color:var(--fg);letter-spacing:-.01em} .foot .define .say-row{display:flex;flex-wrap:wrap;gap:8px 22px;margin:6px 0 4px} .foot .define .say-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .foot .define .lang{font:700 11px/1 var(--mono);letter-spacing:.12em;color:var(--muted)} .foot .define .ipa{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--accent-text)} .foot .define i{color:var(--muted)} .foot .define .aside{display:block;font-style:italic;font-size:14px;color:var(--muted)} .foot .define .aside i{font-style:normal;color:var(--fg-2)} .foot .credit b{color:var(--fg)} .say{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:4px;border-radius:50%; border:1px solid var(--btn-ghost-line);background:none;color:var(--fg);cursor:pointer;transition:border-color .15s ease,color .15s ease} .say[hidden]{display:none} .say svg{width:14px;height:14px} .say:hover{border-color:var(--fg)} .say.speaking{border-color:var(--accent);color:var(--accent-text)} .say:focus-visible{outline:2px solid var(--focus);outline-offset:2px}