@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Libre+Caslon+Display&family=Newsreader:ital,opsz,wght@1,6..72,400&display=swap";:root{font-family:DM Sans,sans-serif;color:#173e3a;background:#e8e3d8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}.pane-site{--radius: 24px;--glass: 18px;--glass-alpha: .42;--scale: 1;overflow:hidden;background:#e9e3d9}.canvas{min-height:100svh;position:relative;overflow:hidden;isolation:isolate;color:#173e3a}.atmosphere{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-3;transition:object-position .8s,filter .8s}.theme-0 .atmosphere{object-position:8% center;filter:saturate(.72) brightness(1.05)}.theme-1 .atmosphere{object-position:52% center;filter:saturate(.9)}.theme-2 .atmosphere{object-position:98% center;filter:saturate(1.18) brightness(.7)}.canvas:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;background:#f8f4eb2e;pointer-events:none;transition:background .8s}.theme-2 .canvas:after{background:#0334305c}header{height:74px;padding:0 30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(21,64,59,.16);font-size:12px;position:relative;z-index:10}.logo{font-weight:500;letter-spacing:.22em}nav{display:flex;gap:26px}header>div{justify-self:end;display:flex;align-items:center;gap:18px}header>div a{display:inline-flex}.theme-rail{position:absolute;left:28px;top:130px;z-index:6;display:grid;gap:8px}.theme-rail button{width:150px;padding:11px 14px;border:1px solid rgba(22,65,59,.12);border-radius:999px;background:#ffffff52;-webkit-backdrop-filter:blur(var(--glass));backdrop-filter:blur(var(--glass));color:#355b56;text-align:left;cursor:pointer}.theme-rail button i{display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:#9fbab2}.theme-rail button.active{background:#ffffffb3;color:#0e5b54;box-shadow:0 12px 34px #1e463f1f}.theme-rail button.active i{background:#0c6f65}.headline-stage{width:min(920px,78vw);margin:9vh auto 0;text-align:center;position:relative;z-index:3}.hint{min-height:20px;display:flex;justify-content:center;gap:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.68}.hint strong{color:#08746a}.theme-2 .hint strong{color:#aef8e7}.drag-zones{width:min(470px,70vw);margin:14px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.drag-zones span{padding-top:7px;border-top:1px solid rgba(17,82,75,.22);color:#76908c;font-size:9px;letter-spacing:.1em;text-transform:uppercase;transition:color .25s,border-color .25s,transform .25s}.drag-zones span.active{color:#08746a;border-color:#08746a;transform:translateY(-2px)}.theme-2 .drag-zones span{color:#7fa9a1;border-color:#c8fff240}.theme-2 .drag-zones span.active{color:#c8fff2;border-color:#c8fff2}h1{margin:22px 0 24px;font-family:Libre Caslon Display,serif;font-size:calc(clamp(54px,7.6vw,122px) * var(--scale));line-height:.82;letter-spacing:-.055em;font-weight:400}h1 span,h1 strong{display:block}h1 strong{color:#0d6b62;font-family:Newsreader,serif;font-weight:400;font-style:italic;cursor:grab;touch-action:none;text-shadow:0 18px 35px rgba(10,65,59,.12);outline:none}.theme-0 h1 strong{color:#7b482f}.theme-2 h1 strong,.theme-2 .canvas{color:#d7fff4}.theme-2 h1 span{color:#f4fff9}.lead{max-width:650px;margin:auto;font-size:14px;line-height:1.65;color:#496a66}.theme-2 .lead{color:#c1d9d4}.token-pane,.component-specimen{position:absolute;z-index:5;padding:18px;border:1px solid rgba(255,255,255,.7);border-radius:var(--radius);background:rgba(255,255,255,var(--glass-alpha));-webkit-backdrop-filter:blur(var(--glass));backdrop-filter:blur(var(--glass));box-shadow:0 22px calc(35px + var(--glass)) #2c514a2e;touch-action:none;transition:border-radius .25s,background .25s,box-shadow .25s,backdrop-filter .25s}.token-pane{right:4vw;top:17vh;width:230px}.pane-heading{display:flex;justify-content:space-between;margin-bottom:16px;font-size:11px;letter-spacing:.08em}.token-pane label{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px;font-size:11px}.token-pane input{grid-column:1 / -1;width:100%;accent-color:#0a7266}.token-pane output{min-width:44px;color:#0b6d63;font-weight:500;text-align:right}.component-specimen{left:6vw;bottom:10vh;width:280px;transition:gap .5s,transform .5s}.component-label{margin-bottom:18px;font-size:9px;letter-spacing:.12em;opacity:.58}.component-specimen button{width:100%;min-height:48px;display:flex;justify-content:center;align-items:center;gap:7px;border:0;border-radius:calc(var(--radius) * .66);background:#0d6f64;color:#fff}.component-specimen small{display:block;margin-top:12px;color:#607c77}.component-specimen.exploded{transform:scale(1.08)}.component-specimen.exploded button{transform:translateY(-16px);box-shadow:0 18px #0d6f6429,0 36px #0d6f6414}.anatomy-toggle{position:absolute;left:calc(6vw + 295px);bottom:13vh;z-index:6;padding:11px 15px;border:1px solid rgba(22,65,59,.2);border-radius:999px;background:#ffffff75;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#174e47;cursor:pointer}.canvas-footer{position:absolute;bottom:0;left:0;right:0;min-height:54px;padding:0 30px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(21,64,59,.15);font-size:9px;letter-spacing:.06em;opacity:.66}.proof{min-height:86vh;padding:13vh 7vw;display:grid;grid-template-columns:.35fr 1fr;grid-template-rows:auto 1fr;gap:30px 7vw;background:#f5f1e9}.proof>p{color:#0e7065;font-size:10px;letter-spacing:.15em}.proof h2{grid-column:2;margin:0;max-width:900px;font:400 clamp(58px,8vw,130px)/.86 "Libre Caslon Display",serif;letter-spacing:-.055em}.proof>div{grid-column:2;max-width:520px;font-size:17px;line-height:1.65}.proof a{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding-bottom:5px;border-bottom:1px solid #0a6b61}.reference{padding:8vw;background:#0f4e47;color:#d9f1eb}.reference img{display:block;width:min(1100px,100%);margin:auto;border-radius:24px;box-shadow:0 35px 80px #00000040}.reference p{margin:35px auto 0;max-width:1100px;font-size:10px;letter-spacing:.16em}@media(max-width:820px){header{grid-template-columns:1fr auto;padding:0 18px}nav{display:none}.canvas{min-height:1180px}.theme-rail{top:90px;left:16px;right:16px;grid-template-columns:repeat(3,1fr)}.theme-rail button{width:auto;font-size:0;text-align:center}.theme-rail button i{margin:0}.headline-stage{width:calc(100% - 32px);margin-top:150px}.hint{flex-wrap:wrap;gap:6px 10px}.drag-zones{width:100%}h1{font-size:calc(clamp(44px,14vw,60px) * var(--scale));line-height:.88}.token-pane{position:relative;top:auto;bottom:auto;right:auto;width:calc(100% - 32px);margin:38px 16px 0}.component-specimen{position:relative;left:auto;bottom:auto;width:calc(100% - 32px);margin:16px 16px 100px;padding:16px}.component-specimen small{display:block}.anatomy-toggle{display:none}.proof{grid-template-columns:1fr;padding:90px 20px}.proof h2,.proof>div{grid-column:1}.reference{padding:70px 16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}