:root { --ink:#18241e; --cream:#fff7df; --pink:#f8848f; --yellow:#ffd64f; --blue:#75cae5; --green:#64a97a; --purple:#8b78d4; --mono:"DM Mono", monospace; --sans:"Space Grotesk", sans-serif; --display:"Fraunces", Georgia, serif; }
* { box-sizing:border-box; }
html { overflow-x:hidden; scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--cream); font-family:var(--sans); transition:background-color .35s ease,color .35s ease; }
body.era-victorian { --ink:#18241e; --cream:#fff7df; --pink:#f8848f; --yellow:#ffd64f; --blue:#75cae5; --green:#64a97a; --purple:#8b78d4; }
body.era-fin { --ink:#32221f; --cream:#f4eadb; --pink:#c97857; --yellow:#d7b36a; --blue:#9fbdb5; --green:#527064; --purple:#755067; }
body.era-jazz { --ink:#1c2130; --cream:#f7f0d6; --pink:#e56b5d; --yellow:#e3b23c; --blue:#82a9b6; --green:#507b70; --purple:#514f83; }
body.era-space { --ink:#eaf2ff; --cream:#0e1730; --pink:#ff4fa3; --yellow:#f8d34d; --blue:#3b5b91; --green:#37b89b; --purple:#8259d8; }
body.era-modern { --ink:#15202b; --cream:#eef3f6; --pink:#ff755d; --yellow:#f5c84b; --blue:#72b8d1; --green:#439b83; --purple:#7064c7; }
a { color:inherit; text-decoration:none; }
.paper-noise { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.16; background-image:radial-gradient(rgba(24,36,30,.6) .45px,transparent .7px); background-size:5px 5px; mix-blend-mode:multiply; }
.wrap { width:min(1160px,calc(100% - 44px)); margin:auto; }
.site-header { height:86px; width:min(1230px,calc(100% - 44px)); margin:auto; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.05em; }
.brand span { display:grid; place-items:center; height:37px; width:37px; border:2px solid var(--ink); border-radius:45% 55% 52% 48%; background:var(--yellow); font:500 11px var(--mono); transform:rotate(-8deg); }
.tiny-link { font:500 11px var(--mono); border-bottom:2px solid var(--ink); padding:5px 1px; transform:rotate(2deg); }
.hero { min-height:640px; padding:45px 0 82px; position:relative; }
.eyebrow,.section-label,.model-era { font:500 10px var(--mono); letter-spacing:.1em; }
.eyebrow { display:flex; align-items:center; gap:9px; width:max-content; padding:9px 13px; border:2px solid var(--ink); border-radius:999px; transform:rotate(-2deg); background:#fffdf7; }
.eyebrow i { display:block; width:8px; height:8px; border-radius:50%; background:var(--pink); }
.hero-layout { display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:65px; padding-top:20px; }.hero-copy { position:relative; z-index:2; }
.kicker { margin:0 0 9px; color:#526258; font:500 11px/1.3 var(--mono); letter-spacing:.08em; }
h1,h2 { margin:0; font-family:var(--display); font-weight:900; letter-spacing:-.085em; line-height:.82; }
h1 { font-size:clamp(76px,10.5vw,150px); }
h2 { font-size:clamp(53px,6.5vw,91px); }
em { color:var(--pink); font-style:normal; text-shadow:2px 2px 0 var(--ink); }
.hero-subtitle { max-width:650px; margin:30px 0 27px; font:600 clamp(18px,2vw,25px)/1.18 var(--sans); letter-spacing:-.045em; text-wrap:balance; }
.price-chip { display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%; margin:0 0 25px; padding:8px 11px; border:2px solid var(--ink); border-radius:999px; background:var(--yellow); font:500 10px var(--mono); transform:rotate(-2deg); }.price-chip strong { font-size:14px; }
.squiggle-button { display:inline-flex; align-items:center; gap:17px; padding:13px 17px; background:var(--ink); color:var(--cream); border-radius:43% 57% 48% 52% / 50% 43% 57% 50%; box-shadow:4px 4px 0 var(--pink); font:500 11px var(--mono); transition:transform .18s ease,box-shadow .18s ease; }
.squiggle-button b { font-size:20px; line-height:10px; }.squiggle-button:hover { transform:translate(-2px,-3px) rotate(-2deg); box-shadow:7px 7px 0 var(--pink); }
.orbit { width:min(390px,80vw); aspect-ratio:1; margin:auto; position:relative; border:3px solid var(--ink); border-radius:48% 52% 54% 46% / 55% 42% 58% 45%; transform:rotate(12deg); background:var(--blue); }
.orbit:before,.orbit:after { content:""; position:absolute; border:2px solid var(--ink); border-radius:50%; }.orbit:before { inset:42px; }.orbit:after { inset:83px; border-style:dashed; }
.sun,.planet { position:absolute; z-index:1; display:grid; place-items:center; border:2px solid var(--ink); font:500 14px var(--mono); }
.sun { inset:calc(50% - 55px); width:110px; height:110px; border-radius:50% 47% 54% 46%; background:var(--yellow); font:900 60px var(--display); transform:rotate(-12deg); }
.planet { border-radius:50%; }.planet-one { top:27px; right:80px; width:58px; height:58px; background:var(--pink); transform:rotate(-12deg); }.planet-two { bottom:38px; left:23px; width:72px; height:72px; background:var(--purple); color:white; transform:rotate(-12deg); }
.orbit-label { position:absolute; z-index:2; bottom:-14px; right:-31px; padding:10px 13px; border:2px solid var(--ink); background:var(--cream); box-shadow:3px 3px 0 var(--ink); text-align:center; font:500 10px/1.25 var(--mono); transform:rotate(-14deg); }
.spark { position:absolute; z-index:2; font-size:34px; }.spark-one{top:-28px;left:-26px;}.spark-two{bottom:11px;right:-27px;color:var(--pink);}
.sticker { position:absolute; padding:12px 15px; border:2px solid var(--ink); background:var(--green); color:white; font:700 12px/1 var(--mono); text-align:center; box-shadow:4px 4px 0 var(--ink); transform:rotate(-10deg); z-index:1; }.sticker-api { top:74px; right:2%; }
.arrow-note { position:absolute; bottom:56px; left:20%; text-align:center; font:500 11px/1.2 var(--mono); transform:rotate(-8deg); }.arrow-note:before { content:""; position:absolute; width:60px; height:27px; border-top:2px solid var(--ink); border-radius:50%; right:100%; top:3px; transform:rotate(19deg); }
.ribbon { overflow:hidden; padding:11px 0; background:var(--pink); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); font:700 13px var(--mono); white-space:nowrap; transform:rotate(-1deg) scale(1.02); }.ribbon div { animation:marquee 24s linear infinite; width:max-content; }.ribbon span { padding:0 20px; color:var(--cream); } @keyframes marquee { to { transform:translateX(-25%); } }
.model-section { padding:42px 0 125px; }.section-label { margin-bottom:18px; color:#526258; }.model-card { --ink:#18241e; --cream:#fff7df; position:relative; min-height:650px; overflow:hidden; color:var(--ink); border:2px solid #3d2712; border-radius:13px; background:#d8b86d; box-shadow:12px 14px 0 var(--ink); isolation:isolate; }.model-frame { --frame-corner:84px; --frame-edge:46px; position:absolute; inset:-2px; z-index:10; pointer-events:none; container-type:size; }.frame-corner,.frame-edge { position:absolute; display:block; background-repeat:no-repeat; }.frame-corner { z-index:2; width:var(--frame-corner); height:var(--frame-corner); background-image:url("assets/frame/ornate-corner.png"); background-position:center; background-size:100% 100%; }.frame-corner-top-left { top:0; left:0; }.frame-corner-top-right { top:0; right:0; transform:rotate(90deg); }.frame-corner-bottom-right { right:0; bottom:0; transform:rotate(180deg); }.frame-corner-bottom-left { bottom:0; left:0; transform:rotate(270deg); }.frame-edge { z-index:1; height:var(--frame-edge); background-image:url("assets/frame/ornate-edge.png"); background-position:center; background-size:auto 100%; background-repeat:repeat-x; }.frame-edge-top,.frame-edge-bottom { left:calc(var(--frame-corner) - 9px); right:calc(var(--frame-corner) - 9px); }.frame-edge-top { top:0; }.frame-edge-bottom { bottom:0; transform:rotate(180deg); }.frame-edge-left,.frame-edge-right { top:50%; width:calc(100cqh - var(--frame-corner) - var(--frame-corner) + 18px); }.frame-edge-left { left:calc(var(--frame-edge) / 2); transform:translate(-50%,-50%) rotate(-90deg); }.frame-edge-right { left:calc(100% - var(--frame-edge) / 2); transform:translate(-50%,-50%) rotate(90deg); }.model-backdrop { position:absolute; inset:0; z-index:0; will-change:transform; }.model-backdrop:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(24,36,30,.13),transparent 55%,rgba(24,36,30,.08)); }.model-backdrop img { display:block; width:100%; height:100%; object-fit:cover; }.model-main { position:relative; z-index:2; width:48%; min-height:570px; margin:40px 0 40px 43px; padding:42px 4% 34px; background:color-mix(in srgb,var(--cream) 92%,transparent); border:2px solid var(--ink); border-radius:18px 34px 25px 20px; clip-path:polygon(0 0,94% 0,100% 8%,96% 48%,100% 92%,94% 100%,0 100%); }.model-era { margin:0 0 14px; }.model-main > p:not(.model-era) { max-width:430px; margin:20px 0; font-size:17px; line-height:1.3; font-weight:500; }.model-link { font:500 11px var(--mono); border-bottom:2px solid var(--ink); }.model-license { margin:0 0 15px!important; font:500 10px/1.35 var(--mono)!important; letter-spacing:.04em; }.model-samples { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:650px; margin-top:23px; }.model-sample { padding:13px; border:2px solid var(--ink); background:color-mix(in srgb,var(--cream) 78%,transparent); }.model-sample span { display:block; margin-bottom:8px; font:500 9px var(--mono); letter-spacing:.08em; }.model-sample code,.model-sample p { display:block; margin:0; font:500 11px/1.4 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }.model-sample p { font-family:var(--display); font-size:16px; font-weight:700; letter-spacing:-.02em; }
.model-stamp { position:absolute; top:42px; left:50%; z-index:7; display:grid; place-items:center; width:86px; height:86px; border:2px solid var(--ink); border-radius:50%; background:var(--pink); text-align:center; font:500 10px/1.1 var(--mono); transform:rotate(15deg); }.model-portrait { position:absolute; z-index:3; right:1.5%; bottom:0; width:47%; height:96%; overflow:visible; background:transparent; will-change:transform; }.model-portrait img { position:absolute; right:0; bottom:0; display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(6px 7px 0 rgba(24,36,30,.35)); }.model-quote { position:absolute; z-index:2; top:10%; right:2%; display:grid; place-items:center; width:49%; min-height:25%; margin:0; padding:16px; color:#18241e; border:3px solid #18241e; border-radius:48% 52% 46% 54%; background:#fff7df; text-align:center; font:900 clamp(17px,1.8vw,27px)/1.02 var(--display); letter-spacing:-.045em; transform:rotate(1deg); text-wrap:balance; }.model-quote:after { content:""; position:absolute; left:14%; bottom:-24px; width:43px; height:40px; border-left:3px solid #18241e; border-bottom:3px solid #18241e; background:#fff7df; clip-path:polygon(0 0,100% 0,0 100%); transform:skewX(-18deg); }.era-jazz .model-quote { right:1%; width:50%; }.era-space .model-quote { top:9%; color:#18241e; }.transition-ghost { pointer-events:none; }.transition-ghost.ghost-backdrop { z-index:1; animation:backdrop-out .72s cubic-bezier(.65,0,.25,1) both; }.transition-ghost.ghost-portrait { z-index:5; animation:portrait-out .72s cubic-bezier(.65,0,.25,1) both; }.model-card.is-transitioning > .model-backdrop { animation:backdrop-in .72s cubic-bezier(.22,.75,.28,1) both; }.model-card.is-transitioning > .model-portrait { animation:portrait-in .72s cubic-bezier(.22,.75,.28,1) both; }.model-card.is-transitioning > .model-main { animation:details-in .55s .12s ease both; } @keyframes backdrop-out { to { transform:translateX(-105%); } } @keyframes backdrop-in { from { transform:translateX(105%); } } @keyframes portrait-out { to { transform:translateX(125%); } } @keyframes portrait-in { from { transform:translateX(-135%); } } @keyframes details-in { from { opacity:0; transform:translateY(12px); } }
.era-section { padding:68px 0 38px; border-top:3px dashed var(--ink); background:color-mix(in srgb,var(--blue) 22%,var(--cream)); }.era-heading { max-width:900px; margin:0 auto 28px; text-align:center; }.era-heading .section-label { margin-bottom:10px; }.era-heading h2 { font-size:clamp(49px,6vw,82px); line-height:.92; }.era-heading p { max-width:660px; margin:22px auto 0; font-size:16px; line-height:1.3; font-weight:500; }.era-control { --ink:#18241e; --cream:#fff7df; position:relative; padding:15px 20px 12px; color:var(--ink); border:3px solid var(--ink); border-radius:28px; background:var(--cream); box-shadow:8px 8px 0 var(--ink); }.era-readout { position:absolute; z-index:3; top:7%; left:50%; display:flex; align-items:center; gap:12px; padding:5px 11px 7px; border:2px solid var(--ink); border-radius:18px; background:rgba(255,247,223,.94); box-shadow:3px 3px 0 rgba(24,36,30,.5); transform:translateX(-50%); pointer-events:none; }.era-readout span { font:900 clamp(38px,5vw,64px)/.85 var(--display); letter-spacing:-.08em; }.era-readout strong { padding:7px 10px; border:2px solid var(--ink); border-radius:999px; background:#4f8c64; color:#fff7df; font:500 10px var(--mono); letter-spacing:.08em; }.time-lever { position:relative; width:100%; aspect-ratio:4.25/1; overflow:hidden; border-radius:20px; }.time-lever > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.era-control input[type=range] { -webkit-appearance:none; appearance:none; position:absolute; z-index:4; left:15%; top:50%; width:70%; height:82px; margin:0; transform:translateY(-50%); background:transparent; cursor:grab; }.era-control input[type=range]:active { cursor:grabbing; }.era-control input[type=range]::-webkit-slider-runnable-track { height:12px; border-radius:99px; background:transparent; }.era-control input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:50px; height:84px; margin-top:-36px; border:3px solid #241611; border-radius:48% 48% 36% 36%; background:radial-gradient(circle at 50% 22%,#fff1a7 0 8%,#d89b39 9% 24%,#633323 25% 38%,transparent 39%),linear-gradient(90deg,#6d3b25 0 18%,#e2ad50 19% 50%,#8b512c 51% 100%); box-shadow:0 7px 0 #241611,0 10px 12px rgba(36,22,17,.35); }.era-control input[type=range]::-moz-range-track { height:12px; background:transparent; }.era-control input[type=range]::-moz-range-thumb { width:46px; height:80px; border:3px solid #241611; border-radius:48% 48% 36% 36%; background:linear-gradient(90deg,#6d3b25 0 18%,#e2ad50 19% 50%,#8b512c 51% 100%); box-shadow:0 7px 0 #241611; }.era-control input[type=range]:focus-visible { outline:3px dashed #d15474; outline-offset:5px; }.era-ticks { display:flex; justify-content:space-between; margin:6px 15% 0; font:600 11px var(--mono); }.era-ticks span { padding:3px 5px; border-radius:5px; background:#fff7df; box-shadow:0 0 0 1px rgba(24,36,30,.28); }
.how-section { padding:120px 0; background:var(--ink); color:var(--cream); }.how-layout { display:grid; grid-template-columns:1fr 1fr; gap:90px; }.how-section .section-label { color:#b8d8c0; }.how-section h2 em { color:var(--yellow); text-shadow:2px 2px 0 var(--pink); }.how-cards { position:relative; min-height:310px; }.mini-card { position:absolute; display:flex; flex-direction:column; justify-content:space-between; width:240px; height:180px; padding:21px; color:var(--ink); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--cream); }.mini-card span { font:500 11px var(--mono); }.mini-card strong { font-size:20px; line-height:1.05; letter-spacing:-.06em; }.card-one { top:10px; left:0; background:var(--blue); transform:rotate(-6deg); }.card-two { top:108px; right:3px; background:var(--pink); transform:rotate(7deg); }.payment-note { position:absolute; bottom:-14px; left:35px; width:250px; margin:0; font:500 10px/1.3 var(--mono); transform:rotate(-3deg); }
.examples-section { padding:130px 0 145px; }.examples-heading { display:grid; grid-template-columns:1fr .58fr; align-items:end; gap:50px; margin-bottom:45px; }.examples-heading p { max-width:300px; margin:0 0 6px; font-size:17px; line-height:1.3; font-weight:500; }.example-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.example-card { min-height:355px; padding:24px; border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); display:flex; flex-direction:column; gap:16px; }.example-blue { background:var(--blue); transform:rotate(-1deg); }.example-pink { background:var(--pink); transform:rotate(1.5deg); }.example-yellow { background:var(--yellow); transform:rotate(-1deg); }.example-tag { font:500 10px var(--mono); letter-spacing:.08em; }.output-tag { margin-top:auto; }.example-card code { font:500 13px/1.45 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }.example-card p { margin:0; font-family:var(--display); font-size:20px; line-height:1.05; font-weight:700; letter-spacing:-.03em; }.examples-link { display:inline-block; margin-top:40px; }
.good-to-know { display:grid; grid-template-columns:120px 1fr .62fr; align-items:center; gap:35px; padding:140px 0; }.provenance-mark { display:grid; place-items:center; width:98px; height:98px; border:3px solid var(--ink); border-radius:50% 45% 51% 49%; background:var(--green); color:var(--cream); font:900 72px/.8 var(--display); transform:rotate(-13deg); }.good-to-know p { margin:0; font-size:17px; line-height:1.3; font-weight:500; }.good-to-know h2 { font-size:clamp(45px,5vw,70px); }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:35px 0 45px; border-top:2px solid var(--ink); font:500 10px var(--mono); }.site-footer p { margin:0; }.footer-links { display:flex; flex-wrap:wrap; gap:13px; }.footer-links a { border-bottom:1px solid currentColor; }
.legal-page { min-height:calc(100vh - 160px); padding:75px 0 100px; }.legal-page .legal-kicker { margin:0 0 13px; color:#526258; font:500 10px var(--mono); letter-spacing:.1em; }.legal-page h1 { max-width:850px; font-size:clamp(55px,8vw,108px); margin-bottom:35px; }.legal-page h2 { margin:46px 0 14px; font-size:clamp(33px,4vw,55px); letter-spacing:-.06em; }.legal-page p,.legal-page li { max-width:760px; font-size:16px; line-height:1.55; }.legal-page ul { max-width:760px; padding-left:23px; }.legal-page .legal-note { padding:16px 18px; border:2px solid var(--ink); background:var(--yellow); box-shadow:4px 4px 0 var(--ink); font:500 12px/1.4 var(--mono); }.legal-page a { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }.legal-page code { padding:2px 5px; background:#fffdf7; border:1px solid var(--ink); font:500 12px var(--mono); }.legal-back { display:inline-block; margin-top:45px; font:500 11px var(--mono); }
.examples-page h1 { max-width:980px; }.api-example { margin:28px 0 34px; padding:22px; border:3px solid var(--ink); background:#fffdf7; box-shadow:6px 6px 0 var(--ink); }.api-example h2 { margin:0 0 12px; font-size:34px; }.api-example pre { margin:12px 0; padding:16px; overflow:auto; background:var(--ink); color:var(--cream); font:500 12px/1.5 var(--mono); white-space:pre-wrap; }.api-example p { margin:10px 0 0; }.examples-page .legal-note { margin:25px 0 35px; }
@media (max-width:760px) { .wrap,.site-header { width:calc(100% - 30px); max-width:1160px; }.hero { min-height:auto; padding:33px 0 110px; }.hero-layout{grid-template-columns:1fr;gap:45px}.hero-copy{z-index:2}.hero h1 em{display:block}.hero-subtitle{font-size:19px;line-height:1.22}.orbit{width:min(330px,82vw)}.sticker-api{top:auto;bottom:42px;left:auto;right:8%}.arrow-note{display:none}.era-section{padding:56px 0 24px}.era-heading{margin-bottom:22px}.era-heading h2{font-size:clamp(46px,15vw,65px)}.era-heading p{font-size:14px}.era-control{padding:10px 9px 13px;border-radius:19px}.time-lever{aspect-ratio:2.25/1;border-radius:13px}.era-readout{top:7%;gap:7px;padding:4px 8px}.era-readout span{font-size:34px}.era-readout strong{padding:5px 7px;font-size:8px}.era-control input[type=range]{left:13%;width:74%;height:62px}.era-control input[type=range]::-webkit-slider-thumb{width:38px;height:65px;margin-top:-27px}.era-ticks{margin:5px 12% 0;font-size:9px}.model-section{padding:34px 0 94px}.model-card{min-height:0;padding:0}.model-frame{--frame-corner:52px;--frame-edge:30px}.model-main{width:auto;min-height:0;margin:32px 20px 0;padding:48px 25px 26px;border:2px solid var(--ink);clip-path:none;border-radius:22px;background:color-mix(in srgb,var(--cream) 94%,transparent)}.model-stamp{top:35px;left:auto;right:31px;width:70px;height:70px}.model-samples{grid-template-columns:1fr}.model-portrait{position:relative;inset:auto;width:100%;height:430px;margin:0;overflow:hidden}.model-portrait img{height:100%;aspect-ratio:1;filter:drop-shadow(4px 5px 0 rgba(24,36,30,.3))}.model-quote{top:9%;right:5%;width:48%;min-height:22%;padding:12px;font-size:clamp(16px,5.1vw,25px)}.how-section{padding:88px 0}.how-layout{grid-template-columns:1fr;gap:48px}.how-cards{min-height:315px}.examples-section{padding:90px 0}.examples-heading{grid-template-columns:1fr;gap:20px}.example-grid{grid-template-columns:1fr;gap:28px}.example-card{min-height:0}.good-to-know{grid-template-columns:82px 1fr;gap:20px;padding:95px 0}.good-to-know p{grid-column:1/-1}.provenance-mark{width:72px;height:72px;font-size:51px}.site-footer{align-items:flex-start;flex-direction:column;gap:16px}.tiny-link{display:none}.footer-links{gap:10px} }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hero { min-height:0; padding:42px 0 34px; }
.hero-layout { display:block; max-width:850px; padding:0; }
.hero h1 { font-size:clamp(58px,7vw,96px); line-height:.86; }
.hero-subtitle { max-width:820px; margin:20px 0 20px; font-size:clamp(16px,1.55vw,21px); line-height:1.23; }
.hero .price-chip { margin:0 12px 0 0; }
.era-section { padding:0 0 54px; border:0; background:transparent; }
.era-control { --console-ink:#203333; --console-cream:#f4e7c4; --console-mint:#87aaa0; --console-coral:#d96c55; width:min(780px,100%); margin:auto; padding:11px 15px 10px; color:var(--console-ink); border:4px solid var(--console-ink); border-radius:20px; background:linear-gradient(145deg,#a9c1b6,#7f9f96); box-shadow:inset 0 0 0 4px #e7d8ad,7px 8px 0 rgba(24,36,30,.85); }
.console-label { display:flex; align-items:center; justify-content:center; gap:11px; margin:0 0 5px; color:#203333; font:700 8px var(--mono); letter-spacing:.12em; }
.console-label i { width:7px; height:7px; border:1px solid #203333; border-radius:50%; background:#e36d58; box-shadow:0 0 0 2px #e7d8ad; }
.time-lever { aspect-ratio:6.2/1; border:3px solid #203333; border-radius:12px; background:#e7d8ad; box-shadow:inset 0 0 0 3px rgba(255,255,255,.35); }
.time-lever > img { filter:sepia(.18) saturate(.66) hue-rotate(88deg) brightness(1.12); opacity:.84; }
.time-lever:after { content:""; position:absolute; inset:9px; border:1px solid rgba(32,51,51,.55); border-radius:7px; pointer-events:none; }
.era-control input[type=range] { left:14%; width:72%; height:54px; }
.era-control input[type=range]::-webkit-slider-thumb { width:34px; height:52px; margin-top:-20px; border-color:#203333; border-radius:48% 48% 32% 32%; background:radial-gradient(circle at 50% 20%,#fff2b1 0 9%,#e07159 10% 26%,#6b3530 27% 39%,transparent 40%),linear-gradient(90deg,#315a58 0 18%,#df785f 19% 55%,#8d4639 56% 100%); box-shadow:0 5px 0 #203333,0 7px 8px rgba(32,51,51,.35); }
.era-control input[type=range]::-moz-range-thumb { width:31px; height:48px; border-color:#203333; background:linear-gradient(90deg,#315a58 0 18%,#df785f 19% 55%,#8d4639 56% 100%); box-shadow:0 5px 0 #203333; }
.era-ticks { margin:6px 14% 0; color:#203333; font-size:10px; }
.era-ticks span { padding:2px 6px; border:1px solid rgba(32,51,51,.4); background:#f4e7c4; }
.model-section { padding:36px 0 120px; }
.model-card { min-height:610px; }
.model-main { position:absolute; z-index:6; left:50px; bottom:48px; width:38%; min-height:0; margin:0; padding:25px 30px 24px; border-radius:15px 27px 19px 16px; background:color-mix(in srgb,#fff7df 91%,transparent); clip-path:polygon(0 0,95% 0,100% 10%,97% 88%,92% 100%,0 100%); box-shadow:4px 5px 0 rgba(24,36,30,.4); }
.model-main h2 { font-size:clamp(45px,5vw,69px); }
.model-main > p:not(.model-era) { margin:14px 0; font-size:15px; }
.model-license { margin-bottom:11px!important; }
.model-portrait { inset:0; width:100%; height:100%; }
.model-portrait img { right:0; width:50%; height:100%; }
.model-quote { top:9%; right:3%; width:24%; min-height:22%; }
.era-jazz .model-quote,.era-space .model-quote { right:3%; width:24%; }
.model-examples { margin-top:32px; padding:30px; color:#18241e; border:3px solid #18241e; border-radius:18px; background:#fff7df; box-shadow:8px 9px 0 #18241e; }
.model-examples > header { display:grid; grid-template-columns:1fr minmax(260px,.6fr); align-items:end; gap:34px; margin-bottom:24px; }
.model-examples h3 { margin:0; font:900 clamp(38px,4.3vw,61px)/.9 var(--display); letter-spacing:-.07em; }
.model-examples h3 em { color:#d85f73; }
.model-examples header p { margin:0; font-size:15px; line-height:1.35; font-weight:600; }
.example-table-wrap { overflow:hidden; border:2px solid #18241e; }
.model-examples table { width:100%; border-collapse:collapse; table-layout:fixed; }
.model-examples th { padding:9px 14px; color:#fff7df; background:#18241e; text-align:left; font:500 9px var(--mono); letter-spacing:.1em; }
.model-examples th:first-child { width:42%; }
.model-examples td { padding:15px 16px; border-top:2px solid #18241e; vertical-align:top; font:700 17px/1.25 var(--display); }
.model-examples tr:first-child td { border-top:0; }
.model-examples td+td { border-left:2px solid #18241e; }
.model-examples td:last-child { white-space:pre-wrap; overflow-wrap:anywhere; }
.model-examples code { font:500 12px/1.45 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.example-caveat { margin:14px 0 0; font:500 9px/1.4 var(--mono); letter-spacing:.04em; }
.prompt-instructions { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 24px; padding:0; list-style:none; counter-reset:prompt-step; }
.prompt-instructions li { position:relative; min-height:128px; padding:20px 17px 16px 50px; border:2px solid #18241e; background:#eaf2e8; counter-increment:prompt-step; }
.prompt-instructions li:nth-child(2) { background:#f8d34d; transform:rotate(-.6deg); }
.prompt-instructions li:nth-child(3) { background:#f8848f; transform:rotate(.5deg); }
.prompt-instructions li:before { content:counter(prompt-step); position:absolute; top:17px; left:15px; display:grid; place-items:center; width:25px; height:25px; border:2px solid #18241e; border-radius:50%; background:#fff7df; font:700 10px var(--mono); }
.prompt-instructions b { display:block; margin-bottom:7px; font:900 20px/.95 var(--display); letter-spacing:-.045em; }
.prompt-instructions span { display:block; font:500 12px/1.38 var(--sans); }
.free-parlour { margin-top:30px; padding-top:28px; border-top:3px dashed #18241e; }
.free-parlour-heading { display:grid; grid-template-columns:1fr minmax(250px,.58fr); align-items:end; gap:32px; margin-bottom:18px; }
.free-parlour-heading h4 { margin:0; color:#18241e; font:900 clamp(35px,4vw,56px)/.9 var(--display); letter-spacing:-.07em; }
.free-parlour-heading h4 em { color:#d85f73; text-shadow:2px 2px 0 #18241e; }
.free-parlour-heading > p { margin:0; color:#18241e; font:600 13px/1.4 var(--sans); }
.prompt-starters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.prompt-starters button { padding:8px 11px; color:#18241e; border:2px solid #18241e; border-radius:999px; background:#eaf2ff; cursor:pointer; font:500 10px var(--mono); transition:transform .15s ease,background-color .15s ease; }
.prompt-starters button:hover,.prompt-starters button:focus-visible { background:#f8d34d; transform:translateY(-2px); }
.chat-window { display:flex; flex-direction:column; gap:12px; min-height:210px; max-height:430px; overflow:auto; padding:18px; border:2px solid #18241e; border-bottom:0; background:#f5edd8; }
.chat-empty { max-width:600px; margin:auto; color:#59605c; text-align:center; font:500 12px/1.5 var(--mono); }
.chat-message { max-width:min(78%,650px); margin:0; padding:13px 15px; border:2px solid #18241e; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-message span { display:block; margin-bottom:6px; font:500 8px var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.chat-message-user { align-self:flex-end; background:#75cae5; border-radius:17px 17px 4px 17px; font:500 13px/1.4 var(--mono); }
.chat-message-assistant { align-self:flex-start; background:#fff7df; border-radius:17px 17px 17px 4px; box-shadow:4px 4px 0 #18241e; font:700 18px/1.25 var(--display); }
.chat-message-error { align-self:center; background:#f8848f; font:600 12px/1.4 var(--sans); }
.chat-form { border:2px solid #18241e; background:#fff7df; }
.chat-form textarea { display:block; width:100%; min-height:88px; resize:vertical; padding:15px 17px; color:#18241e; border:0; border-bottom:2px solid #18241e; outline:none; background:transparent; font:500 14px/1.45 var(--mono); }
.chat-form textarea:focus { box-shadow:inset 0 0 0 3px #75cae5; }
.chat-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 12px; }
.chat-actions span { color:#4f5853; font:500 9px/1.35 var(--mono); }
.chat-actions button { flex:0 0 auto; padding:10px 13px; color:#fff7df; border:2px solid #18241e; border-radius:43% 57% 48% 52%/50% 43% 57% 50%; background:#18241e; box-shadow:3px 3px 0 #f8848f; cursor:pointer; font:500 10px var(--mono); }
.chat-actions button b { margin-left:8px; font-size:15px; }
.chat-actions button:disabled { cursor:wait; opacity:.58; }
.post-gallery-decor { position:relative; display:grid; grid-template-columns:.8fr 1fr; align-items:center; gap:80px; min-height:470px; padding:72px 0 112px; }
.post-gallery-copy { position:relative; min-height:280px; }
.post-gallery-copy .kicker { margin:34px 0 0 16px; font-size:13px; }
.post-gallery-copy .sticker-api { top:86px; right:8%; }
.post-gallery-copy .arrow-note { bottom:12px; left:17%; }
.post-gallery-decor .orbit { width:min(350px,72vw); }
.transition-ghost.ghost-backdrop { animation:backdrop-out .8s linear both; }
.transition-ghost.ghost-portrait { animation:portrait-out .8s linear both; }
.model-card.is-transitioning > .model-backdrop { animation:backdrop-in .8s linear both; }
.model-card.is-transitioning > .model-portrait { animation:portrait-in .8s linear both; }
@keyframes backdrop-out { to { transform:translateX(100%); } }
@keyframes backdrop-in { from { transform:translateX(-100%); } }
@keyframes portrait-out { to { transform:translateX(-100%); } }
@keyframes portrait-in { from { transform:translateX(100%); } }
@media (max-width:760px) {
  .wrap { width:calc(100% - 30px); }
  .hero { padding:28px 0 26px; }
  .hero-layout { max-width:none; }
  .hero h1 { font-size:clamp(52px,16vw,70px); }
  .hero h1 em { display:inline; }
  .hero-subtitle { margin:17px 0; font-size:16px; }
  .hero .price-chip { margin:0 8px 10px 0; }
  .orbit { width:min(270px,72vw); }
  .era-section { padding-bottom:40px; }
  .era-control { padding:9px 10px 8px; border-width:3px; border-radius:15px; box-shadow:inset 0 0 0 3px #e7d8ad,5px 6px 0 rgba(24,36,30,.85); }
  .console-label { font-size:7px; }
  .time-lever { aspect-ratio:3.35/1; }
  .era-control input[type=range] { left:12%; width:76%; height:48px; }
  .era-control input[type=range]::-webkit-slider-thumb { width:29px; height:47px; margin-top:-18px; }
  .era-ticks { margin:5px 10% 0; font-size:8px; }
  .model-card { min-height:760px; padding:0; }
  .model-main { top:34px; right:30px; bottom:auto; left:30px; width:auto; padding:35px 25px 24px; clip-path:none; border-radius:20px; }
  .model-main h2 { font-size:clamp(43px,13vw,61px); }
  .model-portrait { position:absolute; inset:0; width:100%; height:100%; margin:0; overflow:visible; }
  .model-portrait img { right:-4%; width:108%; height:58%; }
  .model-quote,.era-jazz .model-quote,.era-space .model-quote { top:53%; right:5%; width:48%; min-height:15%; }
  .model-examples { padding:22px 17px; }
  .model-examples > header { grid-template-columns:1fr; gap:15px; }
  .model-examples h3 { font-size:42px; }
  .prompt-instructions { grid-template-columns:1fr; }
  .prompt-instructions li { min-height:0; }
  .free-parlour-heading { grid-template-columns:1fr; gap:12px; }
  .chat-message { max-width:92%; }
  .chat-actions { align-items:flex-start; flex-direction:column; }
  .chat-actions button { align-self:flex-end; }
  .example-table-wrap { overflow:visible; border:0; }
  .model-examples table,.model-examples tbody { display:block; }
  .model-examples thead { display:none; }
  .model-examples tr { display:block; margin-top:14px; border:2px solid #18241e; }
  .model-examples td { display:block; padding:13px; border:0; }
  .model-examples td:first-child { background:#e5d7b4; }
  .model-examples td+td { border-top:2px solid #18241e; border-left:0; }
  .post-gallery-decor { grid-template-columns:1fr; gap:24px; min-height:0; padding:55px 0 90px; }
  .post-gallery-copy { min-height:210px; }
  .post-gallery-copy .sticker-api { display:block; top:76px; right:7%; bottom:auto; left:auto; }
  .post-gallery-copy .arrow-note { display:block; bottom:8px; left:18%; }
}

.model-backdrop-viewport,.model-portrait-viewport { position:absolute; inset:0; overflow:hidden; }
.model-backdrop-viewport { z-index:0; }
.model-portrait-viewport { z-index:3; }
.model-backdrop-track,.model-portrait-track { position:absolute; inset:0 auto 0 0; display:flex; width:400%; height:100%; will-change:transform; transition:transform .82s linear; }
.model-backdrop-track.is-instant,.model-portrait-track.is-instant { transition:none; }
.model-backdrop-slide,.model-portrait-slide { position:relative; flex:0 0 25%; width:25%; height:100%; overflow:hidden; }
.model-backdrop-slide:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(24,36,30,.13),transparent 55%,rgba(24,36,30,.08)); }
.model-backdrop-slide img { display:block; width:100%; height:100%; object-fit:cover; }
.model-portrait-slide img { position:absolute; right:0; bottom:0; display:block; width:50%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(6px 7px 0 rgba(24,36,30,.35)); }
.model-frame { --frame-core:84px; --frame-corner:115px; }
.frame-corner { background-image:url("assets/frame/ornate-corner-v4.png"); }
.frame-edge { background-position:9px center; }
.frame-corner:before,.frame-corner:after { content:none; }
.frame-edge-top,.frame-edge-bottom { left:calc(var(--frame-core) - 24px); right:calc(var(--frame-core) - 24px); }
.frame-edge-left,.frame-edge-right { width:calc(100cqh - var(--frame-core) - var(--frame-core) + 48px); }
@media (max-width:760px) {
  .model-frame { --frame-core:52px; --frame-corner:71px; }
  .model-portrait-slide img { right:-4%; width:108%; height:58%; filter:drop-shadow(4px 5px 0 rgba(24,36,30,.3)); }
  .model-portrait-slide .model-quote,.era-jazz .model-portrait-slide .model-quote,.era-space .model-portrait-slide .model-quote { top:53%; right:5%; width:48%; min-height:15%; }
}
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Portrait + speech-bubble alignment.
   The figure is the square the character is actually drawn in, so the bubble
   can be anchored to that character's mouth instead of the card corner.
   --fit evens out characters that sit smaller inside their own artwork. */
.model-portrait-figure { position:absolute; right:1.5%; bottom:0; width:48%; aspect-ratio:1; }
.model-portrait-slide img,
.model-portrait-figure img { position:absolute; inset:0; right:auto; bottom:auto; width:100%; height:100%; object-fit:contain; object-position:center bottom; transform:scale(var(--fit,1)); transform-origin:bottom center; filter:drop-shadow(6px 7px 0 rgba(24,36,30,.35)); }
.model-portrait-slide .model-quote {
  top:auto;
  right:calc(100% - var(--mouth-x) + 5%);
  bottom:calc(100% - var(--mouth-y) + 8%);
  left:auto;
  width:50%;
  min-height:0;
  transform:rotate(1deg);
}
.model-portrait-slide .model-quote:before,
.model-portrait-slide .model-quote:after {
  content:"";
  position:absolute;
  top:auto;
  left:auto;
  border:0;
  transform:none;
}
.model-portrait-slide .model-quote:before {
  right:-39px;
  bottom:-50px;
  width:46px;
  height:54px;
  background:#18241e;
  clip-path:polygon(0 0,100% 100%,42% 0);
}
.model-portrait-slide .model-quote:after {
  right:-31px;
  bottom:-41px;
  width:36px;
  height:45px;
  background:#fff7df;
  clip-path:polygon(0 0,100% 100%,40% 0);
}
@media (max-width:760px) {
  .model-portrait-figure { right:-2%; width:78%; }
  .model-portrait-slide .model-quote { right:calc(100% - var(--mouth-x) + 5%); bottom:calc(100% - var(--mouth-y) + 7%); width:56%; padding:12px; font-size:clamp(15px,4.6vw,22px); }
}

/* Travelling first-screen gallery + brass selector. */
:root { --selector-dock-height:126px; --selector-header-height:94px; }
.opening-screen {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  height:100svh;
  min-height:680px;
  padding:18px 0 calc(var(--selector-dock-height) + 16px);
}
.opening-hero { flex:0 0 auto; width:min(1160px,calc(100% - 44px)); padding:0; }
.opening-hero .hero-layout { max-width:none; }
.opening-hero .hero-copy { display:grid; grid-template-columns:auto minmax(280px,1fr) auto; align-items:center; gap:28px; }
.opening-hero h1 { font-size:clamp(47px,5vw,68px); line-height:.84; white-space:nowrap; }
.opening-hero .hero-subtitle { max-width:760px; margin:0; font-size:clamp(13px,1.25vw,17px); line-height:1.24; letter-spacing:-.025em; }
.opening-hero .squiggle-button { white-space:nowrap; }
.opening-screen .model-section { flex:1 1 auto; min-height:0; padding:14px 0 0; }
.opening-screen .model-card { height:100%; min-height:0; }
.opening-screen .model-main {
  left:4.2%;
  bottom:7.5%;
  width:39%;
  max-height:84%;
  padding:clamp(18px,2.4vh,28px) clamp(22px,2.7vw,34px);
  overflow:auto;
  background:rgba(255,247,223,.92);
  border-radius:18px 32px 25px 18px;
  clip-path:polygon(0 0,94% 0,100% 9%,97% 88%,92% 100%,0 100%);
  box-shadow:6px 7px 0 rgba(24,36,30,.52);
}
.opening-screen .model-main h2 { font-size:clamp(39px,4.7vw,66px); }
.opening-screen .model-main > p:not(.model-era) { margin:clamp(9px,1.5vh,15px) 0; font-size:clamp(12px,1.25vw,15px); line-height:1.27; }
.opening-screen .model-era { margin-bottom:10px; }
.opening-screen .model-license { margin-bottom:9px!important; }
.opening-screen .model-backdrop-track,
.opening-screen .model-portrait-track { transition-duration:1.12s; transition-timing-function:cubic-bezier(.65,0,.35,1); }

/* Full-bleed scene study: the backgrounds become the screen itself, as in
   proto/d-screens.html, while the information card remains on top. */
.opening-screen .model-section { width:100%; max-width:none; }
.opening-screen .model-card {
  border:0;
  border-radius:0;
  box-shadow:none;
}
.opening-screen .model-frame { display:none; }
.opening-screen .model-main {
  left:max(24px,calc((100vw - 1160px) / 2));
  width:min(440px,38vw);
}
.opening-screen .model-portrait-figure {
  right:2%;
  width:auto;
  height:100%;
  aspect-ratio:1;
}
.opening-screen .model-portrait-slide .model-quote-side {
  top:var(--mouth-y);
  right:calc(100% - var(--mouth-x) + 12%);
  bottom:auto;
  width:46%;
  transform:translateY(-50%) rotate(-1deg);
}
.opening-screen .model-portrait-slide .model-quote-side:before,
.opening-screen .model-portrait-slide .model-quote-side:after {
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
}
.opening-screen .model-portrait-slide .model-quote-side:before {
  right:-71px;
  width:74px;
  height:38px;
  background:#18241e;
  clip-path:polygon(0 18%,100% 50%,0 82%);
}
.opening-screen .model-portrait-slide .model-quote-side:after {
  right:-61px;
  width:64px;
  height:28px;
  background:#fff7df;
  clip-path:polygon(0 18%,100% 50%,0 82%);
}
.model-details { padding:calc(var(--selector-header-height) + 42px) 0 95px; }
.model-details .model-examples { margin-top:0; }

.era-section {
  position:fixed;
  z-index:60;
  top:0;
  right:0;
  left:0;
  height:var(--selector-dock-height);
  padding:9px 0 8px;
  border:0;
  background:linear-gradient(180deg,transparent,rgba(12,25,22,.11));
  transform:translateY(calc(100svh - var(--selector-dock-height)));
  transition:transform .58s cubic-bezier(.4,0,.2,1),height .36s ease,background .36s ease;
  will-change:transform;
}
.era-section.is-header {
  height:var(--selector-header-height);
  background:rgba(244,234,211,.94);
  box-shadow:0 5px 0 rgba(24,36,30,.22);
  backdrop-filter:blur(14px);
  transform:translateY(0);
}
.era-section > .wrap { height:100%; }
.era-control {
  --selector-progress:66.6667%;
  display:grid;
  grid-template-columns:142px minmax(0,1fr);
  grid-template-rows:17px minmax(33px,1fr) 28px;
  gap:2px 18px;
  width:min(970px,100%);
  height:100%;
  margin:auto;
  padding:7px 18px 7px;
  color:#2b2118;
  border:3px solid #392819;
  border-radius:19px;
  background:linear-gradient(100deg,#d3a551 0,#f2d994 10%,#bd8437 22%,#f4dfa0 50%,#b77a30 78%,#efd28b 92%,#b8792d 100%);
  box-shadow:inset 0 0 0 3px #fff0b4,inset 0 0 0 6px rgba(91,52,22,.56),6px 7px 0 #18241e;
}
.console-label { grid-column:1/-1; margin:0; color:#382a1d; font-size:7px; }
.console-label i { width:6px; height:6px; border-color:#382a1d; background:#d75f4d; box-shadow:0 0 0 2px #efd28b; }
.selector-status { grid-column:1; grid-row:2/4; align-self:center; min-width:0; padding:5px 11px 6px; border:2px solid #392819; border-radius:10px; background:#243a34; color:#fff0b4; box-shadow:inset 0 0 10px rgba(0,0,0,.48); }
.selector-status strong { display:block; font:900 26px/.8 var(--display); letter-spacing:-.04em; }
.selector-status span { display:block; margin-top:6px; overflow:hidden; font:500 8px/1.1 var(--mono); letter-spacing:.05em; text-overflow:ellipsis; white-space:nowrap; }
.time-lever {
  grid-column:2;
  grid-row:2;
  align-self:center;
  width:100%;
  height:36px;
  overflow:visible;
  aspect-ratio:auto;
  border:3px solid #392819;
  border-radius:999px;
  background:linear-gradient(#6f4b29 0 18%,#1c332e 19% 80%,#8f6335 81% 100%);
  box-shadow:inset 0 0 0 3px #ead189,inset 0 5px 8px rgba(0,0,0,.55),0 2px 0 rgba(255,244,189,.7);
}
.time-lever:after { content:none; }
.lever-travel { position:absolute; z-index:3; inset:0 18px; pointer-events:none; }
.lever-handle {
  position:absolute;
  top:50%;
  left:var(--selector-progress);
  width:18px;
  height:36px;
  border:2px solid #392819;
  border-radius:9px 9px 6px 6px;
  background:linear-gradient(90deg,#8a5725,#f6dc88 45%,#c88d38 68%,#72431e);
  box-shadow:2px 4px 0 rgba(39,24,15,.6);
  transform:translate(-50%,-50%);
  transition:left 1.12s cubic-bezier(.65,0,.35,1);
}
.lever-handle:before {
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  width:28px;
  height:20px;
  border:2px solid #392819;
  border-radius:50%;
  background:radial-gradient(circle at 42% 34%,#fff0a8 0 12%,#d8a34b 15% 55%,#7c481e 72% 100%);
  transform:translateX(-50%);
}
.lever-handle:after { content:""; position:absolute; right:2px; bottom:3px; left:2px; height:4px; border-radius:99px; background:#70401c; }
.era-control input[type=range] {
  position:absolute;
  z-index:4;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  transform:none;
  cursor:grab;
}
.era-control input[type=range]::-webkit-slider-runnable-track { height:100%; background:transparent; }
.era-control input[type=range]::-webkit-slider-thumb { width:36px; height:36px; margin:0; border:0; background:transparent; box-shadow:none; }
.era-control input[type=range]::-moz-range-track { height:100%; background:transparent; }
.era-control input[type=range]::-moz-range-thumb { width:36px; height:36px; border:0; background:transparent; box-shadow:none; }
.era-ticks { grid-column:2; grid-row:3; display:flex; justify-content:space-between; margin:0 10px; color:#392819; }
.era-ticks button { min-width:0; padding:2px 5px; color:inherit; border:0; border-radius:5px; background:transparent; cursor:pointer; font-family:var(--mono); }
.era-ticks button b { display:block; font-size:9px; }
.era-ticks button span { display:block; font-size:7px; letter-spacing:.03em; }
.era-ticks button[aria-current="true"] { background:#243a34; color:#fff0b4; box-shadow:2px 2px 0 #392819; }
.era-ticks button:focus-visible { outline:2px dashed #d75f4d; outline-offset:2px; }
.era-section.is-header .era-control { grid-template-rows:11px minmax(28px,1fr) 19px; padding-block:4px; }
.era-section.is-header .console-label { font-size:6px; }
.era-section.is-header .selector-status strong { font-size:21px; }
.era-section.is-header .selector-status span { display:none; }
.era-section.is-header .time-lever { height:30px; }
.era-section.is-header .lever-handle { height:31px; }
.era-section.is-header .lever-handle:before { top:-7px; width:24px; height:17px; }
.era-section.is-header .era-ticks button span { display:none; }

@media (max-width:760px) {
  :root { --selector-dock-height:110px; --selector-header-height:86px; }
  .opening-screen { height:auto; min-height:100svh; padding:14px 0 calc(var(--selector-dock-height) + 14px); }
  .opening-hero { width:calc(100% - 30px); }
  .opening-hero .hero-copy { display:block; }
  .opening-hero h1 { font-size:49px; }
  .opening-hero .hero-subtitle { margin:11px 0 12px; font-size:13px; }
  .opening-hero .squiggle-button { padding:9px 13px; }
  .opening-screen .model-section { min-height:670px; padding-top:12px; }
  .opening-screen .model-card { min-height:670px; }
  .opening-screen .model-main { top:30px; right:26px; bottom:auto; left:26px; width:auto; max-height:none; padding:32px 23px 22px; }
  .opening-screen .model-main h2 { font-size:clamp(42px,13vw,59px); }
  .opening-screen .model-portrait-figure { right:-3%; width:auto; height:62%; }
  .opening-screen .model-portrait-slide .model-quote { width:54%; }
  .model-details { padding-top:calc(var(--selector-header-height) + 28px); }
  .era-section { padding:7px 0 6px; }
  .era-control { grid-template-columns:68px minmax(0,1fr); grid-template-rows:13px minmax(31px,1fr) 23px; gap:1px 9px; padding:5px 9px; border-radius:14px; box-shadow:inset 0 0 0 2px #fff0b4,inset 0 0 0 5px rgba(91,52,22,.56),4px 5px 0 #18241e; }
  .console-label { justify-content:flex-start; font-size:6px; }
  .console-label span:first-child,.console-label i { display:none; }
  .selector-status { padding:5px 7px; }
  .selector-status strong { font-size:20px; }
  .selector-status span { display:none; }
  .time-lever { height:31px; }
  .lever-handle { height:31px; }
  .lever-handle:before { top:-7px; width:24px; height:17px; }
  .era-ticks { margin:0 2px; }
  .era-ticks button { padding:2px; }
  .era-ticks button b { font-size:8px; }
  .era-ticks button span { display:none; }
}

/* Simple in-flow selector. It is the final row of the opening screen and
   scrolls away normally; there is no fixed or sticky state. */
.opening-screen { padding-bottom:10px; }
.opening-screen > .era-section,
.opening-screen > .era-section.is-header {
  position:relative;
  z-index:6;
  top:auto;
  right:auto;
  left:auto;
  flex:0 0 104px;
  width:100%;
  height:104px;
  padding:7px 0 5px;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  transform:none;
  transition:none;
}
.opening-screen .era-control,
.opening-screen .era-section.is-header .era-control {
  grid-template-columns:122px minmax(0,1fr);
  grid-template-rows:14px minmax(31px,1fr) 25px;
  gap:1px 14px;
  width:min(850px,100%);
  padding:6px 14px 7px;
  border:2px solid #392819;
  border-radius:13px;
  background:#e7d4a3;
  box-shadow:inset 0 0 0 3px #f8e9bd,4px 5px 0 #18241e;
}
.opening-screen .console-label,
.opening-screen .era-section.is-header .console-label { justify-content:flex-start; gap:7px; color:#4b3928; font-size:6px; }
.opening-screen .console-label i {
  display:block;
  width:13px;
  height:13px;
  border:0;
  background:transparent url("assets/ui/selector/selector-pilot-light-trimmed.png") center/contain no-repeat;
  box-shadow:none;
}
.opening-screen .selector-status { padding:5px 9px; border-width:1px; border-radius:7px; box-shadow:inset 0 0 8px rgba(0,0,0,.42); }
.opening-screen .selector-status strong,
.opening-screen .era-section.is-header .selector-status strong { font-size:22px; }
.opening-screen .selector-status span,
.opening-screen .era-section.is-header .selector-status span { display:block; margin-top:4px; font-size:7px; }
.opening-screen .time-lever,
.opening-screen .era-section.is-header .time-lever {
  height:27px;
  border:2px solid #392819;
  background:#213b35;
  box-shadow:inset 0 4px 7px rgba(0,0,0,.45),0 1px 0 #fff0b4;
}
.opening-screen .time-lever:before,
.opening-screen .time-lever:after {
  content:"";
  position:absolute;
  z-index:2;
  top:50%;
  width:19px;
  height:29px;
  background:url("assets/ui/selector/selector-rail-end-trimmed.png") center/contain no-repeat;
  transform:translateY(-50%);
  pointer-events:none;
}
.opening-screen .time-lever:before { left:-8px; }
.opening-screen .time-lever:after { right:-8px; transform:translateY(-50%) scaleX(-1); }
.opening-screen .lever-travel { inset:0 16px; }
.opening-screen .lever-handle,
.opening-screen .era-section.is-header .lever-handle {
  width:30px;
  height:53px;
  border:0;
  border-radius:0;
  background:transparent url("assets/ui/selector/selector-knob-trimmed.png") center/contain no-repeat;
  box-shadow:none;
}
.opening-screen .lever-handle:before,
.opening-screen .lever-handle:after { content:none; }
.opening-screen .era-ticks { margin:0 8px; }
.opening-screen .era-ticks button { padding:1px 5px; }
.opening-screen .era-ticks button b { font-size:8px; }
.opening-screen .era-ticks button span,
.opening-screen .era-section.is-header .era-ticks button span { display:block; font-size:6px; }
.opening-screen .era-ticks button[aria-current="true"] { box-shadow:1px 2px 0 #392819; }
.model-details { padding-top:58px; }

@media (max-width:760px) {
  .opening-screen { padding-bottom:8px; }
  .opening-screen > .era-section,
  .opening-screen > .era-section.is-header { flex-basis:94px; height:94px; padding:5px 0 3px; }
  .opening-screen .era-control,
  .opening-screen .era-section.is-header .era-control { grid-template-columns:62px minmax(0,1fr); grid-template-rows:11px minmax(28px,1fr) 21px; gap:1px 8px; padding:4px 8px 5px; }
  .opening-screen .console-label span:first-child { display:none; }
  .opening-screen .selector-status { padding:4px 6px; }
  .opening-screen .selector-status strong,
  .opening-screen .era-section.is-header .selector-status strong { font-size:18px; }
  .opening-screen .selector-status span { display:none; }
  .opening-screen .time-lever,
  .opening-screen .era-section.is-header .time-lever { height:24px; }
  .opening-screen .lever-handle,
  .opening-screen .era-section.is-header .lever-handle { width:25px; height:44px; }
  .opening-screen .era-ticks button span,
  .opening-screen .era-section.is-header .era-ticks button span { display:none; }
}

/* Expansive opening masthead that settles into a slim, persistent navigation
   strip. The model selector below remains normal, non-sticky page content. */
.opening-screen { padding-top:190px; }
.opening-hero {
  position:fixed;
  z-index:55;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:178px;
  padding:24px 0 20px;
  color:var(--ink);
  background:color-mix(in srgb,var(--cream) 94%,transparent);
  border-bottom:2px solid color-mix(in srgb,var(--ink) 20%,transparent);
  backdrop-filter:blur(12px);
  transition:height .44s cubic-bezier(.2,.75,.2,1),padding .44s cubic-bezier(.2,.75,.2,1),background-color .35s ease,box-shadow .35s ease;
}
.opening-hero .hero-layout {
  width:min(1160px,calc(100% - 44px));
  height:100%;
  margin:auto;
}
.opening-hero .hero-copy {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"title action" "subtitle subtitle";
  align-items:center;
  gap:13px 28px;
  height:100%;
}
.opening-hero h1 {
  grid-area:title;
  font-size:clamp(66px,7.2vw,100px);
  transition:font-size .44s cubic-bezier(.2,.75,.2,1),letter-spacing .44s ease;
}
.opening-hero .hero-subtitle {
  grid-area:subtitle;
  max-width:940px;
  max-height:58px;
  overflow:hidden;
  margin:0;
  opacity:1;
  font-size:clamp(15px,1.45vw,19px);
  transition:max-height .28s ease,opacity .2s ease,transform .35s ease;
}
.opening-hero .squiggle-button { grid-area:action; justify-self:end; }
.opening-hero.is-compact {
  height:70px;
  padding:10px 0;
  background:color-mix(in srgb,var(--cream) 97%,transparent);
  box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 18%,transparent);
}
.opening-hero.is-compact .hero-copy { grid-template-areas:"title action"; }
.opening-hero.is-compact h1 { font-size:35px; letter-spacing:-.07em; }
.opening-hero.is-compact .hero-subtitle {
  max-height:0;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
}
.opening-hero.is-compact .squiggle-button { padding:9px 14px; box-shadow:3px 3px 0 var(--pink); }
.opening-screen .model-portrait-figure { right:5%; width:auto; height:60%; }

@media (max-width:760px) {
  .opening-screen { padding-top:194px; }
  .opening-hero { height:184px; padding:20px 0 17px; }
  .opening-hero .hero-layout { width:calc(100% - 30px); }
  .opening-hero .hero-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:11px 12px; }
  .opening-hero h1 { font-size:clamp(48px,15vw,63px); }
  .opening-hero .hero-subtitle { margin:0; font-size:13px; line-height:1.22; }
  .opening-hero .squiggle-button { padding:9px 12px; }
  .opening-hero.is-compact { height:62px; padding:8px 0; }
  .opening-hero.is-compact h1 { font-size:29px; }
  .opening-hero.is-compact .squiggle-button { padding:8px 10px; font-size:9px; }
  .opening-screen .model-portrait-figure { right:-2%; height:60%; }
}