*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:#fff;color:#24231f;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #c18435;outline-offset:5px}button{color:inherit}button:disabled{cursor:wait}button[hidden],article[hidden]{display:none}.page{max-width:1280px;margin:auto;padding:0 56px;opacity:0;transition:opacity .45s ease}.header{height:100px;display:flex;align-items:center;border-bottom:1px solid #e7e5e0;gap:40px}.wordmark{font-weight:700;font-size:22px;letter-spacing:-1px}.wordmark span{font-size:10px;vertical-align:super;margin-left:3px}.header nav{display:flex;gap:32px;margin-left:auto;font-size:14px}.header nav a:hover{color:#b47d38}.replay{border:1px solid #e5e2dc;background:white;width:35px;height:35px;border-radius:50%;font-size:22px}.hero{position:relative;display:grid;grid-template-columns:1.2fr 1fr;min-height:580px;padding:70px 0 95px;align-items:center}.eyebrow{font-family:monospace;font-size:11px;letter-spacing:2px;line-height:1.8;margin:0 0 25px;color:#77736c}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(90px,10vw,144px);font-weight:400;letter-spacing:-8px;line-height:.9;margin:0}h1 em{font-weight:400}h1 .period{display:inline-block;width:13px;height:13px;background:#d49a51;border-radius:50%;margin-left:10px}.intro{display:flex;align-items:center;gap:22px;margin-top:33px}.intro .rule{width:35px;height:1px;background:#c7975c}.intro p{margin:0;font-size:15px;color:#77736c;line-height:1.65}.hero-art{position:relative;justify-self:center;align-self:center;width:100%;max-width:335px;transform:rotate(-3deg)}.hero-art img{display:block;width:100%;height:auto}.art-caption{position:absolute;bottom:-16px;right:7px;font-family:Georgia,serif;font-style:italic;font-size:16px;color:#77736c;transform:rotate(3deg)}.scroll{position:absolute;bottom:28px;left:0;font-size:12px;display:flex;gap:45px}.scroll span{color:#ba823d}.collection{border-top:1px solid #34332f;padding-top:42px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px;gap:20px}.section-heading .eyebrow{margin-bottom:10px}h2{font-family:Georgia,serif;font-weight:400;font-size:37px;line-height:1.18;letter-spacing:-1.2px;margin:0}h2>span{color:#c18a45}.filters{display:flex;gap:4px}.filters button{border:0;background:transparent;padding:9px 13px;border-radius:20px;font-size:13px;color:#76716a}.filters .active{background:#24231f;color:#fff}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:35px 25px}.card.featured{grid-row:span 2}.preview{height:210px;border-radius:8px;background:#f5f5f3;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.featured .preview{height:494px;background:#f7f6f2}.preview-label{position:absolute;left:20px;top:18px;font:10px monospace;letter-spacing:1.5px;color:#8f8b83;z-index:1}.bear-preview video{width:100%;max-width:390px;mix-blend-mode:multiply}.play-button{position:absolute;bottom:20px;left:20px;border:1px solid #dad5cc;background:transparent;border-radius:22px;font-size:12px;padding:10px 15px;display:flex;gap:25px}.card-info{display:flex;align-items:start;justify-content:space-between;gap:15px;padding-top:15px}h3{font-size:16px;letter-spacing:-.35px;margin:0 0 6px;font-weight:600}.card-info p{margin:0;font-size:12px;color:#858078;line-height:1.6}.text-link{border:0;background:none;font-size:12px;padding:2px 0;white-space:nowrap}.text-link:hover{text-decoration:underline;text-underline-offset:5px}.wide{grid-column:1/-1}.wide .preview{height:170px}.save-button{min-width:165px;display:flex;justify-content:space-between;gap:25px;align-items:center;background:#282723;color:white;border:1px solid #282723;border-radius:8px;padding:14px 18px;font-size:13px;box-shadow:0 4px 8px #00000012;transition:background .2s,transform .12s}.save-button:active{transform:scale(.97)}.save-button.done{background:#546a4c;border-color:#546a4c}.tabs{display:flex;padding:5px;background:#e9e8e4;border:1px solid #e2e0d9;border-radius:10px}.tabs button{width:80px;padding:10px;border:0;background:transparent;border-radius:6px;font-size:13px;color:#888078;transition:background .2s,color .2s,box-shadow .2s}.tabs button[aria-selected=true]{background:white;box-shadow:0 2px 5px #0000000d;color:#282723}.toggle-row{display:flex;align-items:center;gap:65px;font-size:14px}.toggle{width:57px;height:33px;padding:4px;border:0;border-radius:30px;background:#d9d6cf;transition:background .25s}.toggle>span{display:block;width:25px;height:25px;background:white;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform .3s cubic-bezier(.2,.8,.2,1)}.toggle[aria-checked=true]{background:#c6914c}.toggle[aria-checked=true]>span{transform:translateX(24px)}.collection-note{font-size:12px;color:#8c867e;line-height:1.6;margin:26px 0 0}.about{display:grid;grid-template-columns:1fr 2fr .5fr;gap:30px;border-top:1px solid #ddd9d2;margin-top:80px;padding:55px 0 70px}.about h2{font-size:34px}.about p:not(.eyebrow){font-size:15px;line-height:1.8;color:#77716a;max-width:470px;margin:20px 0 0}.about-mark{font-family:Georgia,serif;font-style:italic;font-size:60px;align-self:end;color:#c8934d;justify-self:end}footer{border-top:1px solid #34332f;padding:25px 0 40px;display:flex;gap:30px;align-items:center}footer .wordmark{font-size:17px}footer span{margin-left:auto;font:10px monospace;letter-spacing:1px;color:#99918a}footer>a:last-child{font-size:12px}.loader{position:fixed;inset:0;z-index:20;background:white;display:grid;place-items:center;opacity:1;transition:opacity .45s ease}.loader video{display:block;width:min(260px,76vw);aspect-ratio:5/4;object-fit:contain;transform:translateY(-10px)}body.ready .page{opacity:1}body.ready .loader{opacity:0;pointer-events:none}.loader[hidden]{display:none}dialog{border:1px solid #dfdcd6;border-radius:12px;padding:25px;max-width:800px;width:calc(100% - 36px);max-height:85vh;color:#24231f}dialog::backdrop{background:#16140f66;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top h2{font-size:28px}.dialog-top button{border:0;background:none;font-size:30px}dialog p{font-size:13px;color:#777}pre{background:#f5f4f1;padding:18px;max-height:50vh;overflow:auto;font-size:12px;line-height:1.7}.dialog-actions{display:flex;gap:10px}.dialog-actions button{border:1px solid #d6d1c8;background:white;border-radius:6px;padding:10px 15px;font-size:13px}@media(max-width:760px){.page{padding:0 24px}.header{height:80px;gap:20px}.wordmark{font-size:20px}.header nav{gap:15px;font-size:12px}.replay{display:none}.hero{min-height:500px;padding:60px 0 75px;grid-template-columns:1.3fr 1fr}h1{font-size:90px;letter-spacing:-5px}.hero-art{max-width:210px}.art-caption{display:none}.section-heading{align-items:start;flex-direction:column}h2{font-size:32px}.gallery{gap:30px 15px}.featured .preview{height:360px}.preview{height:150px}.card-info{flex-direction:column;gap:8px}.about{grid-template-columns:1fr}.about-mark{display:none}.about .eyebrow{margin-bottom:0}.tabs button{width:55px}.save-button{min-width:140px;padding:12px}.preview-label{font-size:9px;left:12px}.collection-note{font-size:12px}}@media(max-width:480px){.header nav a:first-child{display:none}.hero{min-height:450px}h1{font-size:77px}.hero-art{width:160px;margin-left:-16px}.intro{gap:12px}.intro p{font-size:13px}.intro .rule{width:20px}.eyebrow{font-size:10px;letter-spacing:1px}.gallery{grid-template-columns:1fr}.card.featured{grid-row:auto}.featured .preview{height:310px}.preview{height:210px}.wide{grid-column:auto}.card-info{flex-direction:row}.about{margin-top:55px}.about h2{font-size:30px}footer span{display:none}footer a:last-child{margin-left:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* Editorial portfolio */
:root{--paper:#faf9f6;--ink:#292823;--muted:#77736b;--line:#dedbd4;--amber:#b77637}body{background:var(--paper);color:var(--ink)}.page{max-width:1600px;padding:0 6vw}.header{height:104px;border:0}.wordmark{font-family:Georgia,serif;font-size:27px;font-weight:400;letter-spacing:-1.3px}.header nav{gap:35px;font-size:14px}.replay{background:transparent;border-color:var(--line);width:36px;height:36px}.hero{display:block;padding:65px 0 68px;min-height:0}.hero-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:42px}.eyebrow,.edition{font:11px/1.6 monospace;letter-spacing:1.3px;color:var(--muted);margin:0}.hero h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(64px,8.6vw,138px);line-height:1.04;letter-spacing:-.075em;font-weight:500;margin-left:-.065em}.hero h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em;color:var(--amber)}.hero-bottom{display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:end;margin-top:55px;gap:24px}.hero-index{font:12px monospace;color:var(--muted)}.hero-bottom p{margin:0;font-size:17px;line-height:1.65;letter-spacing:-.3px}.scroll{position:static;justify-self:end;display:flex;gap:36px;align-items:center;font-size:14px}.scroll span{font-size:28px;color:var(--ink)}.collection{border-top:1px solid var(--line);padding-top:33px}.section-heading{margin-bottom:28px}.section-heading .eyebrow{margin-bottom:8px}h2{font-family:Arial,sans-serif;font-size:28px;letter-spacing:-1px;font-weight:500}.filters button{font-size:14px;padding:8px 12px;border-radius:0}.filters .active{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:8px}.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}.card.featured{grid-column:1/-1;grid-row:auto}.preview{height:270px;background:#efeeea;border-radius:2px}.featured .preview{height:480px;background:#f0ece3;justify-content:flex-end;padding-right:8%;isolation:isolate}.preview-label{font-size:11px;left:28px;top:25px;letter-spacing:1px;color:#777066}.specimen-title{position:absolute;left:6%;top:100px;font:400 clamp(60px,6vw,94px)/.95 Georgia,serif;letter-spacing:-5px;z-index:1}.specimen-title em{color:var(--amber);font-weight:400}.bear-preview video{width:48%;max-width:490px;mix-blend-mode:multiply}.play-button{left:6%;bottom:45px;border:0;border-bottom:1px solid #a9a091;border-radius:0;padding:10px 0;font-size:14px;gap:60px}.card-info{padding-top:18px;align-items:center}.card-info h3{font-size:18px;font-weight:500;letter-spacing:-.5px;margin-bottom:7px}.card-info p{font-size:13px;color:var(--muted)}.text-link{font-size:13px}.wide{grid-column:auto}.wide .preview{height:270px}.toggle-row{gap:25px}.save-button{font-size:14px}.tabs button{font-size:14px;width:65px}.collection-note{font-size:14px;margin-top:32px}.about{margin-top:100px;padding:65px 0 85px;grid-template-columns:1fr 2fr .8fr;gap:24px;align-items:start}.about h2{font-size:clamp(25px,3vw,42px);line-height:1.15;letter-spacing:-1.4px}.about h2 em{font-family:Georgia,serif;color:var(--amber);font-weight:400}.about p:not(.eyebrow){font-size:16px;line-height:1.8;max-width:480px}.about-bear{width:100%;height:auto;max-width:150px;align-self:end;justify-self:end}footer{border-color:var(--line);padding:30px 0 45px}footer .wordmark{font-size:24px}footer span,footer>a:last-child{font-size:12px}a,button{transition:color .2s,background .2s}a:hover{color:var(--amber)}.preview{transition:background .3s}.header nav a{position:relative}.header nav a:after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .25s}.header nav a:hover:after{right:0}
@media(min-width:1700px){.page{padding:0 100px}}@media(max-width:1000px){.edition{display:none}.hero{padding-top:45px}.hero h1{font-size:9vw}.hero-bottom{grid-template-columns:.4fr 1.5fr 1fr}.gallery{gap:38px 16px}.preview,.wide .preview{height:225px}.preview-label{font-size:10px;left:17px}.card-info{align-items:start;flex-direction:column}.toggle-row{gap:15px}.tabs button{width:54px}.about{grid-template-columns:.7fr 2fr .6fr}.featured .preview{height:390px}.specimen-title{top:90px}.play-button{bottom:30px}}
@media(max-width:700px){.page{padding:0 24px}.header{height:80px;gap:20px}.header .wordmark{font-size:24px}.header nav{gap:19px;margin-left:auto}.header nav a:first-child{display:none}.replay{display:block;width:30px;height:30px;font-size:18px;flex-shrink:0}.hero{padding:43px 0 45px}.hero-top{margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:1px}.hero h1{font-size:clamp(45px,10vw,70px);line-height:1.08}.hero-bottom{grid-template-columns:1fr;gap:25px;margin-top:32px}.hero-index{display:none}.hero-bottom p{font-size:16px}.scroll{justify-self:start;gap:30px}.section-heading{gap:20px}.section-heading h2{font-size:26px}.filters button{padding-left:0;padding-right:22px;font-size:13px}.gallery{grid-template-columns:1fr}.featured .preview{height:380px;display:flex;align-items:end;justify-content:end;padding:0 10px 15px}.specimen-title{left:24px;top:57px;font-size:58px;letter-spacing:-3px}.bear-preview video{width:75%;max-width:300px}.play-button{left:24px;bottom:22px;font-size:12px;gap:15px}.preview-label{top:20px;left:24px;font-size:10px}.preview,.wide .preview{height:240px}.card-info{flex-direction:row;gap:12px}.card-info h3{font-size:16px}.card-info p{font-size:12px}.text-link{font-size:12px}.about{grid-template-columns:1fr;margin-top:60px;padding:40px 0 50px}.about h2{font-size:32px}.about-bear{display:none}.about p:not(.eyebrow){font-size:15px}.collection-note{font-size:13px}.tabs button{width:80px}footer .wordmark{font-size:22px}.header nav a{font-size:13px}}
/* The interactive mascot leads the homepage. */
.bear-hero{padding:32px 0 40px}.bear-hero .hero-top{margin-bottom:0}.bear-hero-main{display:grid;grid-template-columns:.75fr 1.6fr;align-items:center;min-height:600px;gap:15px}.bear-introduction{padding:80px 0 25px;position:relative;z-index:1}.bear-hero h1{font-size:clamp(58px,6vw,94px);line-height:.98;letter-spacing:-.06em;margin:0 0 28px}.bear-introduction>p{font-size:16px;line-height:1.7;color:#77736b;margin:0 0 35px}.bear-introduction .scroll{justify-self:start;width:max-content;gap:35px}.bear-center{min-width:0;position:relative;display:flex;align-items:center;flex-direction:column}.bear-hero #stage{position:relative;width:100%;height:clamp(460px,62vh,700px);touch-action:pan-y;cursor:grab;outline-offset:-12px}.bear-hero #stage:active{cursor:grabbing}.bear-hero #stage:focus-visible{outline:2px solid #b77637}.bear-hero canvas{display:block;width:100%;height:100%}.bear-hero #fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(85%,540px);height:auto;pointer-events:none}.bear-hero #fallback[hidden]{display:none}.bear-hero #status{position:absolute;bottom:5px;left:10%;right:10%;text-align:center;font-size:13px;color:#77736b}.bear-hero #status:empty{display:none}.bear-invitation{margin:0;color:#8a8174;font:italic 17px Georgia,serif}.touch-invitation{display:none}@media(hover:none){.desktop-invitation{display:none}.touch-invitation{display:inline}}@media(min-width:1500px){.bear-hero-main{min-height:700px}}@media(max-width:760px){.bear-hero{padding:25px 0 35px}.bear-hero-main{grid-template-columns:1fr;gap:0;min-height:0}.bear-center{grid-row:1}.bear-hero #stage{height:clamp(320px,49svh,480px)}.bear-introduction{padding:25px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;align-items:center}.bear-hero h1{font-size:54px;margin:0}.bear-introduction>p{font-size:14px;margin:0;line-height:1.6}.bear-introduction .scroll{font-size:13px;grid-column:1/-1;margin-top:12px}.bear-invitation{font-size:15px}.bear-hero .hero-top{margin-bottom:5px}.bear-hero .edition{display:none}}@media(max-width:380px){.bear-hero h1{font-size:46px}.bear-introduction>p{font-size:13px}}
/* Seasonal atmosphere is clipped to the opening hero only. */
.bear-hero{isolation:isolate;overflow:hidden}.bear-hero .hero-top,.bear-hero-main{position:relative;z-index:1}.seasonal-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none}.honey-stream{position:absolute;top:-13px;width:28px;height:100%;--cycle:18s;--delay:-4s}.stream-one{left:2%;--cycle:21s;--delay:-6s;width:23px}.stream-two{left:46%;--cycle:25s;--delay:-13s;width:20px}.stream-three{right:2%;--cycle:19s;--delay:-2s;width:29px}.strand{position:absolute;top:0;width:100%;height:145px;transform-origin:50% 0;animation:honey-grow var(--cycle) var(--delay) infinite cubic-bezier(.42,0,.58,1);opacity:.85}.droplet{position:absolute;top:130px;left:14%;width:72%;height:auto;animation:honey-fall var(--cycle) var(--delay) infinite linear;opacity:0}.fall-leaf{position:absolute;left:var(--x);top:0;width:var(--size);animation:leaf-fall var(--duration) var(--offset) infinite linear;opacity:0}.fall-leaf img{display:block;width:100%;height:auto;animation:leaf-turn var(--sway,7s) var(--offset) infinite ease-in-out alternate}.leaf-1{--x:7%;--size:42px;--duration:28s;--offset:-7s}.leaf-2{--x:39%;--size:34px;--duration:33s;--offset:-22s;--sway:9s}.leaf-3{--x:93%;--size:49px;--duration:30s;--offset:-12s}.leaf-4{--x:53%;--size:30px;--duration:37s;--offset:-3s}.leaf-5{--x:84%;--size:36px;--duration:32s;--offset:-26s;--sway:10s}.leaf-6{--x:20%;--size:25px;--duration:39s;--offset:-18s;--sway:8s}@keyframes honey-grow{0%,15%{transform:scaleY(.4)}48%{transform:scaleY(1)}55%{transform:scaleY(1.17)}60%,100%{transform:scaleY(.4)}}@keyframes honey-fall{0%,53%{opacity:0;transform:translateY(0) scale(.75,1)}55%{opacity:.85;transform:translateY(16px) scale(.8,1.15)}62%{opacity:.85;transform:translateY(75px) scale(.9,1.1)}76%{opacity:.75;transform:translateY(330px) scale(1,.95)}89%{opacity:0;transform:translateY(710px) scale(1,.95)}100%{opacity:0;transform:translateY(710px)}}@keyframes leaf-fall{0%{transform:translate3d(-12px,-90px,0);opacity:0}8%{opacity:.75}30%{transform:translate3d(22px,200px,0)}55%{transform:translate3d(-18px,425px,0);opacity:.75}80%{transform:translate3d(18px,640px,0);opacity:.6}100%{transform:translate3d(-9px,820px,0);opacity:0}}@keyframes leaf-turn{from{transform:rotate(-28deg) rotateY(-35deg)}to{transform:rotate(32deg) rotateY(35deg)}}.seasonal-scene *{animation-play-state:paused}.bear-hero.season-active .seasonal-scene *{animation-play-state:running}@media(max-width:760px){.leaf-4,.leaf-6,.stream-two{display:none}.leaf-1{--x:3%;--size:30px}.leaf-2{--x:88%;--size:26px}.leaf-3{--x:90%;--size:34px}.leaf-5{--x:6%;--size:25px}.stream-one{width:17px}.stream-three{width:19px}.strand{height:110px}.droplet{top:95px}}@media(prefers-reduced-motion:reduce){.seasonal-scene{display:none}}
/* Quieter seasonal composition: short honey beads and a few spacious leaves. */
.stream-two,.leaf-2,.leaf-4,.leaf-6{display:none}.stream-one{left:1%;width:36px;--cycle:24s;--delay:-5s}.stream-three{right:2%;width:30px;--cycle:29s;--delay:-16s}.strand{height:68px;opacity:.64}.droplet{top:56px;width:50%;left:25%;filter:saturate(.78)}.leaf-1{--x:7%;--size:38px;--duration:39s;--offset:-10s}.leaf-3{--x:92%;--size:42px;--duration:43s;--offset:-25s}.leaf-5{--x:46%;--size:26px;--duration:47s;--offset:-5s}.fall-leaf{filter:saturate(.65);opacity:.6}.bear-hero #status{bottom:28px;font:italic 15px Georgia,serif;color:#a76e35}.bear-invitation{font:13px Arial,sans-serif;letter-spacing:.1px}@keyframes honey-grow{0%,12%{transform:scaleY(.6)}48%{transform:scaleY(.9)}55%{transform:scaleY(1)}63%,100%{transform:scaleY(.6)}}@media(max-width:760px){.stream-one{width:26px}.stream-three{width:24px}.strand{height:55px}.droplet{top:44px}.leaf-5{display:none}.bear-hero #status{bottom:4px}}
/* Honey has visible weight; leaf positions are now driven by a shared breeze. */
.stream-one{left:1.5%;width:64px;--cycle:17s;--delay:-7s}.stream-three{right:3%;width:54px;--cycle:22s;--delay:-12s}.strand{height:195px;opacity:.96;filter:saturate(.92)}.droplet{top:170px;width:62%;left:19%;filter:none}.fall-leaf{display:block;animation:none!important;top:0;left:0;will-change:transform;filter:saturate(.85);opacity:0}.fall-leaf img{animation:none!important;will-change:transform}.leaf-1{width:52px}.leaf-2{width:35px}.leaf-3{width:62px}.leaf-4{width:29px}.leaf-5{width:43px}.leaf-6{width:34px}@keyframes honey-grow{0%,10%{transform:scaleY(.65)}48%{transform:scaleY(.98)}55%{transform:scaleY(1.08)}63%,100%{transform:scaleY(.65)}}@keyframes honey-fall{0%,53%{opacity:0;transform:translateY(0) scale(.75,1)}55%{opacity:.95;transform:translateY(25px) scale(.82,1.12)}63%{opacity:.95;transform:translateY(115px) scale(.95,1.05)}79%{opacity:.85;transform:translateY(400px) scale(1,.98)}92%,100%{opacity:0;transform:translateY(760px) scale(1,.98)}}@media(max-width:760px){.stream-one{width:42px}.stream-three{width:36px}.strand{height:125px}.droplet{top:110px}.leaf-4,.leaf-6{display:none}.leaf-1{width:36px}.leaf-2{width:27px}.leaf-3{width:44px}.leaf-5{display:block;width:31px}}@media(prefers-reduced-motion:reduce){.seasonal-scene{display:none}}
.honey-stream{display:none!important}.continuous-honey{position:absolute;left:0;top:0;height:auto;will-change:transform;pointer-events:none}.bear-hero #stage{cursor:pointer}.bear-hero #stage:active{cursor:pointer}.leaf-2,.leaf-4,.leaf-6{display:block}@media(max-width:760px){.leaf-6,.leaf-7,.leaf-8,.leaf-9,.leaf-10{display:none}}
/* Separate native controls follow the drawn bear at every viewport size. */
.bear-hit{position:absolute;z-index:4;padding:0;border:0;background:transparent;cursor:pointer;border-radius:45%;-webkit-tap-highlight-color:transparent}
.bear-hit:focus-visible{outline:2px dashed #b77935;outline-offset:4px;background:rgb(183 121 53 / 5%)}
/* Sky + honey: the approved playful direction. */
@font-face{font-family:Nunito;src:url('fonts/nunito-regular.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:Nunito;src:url('fonts/nunito-black.ttf') format('truetype');font-weight:800 1000;font-display:swap}
:root{--paper:#fcfdfd;--ink:#29343c;--muted:#59677b;--line:#dce5ec;--amber:#2274ad;--blue:#48a8ee;--blue-ink:#3e92d0;--sky:#e6f5ff;--honey:#ffc33d}
body{font-family:Nunito,Arial,sans-serif;overflow-x:clip}.page{max-width:1440px;padding:0 clamp(24px,6vw,96px)}
.header{height:112px;position:relative;z-index:3}.wordmark,.header .wordmark,footer .wordmark{font:900 28px/1.1 Nunito,Arial,sans-serif;letter-spacing:-1.2px}.wordmark span{font:inherit;vertical-align:baseline;margin:0;color:var(--blue)}
.header nav{font-size:16px;gap:32px;color:#526780}.header nav a{font-size:16px}.replay{color:#526780;border-color:var(--line)}
h1,h2,h3,.specimen-title,.about h2,.collection-note{font-family:Nunito,Arial,sans-serif;font-weight:900;font-style:normal}h1 em,h2 em,.specimen-title em{font:inherit!important;color:var(--blue)!important}
.bear-hero{overflow:visible;isolation:auto;padding:20px 0 72px}.hero-top{display:none}.bear-hero-main{grid-template-columns:1fr 1.15fr;min-height:560px;gap:10px}.bear-introduction{padding:30px 0;display:block}.bear-hero h1{font-family:Nunito,Arial,sans-serif;font-weight:900;font-size:clamp(70px,8.1vw,122px);letter-spacing:-.06em;line-height:.99;margin:0 0 28px}.bear-introduction>p{font-size:22px;line-height:1.45;color:var(--ink);margin-bottom:35px}.bear-introduction .scroll{color:var(--amber);font-size:18px;font-weight:900;gap:22px}.scroll span{color:inherit;font-size:24px}.bear-hero #stage{height:540px;max-height:65vh}.bear-invitation{font:14px Nunito,Arial,sans-serif;color:var(--muted)}
.section-heading .eyebrow{display:none}.collection{padding-top:48px}.section-heading{align-items:center;margin-bottom:36px}.section-heading h2{font-size:44px;font-weight:900;letter-spacing:-1.6px}.filters button{font:16px Nunito,sans-serif;color:#536a80}.filters .active{color:var(--amber);font-weight:900}
.gallery{grid-template-columns:repeat(6,minmax(0,1fr));gap:46px 24px}.card{grid-column:span 3}.card.featured{grid-column:span 4}.card:nth-child(2){grid-column:span 2}.preview,.wide .preview{height:280px;border-radius:14px;background:var(--sky)}.featured .preview{height:360px;background:var(--sky);padding:0;justify-content:flex-start}.specimen-title{left:53%;top:72px;font-size:clamp(35px,4vw,58px);font-weight:900;letter-spacing:-2px;line-height:1;color:var(--blue)}.bear-preview video{width:53%;max-width:none;mix-blend-mode:multiply}.play-button{left:54%;bottom:60px;border:0;color:var(--amber);font:800 17px Nunito,sans-serif;gap:16px}.card-info{align-items:start;flex-direction:column;gap:6px;padding-top:16px}.card-info h3{font-size:22px;font-weight:900}.card-info p,.text-link{font-size:14px;color:var(--muted)}.text-link{color:var(--amber)}.save-button{font:900 17px Nunito,sans-serif;border:0;border-radius:32px;box-shadow:none;background:var(--ink);padding:16px 24px;min-width:190px}.save-button.done{background:var(--amber)}.tabs{background:#fff;border:1px solid #a9d5f3;border-radius:12px;padding:0;overflow:hidden}.tabs button{width:88px;padding:17px 8px;font:800 16px Nunito,sans-serif;color:var(--ink);border-radius:0}.tabs button+button{border-left:1px solid #dce8ef}.tabs button[aria-selected=true]{background:#2584c8;color:white;box-shadow:none}.toggle-row{font-size:22px;font-weight:900;gap:30px}.toggle{background:#dbe5ed;width:68px;height:40px}.toggle>span{width:32px;height:32px;box-shadow:none}.toggle[aria-checked=true]{background:var(--honey)}.toggle[aria-checked=true]>span{transform:translateX(28px)}.collection-note{font-size:30px;color:var(--ink);margin-top:66px;letter-spacing:-.7px}
.about{margin-top:55px;padding:60px 0 70px;grid-template-columns:.6fr 2fr .8fr}.about .eyebrow{font:16px Nunito,sans-serif;text-transform:none;letter-spacing:0}.about h2{font-size:clamp(38px,5vw,64px);font-weight:900;letter-spacing:-2px;color:var(--blue)}.about p:not(.eyebrow){color:var(--ink);font-size:18px;line-height:1.6}.about-bear{max-width:190px}footer span{font:14px Nunito,sans-serif;letter-spacing:0}footer>a:last-child{font-size:14px;color:var(--amber)}.bear-hit:focus-visible{outline-color:var(--amber)}button:focus-visible,a:focus-visible{outline-color:var(--amber)}
.seasonal-scene{position:absolute;left:50%;top:-112px;width:100vw;bottom:0;transform:translateX(-50%);z-index:0;overflow:hidden;pointer-events:none}.fall-leaf{filter:none}.honey-head,.honey-free{position:absolute;top:0;left:0;object-fit:fill;transform-origin:50% 0;pointer-events:none}.honey-free{opacity:0}.bear-hero #status{font:14px Nunito,sans-serif;color:var(--amber)}
@media(max-width:850px){.gallery{gap:30px 16px}.save-button{min-width:0;font-size:15px;padding:14px}.tabs button{width:70px}.bear-hero h1{font-size:80px}.bear-introduction>p{font-size:18px}.bear-hero #stage{height:430px}.header nav{gap:20px}.featured .preview{height:300px}.specimen-title{font-size:40px}.toggle-row{gap:18px;font-size:18px}}
@media(max-width:600px){.header{height:86px;gap:12px}.header .wordmark{font-size:23px}.header nav{gap:14px}.header nav a{font-size:14px}.replay{display:none}.bear-hero{padding:10px 0 45px}.bear-hero-main{grid-template-columns:1fr;min-height:0}.bear-introduction{grid-row:1;padding:38px 16px 0}.bear-center{grid-row:2}.bear-hero h1{font-size:76px;line-height:1;margin-bottom:20px}.bear-introduction>p{font-size:19px}.bear-hero #stage{height:350px;max-height:none}.section-heading h2{font-size:34px}.section-heading{align-items:start;gap:18px}.filters button{font-size:14px}.gallery{grid-template-columns:1fr}.card,.card.featured,.card:nth-child(2){grid-column:auto}.preview,.wide .preview{height:240px}.featured .preview{height:300px;align-items:center;justify-content:flex-start}.bear-preview video{width:52%;max-width:none}.specimen-title{left:52%;top:70px;font-size:37px;letter-spacing:-1.5px}.play-button{left:54%;bottom:58px;font-size:15px}.collection-note{font-size:25px;line-height:1.3}.about{grid-template-columns:1fr;padding:40px 0}.about h2{font-size:46px}.about-bear{display:none}.about p:not(.eyebrow){font-size:17px}footer .wordmark{font-size:22px}.seasonal-scene{top:-86px}.card-info{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.seasonal-scene{display:block}}
.honey-flow{position:absolute;left:0;top:0;display:block;object-fit:fill;mix-blend-mode:multiply;pointer-events:none;will-change:transform;height:auto;max-width:none}
.component-preview{background:#fcfdfd;border:1px solid var(--line);overflow:hidden}.component-preview iframe{width:100%;height:100%;border:0;display:block}.component-card{grid-column:span 3}@media(max-width:600px){.component-card{grid-column:auto}}
/* Sky by day, deep blue by night. */
.card .preview{position:relative;transform-origin:center;isolation:isolate}.card-glare{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;opacity:0;transition:opacity .2s}.card-info button.text-link{background:none;border:0;padding:0;cursor:pointer}
@media(prefers-reduced-motion:reduce){.card .preview{transform:none!important}.card-glare{display:none}}@media(max-width:600px){.header{gap:8px}}
/* Scramble reveal: the sizer holds the final text's box so the line never
reflows while wider glyphs churn over it. */
.scramble{position:relative;display:inline-block;white-space:pre}
.scramble-size{visibility:hidden}
.scramble-ink{position:absolute;left:0;top:0;white-space:pre}
.scramble-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.scramble-ink{display:none}.scramble-size{visibility:visible}}
/* Material, action bar and status island. Techniques adapted from the
beui.dev MetallicButton, ExpandableActionBar and DynamicIsland snippets
supplied by the site owner; vanilla builds for this site, in the same
spirit as the TiltCard adaptation in site-motion.js. */
/* The rim drifts on its own; a sheen sweeps across it on hover. Only the
2px rim shows either — the face sits on top, so the chrome reads as an
edge rather than as a shiny slab. */
.metallic{position:relative;isolation:isolate;overflow:hidden;border:0;padding:0;border-radius:10px;background:none;box-shadow:0 8px 22px rgba(0,0,0,.16);cursor:pointer}
.metallic::before{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;background:linear-gradient(105deg,#111 0%,#737373 14%,#fafafa 26%,#525252 38%,#0a0a0a 50%,#a3a3a3 64%,#fff 75%,#404040 87%,#111 100%);background-size:230% 100%;animation:metal-drift 8s ease-in-out infinite}
.metallic-sheen{position:absolute;top:0;bottom:0;left:-58%;width:52%;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 48%,transparent);opacity:.55;filter:blur(3px);mix-blend-mode:screen;transform:skewX(-12deg);transition:transform 2.4s ease-in-out}
.metallic:hover .metallic-sheen,.metallic:focus-visible .metallic-sheen{transform:translateX(330%) skewX(-12deg)}
.metallic-face{position:relative;z-index:2;display:block;margin:2px;padding:12px 20px;border-radius:8px;background:var(--paper);color:var(--ink);font:700 13px Nunito,Arial,sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.16);transition:background .2s,transform .12s}
.metallic:hover .metallic-face{background:#f1efe9}
.metallic:active .metallic-face{transform:scale(.985)}
@keyframes metal-drift{0%,100%{background-position:0 50%}50%{background-position:26% 50%}}
/* Icons only until the bar is asked for more. The labels grow from zero
width so the pill itself does the expanding. */
.action-bar{position:relative;display:inline-flex;align-items:center;gap:4px;padding:6px;border:1px solid var(--line);border-radius:999px;background:#fffffff2;box-shadow:0 10px 30px rgba(41,40,35,.1)}
.action-bar button{position:relative;z-index:1;display:inline-flex;align-items:center;height:34px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--muted);font:600 13px Nunito,Arial,sans-serif;cursor:pointer;transition:color .15s}
.action-bar button:hover,.action-bar button:focus-visible{color:var(--ink)}
.action-bar button[aria-pressed=true]{color:var(--amber)}
.ab-icon{display:inline-flex;flex:none;width:18px;justify-content:center;font-size:15px}
.ab-label{display:inline-block;max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;opacity:0;filter:blur(3px);transition:max-width .34s cubic-bezier(.32,.72,0,1),margin-left .34s cubic-bezier(.32,.72,0,1),opacity .22s,filter .22s}
.action-bar.open .ab-label{max-width:11ch;margin-left:7px;opacity:1;filter:blur(0)}
.ab-glow{position:absolute;left:0;top:6px;z-index:0;height:34px;width:0;border-radius:999px;background:rgba(183,118,55,.13);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.32,.72,0,1),width .32s cubic-bezier(.32,.72,0,1),opacity .2s}
/* Constant radius, never animated: the browser clamps it to half the shell
height, so pill-to-panel falls out of the resize with no corner glitch. */
.island{display:flex;flex-direction:column;align-items:center;gap:14px}
.island-shell{position:relative;display:flex;justify-content:center;align-items:flex-start;width:126px;height:37px;overflow:hidden;border-radius:32px;background:#14130f;color:#faf9f6;box-shadow:0 16px 34px rgba(0,0,0,.34);transition:width .62s cubic-bezier(.32,.72,0,1),height .62s cubic-bezier(.32,.72,0,1)}
.island-sizer{position:relative;width:max-content}
.island-slot{display:flex;align-items:center;justify-content:center;gap:9px;transform-origin:top center;white-space:nowrap;font:600 12px Nunito,Arial,sans-serif}
.island-slot[hidden]{display:none}
.island-slot[data-view=pill]{min-width:126px;min-height:37px;padding:0 16px}
.island-slot:not([data-view=pill]){padding:15px 22px}
.island-dot{width:8px;height:8px;border-radius:50%;background:#b77637;flex:none}
.island-slot.enter{animation:island-in .5s cubic-bezier(.32,.72,0,1)}
/* Sucked back up into the pill, fast and blur-free, before the shrinking
shell can clip it. */
.island-slot.leaving{opacity:0;transform:scale(.92) translateY(-6px);transition:opacity .08s ease-out,transform .08s ease-out}
@keyframes island-in{from{opacity:0;transform:scale(.9) translateY(-8px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
.island-controls{display:flex;gap:6px}
.island-controls button{border:1px solid var(--line);border-radius:999px;background:#fff;padding:5px 11px;font:600 11px Nunito,Arial,sans-serif;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s}
.island-controls button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
@media(prefers-reduced-motion:reduce){
.metallic::before{animation:none}.metallic-sheen{display:none}
.ab-label{filter:none;transition:none}.ab-glow{transition:opacity .2s}
.island-shell{transition:none}.island-slot.enter{animation:none}.island-slot.leaving{transition:none}
}
/* Scroll reveal. The armed state is applied by JS, never by the stylesheet,
so with scripting off nothing is ever left invisible. */
.reveal-armed{opacity:0;transform:translateY(15px);transition:opacity .62s cubic-bezier(.32,.72,0,1),transform .62s cubic-bezier(.32,.72,0,1)}
.reveal-armed.reveal-in{opacity:1;transform:none}
/* Magnetic button: the shell leans toward the pointer and the label leans a
little further, so the face reads as sitting slightly proud of the pill. */
.magnetic{display:inline-flex;align-items:center;justify-content:center;padding:15px 27px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:700 13px Nunito,Arial,sans-serif;cursor:pointer}
.magnetic-label{display:inline-block;pointer-events:none}
/* The stage is the finger's version of the ring a cursor crosses. pan-y, not
none: a vertical swipe stays the page's, so the demo is never a hole in the
scroll — the same trade the tilt card makes. */
.magnetic-stage{touch-action:pan-y}
.magnetic:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
/* Marquee. The track is duplicated so the loop closes on itself; both copies
travel one full track width and restart together. */
.marquee{position:relative;display:flex;width:100%;min-width:0;contain:inline-size;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.marquee-track{display:flex;flex:none;align-items:center;gap:30px;padding-right:30px;animation:marquee-run 19s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font:700 14px Nunito,Arial,sans-serif;color:var(--muted)}
.marquee-item::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
@keyframes marquee-run{to{transform:translateX(-100%)}}
/* Count up. Tabular figures keep each number the same width as it climbs, so
the row cannot twitch while it counts. */
.counter{display:flex;gap:38px}
.counter-stat{text-align:center}
.counter-value{display:block;font:900 34px Nunito,Arial,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.counter-label{display:block;margin-top:5px;font:10px monospace;letter-spacing:1.5px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){
.reveal-armed{opacity:1;transform:none;transition:none}
.marquee-track{animation:none}
}
/* Card actions. Selectors carry three classes deliberately: the earlier
`.card-info button.text-link` rule would otherwise win on specificity and
strip the chip back to a bare link.
Elevation does the work that a heavy fill used to. Every action sits on the
same white surface and is separated by shadow depth and label colour, not
by one of them being a black slab. */
.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:15px}
.card-info .card-actions .text-link{
display:inline-flex;align-items:center;gap:8px;padding:9px 17px;
border:0;border-radius:999px;background:#fff;
color:var(--muted);font:600 12.5px Nunito,Arial,sans-serif;letter-spacing:.15px;line-height:1;
white-space:nowrap;text-decoration:none;cursor:pointer;
/* Hairline as an inset ring rather than a border, so it tucks under the
shadow instead of drawing a hard edge on top of it. */
box-shadow:0 1px 1px rgba(41,52,60,.04),0 3px 8px rgba(41,52,60,.06),inset 0 0 0 1px rgba(41,52,60,.07);
transition:box-shadow .26s cubic-bezier(.32,.72,0,1),transform .26s cubic-bezier(.32,.72,0,1),color .2s}
.card-info .card-actions .text-link:hover{
color:var(--ink);transform:translateY(-2px);text-decoration:none;
box-shadow:0 2px 4px rgba(41,52,60,.06),0 10px 22px rgba(41,52,60,.11),inset 0 0 0 1px rgba(41,52,60,.1)}
/* Pressed sits back down, and the shadow tightens rather than vanishing. */
.card-info .card-actions .text-link:active{transform:translateY(0);
box-shadow:0 1px 2px rgba(41,52,60,.1),inset 0 0 0 1px rgba(41,52,60,.12)}
.card-info .card-actions .text-link:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
/* The first action leads on colour and a little more lift, not on weight. */
.card-info .card-actions .text-link:first-child{color:var(--amber);
box-shadow:0 1px 2px rgba(41,52,60,.05),0 5px 14px rgba(41,52,60,.09),inset 0 0 0 1px rgba(41,52,60,.08)}
.card-info .card-actions .text-link:first-child:hover{color:var(--amber);
box-shadow:0 3px 6px rgba(41,52,60,.07),0 14px 28px rgba(41,52,60,.13),inset 0 0 0 1px rgba(41,52,60,.11)}
.card-actions .arrow{display:inline-block;opacity:.5;transition:transform .26s cubic-bezier(.32,.72,0,1),opacity .2s}
.card-info .card-actions .text-link:hover .arrow{opacity:1;transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){
.card-info .card-actions .text-link,.card-actions .arrow{transition:none}
.card-info .card-actions .text-link:hover{transform:none}}
/* Confirm, orb and odometer. Techniques adapted from the beui.dev
DeleteButton, MatrixOrb and AnimatedCounter snippets supplied by the site
owner; vanilla builds for this site. */
/* The tile widens and a recess appears beside it, rather than a dialog
appearing over the top of everything. */
.confirm{position:relative;display:flex;align-items:center;width:48px;height:48px;border-radius:16px;background:#fff;color:var(--muted);box-shadow:0 1px 2px rgba(41,52,60,.06),inset 0 0 0 1px rgba(41,52,60,.07);transition:width .62s cubic-bezier(.32,.72,0,1)}
.confirm.open{width:134px}
.confirm-trigger{position:relative;z-index:2;flex:none;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:16px;background:none;color:inherit;cursor:pointer}
.confirm-trigger:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* Hinged at the left corner of the rim so it swings rather than lifts. */
.confirm-lid{transform-box:view-box;transform-origin:3px 6px;transition:transform .6s cubic-bezier(.34,1.1,.64,1)}
.confirm.open .confirm-lid{transform:rotate(-38deg)}
.confirm-bin{transition:opacity .22s,transform .45s cubic-bezier(.32,.72,0,1)}
.confirm-tick{position:absolute;opacity:0;transform:scale(.6);transition:opacity .22s,transform .22s cubic-bezier(.32,.72,0,1);color:var(--amber)}
.confirm.done .confirm-bin{opacity:0}
.confirm.done .confirm-tick{opacity:1;transform:none}
.confirm.kept .confirm-bin{transform:scale(.88)}
.confirm-panel{position:absolute;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;gap:9px;width:86px;border-radius:16px;background:#e6ebf1;box-shadow:inset 0 1px 2px rgba(41,52,60,.09);opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity .3s cubic-bezier(.32,.72,0,1),transform .3s cubic-bezier(.32,.72,0,1)}
.confirm.open .confirm-panel{opacity:1;transform:none;pointer-events:auto;transition-delay:.14s}
.confirm-circle{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:#fff;color:var(--muted);cursor:pointer;box-shadow:0 .5px 1px rgba(41,52,60,.06),0 1.5px 4px rgba(41,52,60,.1);transition:transform .2s cubic-bezier(.32,.72,0,1),box-shadow .2s}
.confirm-circle:hover{transform:scale(1.06)}
.confirm-circle:active{transform:scale(.84)}
.confirm-circle:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.confirm-circle[data-confirm]{color:var(--amber)}
/* Orb: a dot grid whose radius is driven per state. Canvas, because 100-odd
independently sized dots as elements would thrash layout. */
.orb{display:flex;flex-direction:column;align-items:center;gap:10px}
.orb canvas{display:block}
.orb-state{font:10px monospace;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.orb-controls{display:flex;gap:6px}
.orb-controls button{border:1px solid var(--line);border-radius:999px;background:#fff;padding:5px 11px;font:600 11px Nunito,Arial,sans-serif;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s}
.orb-controls button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
/* Odometer: each place is a column of faces that rolls, masked so a digit
mid-travel fades at the rim instead of being sliced by a hard edge. */
.odometer{display:flex;flex-direction:column;align-items:center;gap:13px}
.odometer-value{display:inline-flex;align-items:center;font:900 40px Nunito,Arial,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.odo-place{position:relative;display:inline-block;overflow:hidden;height:1.5em;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.5) 11%,#000 22%,#000 78%,rgba(0,0,0,.5) 89%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.5) 11%,#000 22%,#000 78%,rgba(0,0,0,.5) 89%,transparent 100%)}
.odo-reel{display:block;transition:transform .62s cubic-bezier(.32,.72,0,1)}
.odo-face{display:flex;align-items:center;justify-content:center;height:1.5em}
.odo-mark{display:inline-block}
.odometer-controls{display:flex;gap:6px}
.odometer-controls button{border:1px solid var(--line);border-radius:999px;background:#fff;padding:6px 13px;font:600 11px Nunito,Arial,sans-serif;color:var(--muted);cursor:pointer}
.odometer-controls button:hover{color:var(--ink);border-color:var(--ink)}
@media(prefers-reduced-motion:reduce){
.confirm,.confirm-lid,.confirm-panel,.confirm-bin,.confirm-tick,.confirm-circle,.odo-reel{transition:none}
}
/* Folder and gooey nav. Adapted from the beui.dev Folder and GooeyNav
snippets supplied by the site owner; vanilla builds for this site. */
/* Perspective lives on the parent so the flap tips away from the viewer
rather than merely squashing. */
.folder{display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;perspective:820px}
.folder-body{position:relative;width:170px;height:118px;padding:0;border:0;background:none;cursor:pointer}
.folder-body:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
.folder-back{position:absolute;inset:0;z-index:0;border-radius:14px;background:var(--amber);box-shadow:inset 0 0 8px 2px rgba(255,255,255,.28)}
/* The tab reads as part of the same panel, so it takes the same paint. */
.folder-back::before{content:'';position:absolute;left:0;top:-13px;width:80px;height:22px;border-radius:11px 11px 0 0;background:inherit}
.folder-card{position:absolute;left:50%;bottom:12px;z-index:1;width:74px;height:92px;margin-left:-37px;border-radius:9px;background:#fff;box-shadow:0 7px 16px rgba(41,52,60,.2);transition:transform .58s cubic-bezier(.32,.72,0,1)}
.folder-card::after{content:'';position:absolute;left:9px;right:9px;top:12px;height:54px;border-radius:2px;background:repeating-linear-gradient(to bottom,var(--line) 0 4px,transparent 4px 11px)}
.folder-card:nth-child(2){transform:translate(-30px,-5px) rotate(-7deg)}
.folder-card:nth-child(3){transform:translate(0,-12px) rotate(2deg)}
.folder-card:nth-child(4){transform:translate(30px,-5px) rotate(8deg)}
.folder-body:hover .folder-card:nth-child(2){transform:translate(-38px,-24px) rotate(-11deg)}
.folder-body:hover .folder-card:nth-child(3){transform:translate(0,-32px) rotate(1deg)}
.folder-body:hover .folder-card:nth-child(4){transform:translate(38px,-24px) rotate(12deg)}
.folder.open .folder-card:nth-child(2){transform:translate(-56px,-64px) rotate(-17deg)}
.folder.open .folder-card:nth-child(3){transform:translate(0,-74px) rotate(3deg)}
.folder.open .folder-card:nth-child(4){transform:translate(56px,-66px) rotate(16deg)}
.folder-front{position:absolute;left:0;right:0;bottom:0;z-index:2;height:92px;border-radius:12px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transform-origin:bottom center;transform:rotateX(-14deg);transition:transform .6s cubic-bezier(.34,1.06,.64,1)}
.folder-body:hover .folder-front{transform:rotateX(-44deg)}
.folder.open .folder-front{transform:rotateX(-58deg)}
/* Gooey nav. The filter runs on a backing layer only — over live text it
would blur the labels along with the shapes. */
.goo{position:relative;display:inline-block}
.goo-defs{position:absolute;width:0;height:0}
.goo-track{position:absolute;inset:0;display:flex;align-items:center;gap:2px;filter:url(#goo-blend);pointer-events:none}
.goo-seg{height:38px;border-radius:11px;background:#e4ebf2;transition:margin .46s cubic-bezier(.32,.72,0,1),background .3s}
.goo-seg.on{background:var(--amber);margin:0 8px}
.goo-labels{position:relative;display:flex;align-items:center;gap:2px}
.goo-labels button{height:38px;padding:0 17px;border:0;background:none;font:600 13px Nunito,Arial,sans-serif;color:var(--muted);cursor:pointer;transition:color .3s,margin .46s cubic-bezier(.32,.72,0,1)}
.goo-labels button[aria-pressed=true]{color:#fff;margin:0 8px}
.goo-labels button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:11px}
@media(prefers-reduced-motion:reduce){
.folder-card,.folder-front,.goo-seg,.goo-labels button{transition:none}
}
/* Gravity letters and grid reveal. Adapted from the beui.dev GravityLetters
and GridReveal snippets supplied by the site owner; vanilla builds for
this site. */
.gravity{position:absolute;inset:0;overflow:hidden;cursor:crosshair;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.gravity-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 12px Nunito,Arial,sans-serif;letter-spacing:.3px;color:var(--muted);pointer-events:none;transition:opacity .35s}
.gravity.used .gravity-hint{opacity:0}
.gravity-glyph{position:absolute;left:0;top:0;font-family:Nunito,Arial,sans-serif;font-weight:800;line-height:1;color:var(--amber);will-change:transform;transition:opacity .34s}
.gravity-glyph>span{display:inline-block;transform-origin:bottom center}
.reveal{display:flex;flex-direction:column;align-items:center;gap:12px}
.reveal canvas{display:block;border-radius:12px;background:#e7edf3}
.reveal-controls button{border:1px solid var(--line);border-radius:999px;background:#fff;padding:6px 13px;font:600 11px Nunito,Arial,sans-serif;color:var(--muted);cursor:pointer}
.reveal-controls button:hover{color:var(--ink);border-color:var(--ink)}
/* ── Gallery cards: one treatment ───────────────────────────────────────
Preview colour used to be set by position — .card:nth-child(2) was the
yellow, nth-child(4) the near-white — so which card got which moved every
time one was added. Those rules are gone; every preview is the same now,
and the card frames it the way the reference gallery does. */
.collection .card{background:#fff;border-radius:20px;padding:10px;box-shadow:0 1px 2px rgba(41,52,60,.05),0 8px 22px rgba(41,52,60,.07),inset 0 0 0 1px rgba(41,52,60,.06)}
/* The ring is an inset shadow rather than a border, so it cannot add to the
box and shift the demo inside by a pixel. */
.collection .card .preview,.collection .card .component-preview,.collection .featured .preview{
height:280px;border:0;border-radius:14px;background:#f4f7fa;
box-shadow:inset 0 0 0 1px rgba(41,52,60,.06)}
.collection .card .preview-label{display:block;left:18px;top:16px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.5px;color:#9aa7b4}
/* Caption row: title and description on the left, actions on the right. */
.collection .card-info{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:14px;padding:15px 8px 7px}
.collection .card-info>div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.collection .card-info h3{font-size:18px;font-weight:900;letter-spacing:-.2px;margin:0}
.collection .card-info p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.collection .card-actions{flex:none;margin-top:0;gap:7px}
.collection .card-info .card-actions .text-link{width:36px;height:36px;padding:0;justify-content:center;color:var(--muted)}
.collection .card-info .card-actions .text-link:first-child{color:var(--amber)}
.collection .card-info .card-actions .text-link .ico{width:15px;height:15px;flex:none}
.collection .card-info .card-actions .text-link .ico-done,.collection .card-info .card-actions .text-link.copied .ico-copy{display:none}
.collection .card-info .card-actions .text-link.copied .ico-done{display:block}
.collection .card-info .card-actions .text-link.copied{color:var(--amber)}
/* Filters as pills, matching the chips rather than sitting as bare links. */
.filters{gap:9px}
.filters button{display:inline-flex;align-items:center;height:38px;padding:0 19px;border:0;border-radius:999px;background:#fff;color:var(--muted);font:600 13.5px Nunito,Arial,sans-serif;letter-spacing:.15px;cursor:pointer;box-shadow:0 1px 1px rgba(41,52,60,.04),0 3px 8px rgba(41,52,60,.06),inset 0 0 0 1px rgba(41,52,60,.07);transition:background .22s,color .22s,box-shadow .22s}
.filters button:hover{color:var(--ink)}
.filters .active,.filters button.active{background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none;box-shadow:0 1px 2px rgba(41,52,60,.1),0 4px 12px rgba(41,52,60,.12)}
/* The three iframe demos are laid out for a 360px stage. Rather than let them
keep a taller preview than every other card, render them at their natural
height and scale the frame down to the shared 280 — 280/360 = .7778, with
the width grossed up so the scaled result still spans the preview. */
.collection .card .component-preview iframe{position:absolute;left:0;top:0;width:128.571%;height:360px;transform:scale(.777778);transform-origin:top left}
/* Mine out-specifies the older responsive rules, so it has to carry the
narrow-screen heights itself — otherwise previews stay 280 on a phone. */
@media(max-width:600px){
.collection .card .preview,.collection .card .component-preview,.collection .featured .preview{height:240px}
.collection .card .component-preview iframe{height:309px}
}
/* ── Card hover tilt, matrix dot loader, accordion expand ──────────────
From transitions.dev, supplied by the site owner. Two changes were
needed to sit in this stylesheet: the variables are scoped to each
component rather than declared on :root — this file already defines
:root twice and the later one wins, which is exactly how the preview
colours drifted — and the loader's dot size became a variable, since a
4x4 grid of 2px dots is fourteen pixels across and vanishes in a card. */
.t-tilt{
--tilt-perspective:1000px;--tilt-return:1000ms;--tilt-return-ease:cubic-bezier(.22,1,.36,1);
--tilt-follow:400ms;--tilt-follow-ease:cubic-bezier(.22,1,.36,1);
--tilt-glare-opacity:.32;--tilt-glare-fade:300ms;--tilt-glare-ease:cubic-bezier(.22,1,.36,1);
/* The outer wrapper is the flat hit area. pan-y, not none: the browser keeps
the vertical drag for the page, so the card is not a 280px hole in the
scroll, and the horizontal axis is still ours to tilt with. */
touch-action:pan-y}
.t-tilt-card{position:relative;border-radius:12px;overflow:hidden;
transform:perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));
transform-style:preserve-3d;transition:transform var(--tilt-return) var(--tilt-return-ease);will-change:transform}
/* A short linear follow while the pointer moves, so the tilt tracks 1:1. */
.t-tilt-card.is-tilting{transition:transform var(--tilt-follow) var(--tilt-follow-ease)}
/* The glare adds like light, so it only reads on a dark face — that is why
this demo card is ink rather than paper. */
.t-tilt-glare{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
background:
radial-gradient(circle 95px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgba(255,255,255,.48),rgba(255,255,255,.06) 52%,rgba(255,255,255,0) 84%),
radial-gradient(circle 200px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgba(255,255,255,.22),rgba(255,255,255,.04) 58%,rgba(255,255,255,0) 78%),
radial-gradient(circle 360px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgba(255,255,255,.1),rgba(255,255,255,0) 88%);
transition:opacity var(--tilt-glare-fade) var(--tilt-glare-ease)}
.t-tilt.is-hover .t-tilt-glare{opacity:var(--tilt-glare-opacity)}
.t-tilt-card{width:178px;padding:14px 14px 16px;background:#242e36;color:#eef3f7;text-align:center;box-shadow:0 18px 34px rgba(41,52,60,.28)}
.t-tilt-card img{display:block;width:112px;height:112px;margin:0 auto 10px;border-radius:10px;background:#f4f7fa}
.t-tilt-name{display:block;font:800 15px Nunito,Arial,sans-serif;letter-spacing:-.2px}
.t-tilt-role{display:block;margin-top:2px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.4px;color:#9fb3c2}
.t-matrix{--matrix-cycle:1200ms;--matrix-dot:9px;--matrix-base:#c3d2de;--matrix-active:var(--amber);--matrix-ease:ease-in-out;
display:grid;grid-template-columns:repeat(4,var(--matrix-dot));grid-auto-rows:var(--matrix-dot);gap:var(--matrix-dot)}
.t-matrix i{display:block;background:var(--matrix-base);animation:t-matrix-pulse var(--matrix-cycle) var(--matrix-ease) infinite;animation-delay:calc(var(--d,0) * 1ms)}
/* Hole positions render nothing. */
.t-matrix i.is-gap{visibility:hidden;animation:none}
@keyframes t-matrix-pulse{0%,45%,100%{background-color:var(--matrix-base)}15%{background-color:var(--matrix-active)}}
.matrix-demo{display:flex;flex-direction:column;align-items:center;gap:18px}
.matrix-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:232px}
.matrix-controls button{border:1px solid var(--line);border-radius:999px;background:#fff;padding:5px 11px;font:600 11px Nunito,Arial,sans-serif;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s}
.matrix-controls button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
.t-acc{--acc-expand:250ms;--acc-collapse:250ms;--acc-chevron:250ms;--acc-ease:cubic-bezier(.22,1,.36,1)}
/* grid-template-rows 0fr to 1fr animates height with no JS measurement. */
.t-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--acc-collapse) var(--acc-ease)}
.t-acc[data-open=true] .t-acc-panel{grid-template-rows:1fr;transition:grid-template-rows var(--acc-expand) var(--acc-ease)}
.t-acc-panel-inner{overflow:hidden;opacity:0;filter:blur(2px);transition:opacity var(--acc-collapse) var(--acc-ease),filter var(--acc-collapse) var(--acc-ease)}
.t-acc[data-open=true] .t-acc-panel-inner{opacity:1;filter:blur(0);transition:opacity var(--acc-expand) var(--acc-ease),filter var(--acc-expand) var(--acc-ease)}
/* scaleY(-1) turns the "v" into a "^" through a flat midpoint — the same look
as a path morph, but it animates outside Chromium too. */
.t-acc-chevron{display:inline-flex;transform:scaleY(1);transform-origin:center;transition:transform var(--acc-chevron) var(--acc-ease)}
.t-acc-chevron path{vector-effect:non-scaling-stroke}
.t-acc[data-open=true] .t-acc-chevron{transform:scaleY(-1)}
.acc-demo{display:flex;flex-direction:column;gap:8px;width:252px}
.t-acc{border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(41,52,60,.08)}
.t-acc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 14px;border:0;background:none;font:700 13px Nunito,Arial,sans-serif;color:var(--ink);text-align:left;cursor:pointer}
.t-acc-head:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;border-radius:12px}
.t-acc-chevron svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-acc-panel-inner p{margin:0;padding:0 14px 13px;font-size:12.5px;line-height:1.55;color:var(--muted)}
@media(prefers-reduced-motion:reduce){
.t-tilt-card{transform:none!important;transition:none!important}
.t-matrix i{animation:none!important}
.t-acc-panel,.t-acc-panel-inner,.t-acc-chevron{transition:none!important}
}
.t-matrix i.is-still{animation:none}
/* ── Living bear ───────────────────────────────────────────────────────
Host contract for living-bear/player.js. The canvas is absolutely placed
inside .bear-hero-main and never clipped — the player draws on a padded
surface wider than the movement rectangle, so any overflow:hidden here
would cut the character off at the walls. */
.bear-hero-main{position:relative;isolation:isolate;overflow:visible}
.bear-hero{overflow:visible}
#living-canvas{position:absolute;z-index:2;display:block;pointer-events:none}
/* The bear takes pointer input through this button alone, so the artwork
underneath stays inert and the page keeps scrolling everywhere else. */
#grab-bear{position:absolute;z-index:5;padding:0;border:0;background:transparent;border-radius:45%;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
#grab-bear:active{cursor:grabbing}
#grab-bear:focus-visible{outline:2px dashed var(--amber);outline-offset:5px}
.bear-center{pointer-events:none}
.bear-introduction{z-index:3}
#stage{cursor:default;touch-action:auto}
#fallback[hidden]{display:none}
.living-controls{position:relative;z-index:6;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.living-label{font:600 12.5px Nunito,Arial,sans-serif;color:var(--muted);margin-right:2px}
.living-controls button,.living-controls select{font:600 12.5px Nunito,Arial,sans-serif;letter-spacing:.15px;color:var(--muted);background:#fff;border:0;border-radius:999px;padding:9px 16px;line-height:1;
box-shadow:0 1px 1px rgba(41,52,60,.04),0 3px 8px rgba(41,52,60,.06),inset 0 0 0 1px rgba(41,52,60,.07);transition:color .2s,box-shadow .26s cubic-bezier(.32,.72,0,1),transform .26s cubic-bezier(.32,.72,0,1)}
.living-controls button{cursor:pointer}
.living-controls button:hover{color:var(--ink);transform:translateY(-2px);box-shadow:0 2px 4px rgba(41,52,60,.06),0 10px 22px rgba(41,52,60,.11),inset 0 0 0 1px rgba(41,52,60,.1)}
.living-controls button:active{transform:translateY(0)}
.living-controls :focus-visible{outline:2px solid var(--amber);outline-offset:3px}
#pickup-toggle{color:var(--paper);background:var(--ink);box-shadow:0 1px 2px rgba(41,52,60,.1),0 5px 14px rgba(41,52,60,.14)}
#pickup-toggle:hover{color:var(--paper);background:var(--amber)}
.living-check{display:inline-flex;align-items:center;gap:7px;font:600 12.5px Nunito,Arial,sans-serif;color:var(--muted);cursor:pointer}
#living-status{position:relative;z-index:6;margin:12px 0 0;text-align:center;min-height:1.4em;font:13px Nunito,Arial,sans-serif;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.living-controls button{transition:none}}
@media(max-width:600px){.living-controls{gap:6px}.living-controls button,.living-controls select{padding:8px 13px;font-size:12px}}
/* The bear's drawing surface is padded wider than the viewport on purpose and
must never be clipped to the movement rectangle. body{overflow-x:clip} alone
does not hold it: with html visible, the clip does not always reach the
viewport, and a phone could be dragged 118px sideways. Clip at the root too. */
html{overflow-x:clip}
/* ── Mobile ────────────────────────────────────────────────────────────
Measured on a 390×844 phone before any of this was written: the hero
ran 769px of an 844px screen with a 76px headline and the bear stranded
at the bottom; the gallery ran 8,738px of identical cards with no way
back up; and every interactive control on the page was under the 44px
touch minimum — 44 card actions at 36px, the filters at 38px, the bear
controls at 28px. This layer is last on purpose: the rules above are
written across six earlier passes and out-specify each other, so the
narrow-screen answers have to live in one place that wins. Nothing
here applies above 760px. */
/* Touch targets. Same type and same glyph sizes — only the box grows. */
@media(max-width:760px){
.collection .card-info .card-actions .text-link{width:44px;height:44px}
.collection .card-actions{gap:6px}
.filters button{height:44px;padding:0 18px}
.living-controls button,.living-controls select{min-height:44px;padding:11px 17px;font-size:13px}
.living-check{min-height:44px}
.living-check input{width:20px;height:20px}
.header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.wordmark,footer>a:last-child{display:inline-block;padding-block:13px}
.bear-introduction .scroll{min-height:44px;align-items:center}
/* The featured card's own control, not part of a supplied component. */
.play-button{min-height:44px}
}
/* The hero. The bear is the reason to be here and it was the smallest
thing on the screen, so the headline gives up the room. */
@media(max-width:600px){
.bear-hero{padding:6px 0 30px}
.bear-hero h1{font-size:46px;line-height:1;margin-bottom:12px}
.bear-introduction{padding:18px 0 0;display:block}
.bear-introduction>p{font-size:15.5px;line-height:1.5;margin:0 0 14px;color:var(--muted)}
.bear-hero #stage{height:clamp(250px,33svh,330px)}
/* The work is what the page is for, so its link stops being a 12px line of
text and becomes something a thumb can hit. */
.bear-introduction .scroll{display:inline-flex;align-items:center;justify-content:center;gap:12px;
min-height:48px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--paper);
font:800 14px Nunito,Arial,sans-serif;box-shadow:0 1px 2px rgba(41,52,60,.1),0 5px 14px rgba(41,52,60,.14)}
.bear-introduction .scroll span{color:var(--paper);font-size:17px}
.bear-hero .hero-top{margin-bottom:0}
}
/* "Work" was hidden below 700px, so the nav pointed away from the gallery on
exactly the screens where the gallery is hardest to reach. All three fit. */
@media(max-width:760px){
.header nav a:first-child{display:inline-flex}
.header nav{gap:10px;font-size:13.5px}
.header{gap:10px}
}
/* The bear controls: two primary actions, everything else behind a
disclosure. Five pills wrapping onto two rows read as a control panel;
the bear should read as a toy. */
.living-primary{display:contents}
.living-more{display:contents}
.living-more-toggle{display:none}
.living-chev{display:inline-block;margin-left:4px;transition:transform .22s cubic-bezier(.32,.72,0,1)}
.living-controls.more-open .living-chev{transform:rotate(180deg)}
@media(max-width:600px){
.living-controls{flex-direction:column;gap:10px;margin-top:10px}
.living-primary{display:flex;gap:9px}
.living-more-toggle{display:inline-flex;align-items:center;justify-content:center}
.living-more{display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.living-controls.more-open .living-more{display:flex}
#living-status{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){.living-chev{transition:none}}
/* The gallery. Sticky filters so the only navigation does not scroll away,
and a way back to the top of nine screens of cards. display:contents
dissolves the heading wrapper so the filters can stick to the section
rather than to a box that is 80px tall. */
@media(max-width:600px){
.collection .section-heading{display:contents}
.collection .section-heading>div:first-child{margin-bottom:18px}
.collection .filters{position:sticky;top:0;z-index:8;gap:8px;
margin:0 -6vw 20px;padding:9px 6vw;overflow-x:auto;scrollbar-width:none;
background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);
box-shadow:0 1px 0 rgba(41,52,60,.07)}
.collection .filters::-webkit-scrollbar{display:none}
.collection .filters button{flex:none}
}
.to-top{position:fixed;right:16px;bottom:16px;z-index:9;width:48px;height:48px;padding:0;border:0;
border-radius:999px;background:var(--ink);color:var(--paper);display:none;align-items:center;justify-content:center;
box-shadow:0 2px 6px rgba(41,52,60,.18),0 10px 26px rgba(41,52,60,.22)}
.to-top svg{width:20px;height:20px}
.to-top:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media(max-width:760px){.to-top{display:flex}.to-top[hidden]{display:none}}
/* ── Contrast ──────────────────────────────────────────────────────────
Measured against the live backgrounds, not eyeballed. --muted was
4.68:1 on paper — over the 4.5 floor by a hair, and that hair is what
disappears on a phone in daylight or with a leaf drifting behind it.
It is now 5.64. The rest are the outright failures the same audit
turned up. --blue stays exactly as it is wherever it is decoration;
--blue-ink is the same hue darkened just past the 3:1 large-text floor
(2.54 -> 3.31) for the places blue is set as type. */
/* Card numbers ran 2.41:1 — nineteen of them, and unreadable on a phone. */
.collection .card .preview-label{color:#68717a}
/* The scrambler wraps a heading's text in a direct child span, which was
picking up h2>span{color:#c18a45} from the original warm stylesheet:
every scrambled heading rendered brown on a blue site, at 2.95:1. The
current design carries its accents on , so this rule has nothing
left to style. */
h2>span{color:inherit}
/* Blue set as type. Decorative blue is untouched. */
.wordmark span,.about h2,.specimen-title{color:var(--blue-ink)}
h1 em,h2 em,.specimen-title em{color:var(--blue-ink)!important}
/* ── Thinking orbs (020) ───────────────────────────────────────────────
The pill and the switcher are the vocabulary the filters, the bear
controls and the signal orb already use, so the card needs no new
shapes — only the canvas is new. */
.orbs{display:flex;flex-direction:column;align-items:center;gap:14px}
.orbs-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 18px 7px 8px;border-radius:999px;
background:#fff;white-space:nowrap;
box-shadow:0 1px 1px rgba(41,52,60,.04),0 4px 12px rgba(41,52,60,.07),inset 0 0 0 1px rgba(41,52,60,.07)}
.orbs-canvas{display:block}
.orbs-pill b{font:700 13.5px Nunito,Arial,sans-serif;letter-spacing:-.1px;color:var(--ink)}
/* A fixed box for the dots, so the label never shifts as they cycle. */
.orbs-dots{display:inline-block;width:1.7em;font-style:normal;font-weight:700;color:var(--muted);
text-align:left;font-variant-numeric:tabular-nums}
/* The pill already shows the state; this is the announced copy only. */
.orbs-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.orbs-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:250px}
.orbs-controls button{border:1px solid var(--line);border-radius:999px;background:#fff;padding:6px 12px;
font:600 11.5px Nunito,Arial,sans-serif;color:var(--muted);cursor:pointer;
transition:color .15s,border-color .15s}
.orbs-controls button:hover{color:var(--ink)}
.orbs-controls button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
@media(max-width:760px){.orbs-controls button{min-height:44px;padding:0 14px}}
/* ── Staff badge (002) ─────────────────────────────────────────────────
The whole card's type scale is set in em off the sleeve width, so one
markup serves the gallery preview, the phone and the exported file at
whatever --bw each gives it. calc(var(--bw)/30) and not
calc(var(--bw)/300*10px): px divided by px times px is not a length,
and the declaration is dropped silently. */
.badge-preview{perspective-origin:50% 30%}
.badge-scene{--bw:170px;--drop:44px;perspective:1100px;perspective-origin:50% 34%;
width:var(--bw);padding-top:var(--drop);touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.badge-hanger{position:relative;transform-origin:50% 0;transform:rotate(var(--swing,0deg));will-change:transform}
.cord{position:absolute;left:50%;bottom:100%;width:1px;height:var(--drop);transform:translateX(-50%);
background:linear-gradient(180deg,rgba(41,52,60,0),rgba(41,52,60,.34))}
.cord::before,.cord::after{content:"";position:absolute;bottom:0;width:1.5px;height:34%;
background:rgba(41,52,60,.3);transform-origin:50% 0}
.cord::before{left:0;transform:translateX(-1px) rotate(11deg)}
.cord::after{left:0;transform:translateX(1px) rotate(-11deg)}
.badge-sleeve{position:relative;width:var(--bw);aspect-ratio:300/372;border-radius:calc(var(--bw)*.055);
background:#eef2f5;font-size:calc(var(--bw) / 30);
padding:calc(var(--bw)*.038) calc(var(--bw)*.036) calc(var(--bw)*.05);
transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
transition:transform 620ms cubic-bezier(.22,1,.36,1);user-select:none;-webkit-user-select:none;cursor:grab;
box-shadow:0 1px 1px rgba(41,52,60,.1),0 18px 34px rgba(41,52,60,.2),
inset 0 0 0 1px rgba(255,255,255,.8),inset 0 0 0 2px rgba(41,52,60,.09)}
.badge-scene.is-live .badge-sleeve{transition:transform 90ms linear}
.badge-scene.is-drag .badge-sleeve{cursor:grabbing}
.badge-sleeve:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.slot{position:absolute;left:50%;top:calc(var(--bw)*.028);width:calc(var(--bw)*.15);height:calc(var(--bw)*.022);
transform:translateX(-50%);border-radius:99px;background:#dde4ea;box-shadow:inset 0 1px 2px rgba(41,52,60,.34)}
/* Plastic, not glass: a broad specular band plus a highlight that tracks the
pointer. Screen blend, so it only ever adds light. */
.sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;opacity:.55;
background:
radial-gradient(circle 130px at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.9),rgba(255,255,255,.12) 55%,rgba(255,255,255,0) 78%),
linear-gradient(104deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.5) 44%,rgba(255,255,255,0) 54%);
transition:opacity 280ms ease}
.badge-scene.is-live .sheen{opacity:.95}
.stock{position:relative;height:100%;border-radius:calc(var(--bw)*.03);background:#f7f9fa;
padding:1.5em 1.4em 1.2em;display:flex;flex-direction:column;gap:1.15em;transform:translateZ(6px);
box-shadow:0 1px 2px rgba(41,52,60,.12),inset 0 0 0 1px rgba(41,52,60,.1)}
.crest{display:flex;align-items:center;justify-content:space-between;gap:1em}
.crest .mark{display:flex;align-items:center;gap:.55em;font:900 1.12em Nunito,Arial,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.crest .mark svg{display:block;flex:none}
.crest .org{font:.78em ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#646d76}
.idrow{display:flex;gap:1.05em;align-items:flex-start}
.photo{width:9.8em;flex:none;aspect-ratio:4/5;border-radius:.3em;background:#e7edf2;overflow:hidden;
display:grid;place-items:center;filter:grayscale(.72) contrast(1.04);
box-shadow:inset 0 0 0 1px rgba(41,52,60,.14)}
.photo svg{width:88%;height:auto;display:block}
.facts{display:flex;flex-direction:column;gap:.85em;min-width:0;flex:1}
.stamp{align-self:flex-end;position:relative;overflow:hidden;padding:.42em 2.7em .42em .75em;border-radius:.24em;
background:var(--ink);color:var(--paper);font:.76em ui-monospace,Menlo,monospace;letter-spacing:.16em}
.stamp span{position:relative;z-index:1}
.stamp::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2.1em;
background:repeating-linear-gradient(112deg,var(--honey) 0 .28em,var(--ink) .28em .58em)}
.fact{display:grid;grid-template-columns:3.4em 1fr;gap:.6em;align-items:baseline;margin:0}
.fact dt{font:.72em ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#646d76;margin:0}
.fact dd{margin:0;font:700 .94em Nunito,Arial,sans-serif;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.nameplate{display:flex;align-items:flex-end;justify-content:space-between;gap:.8em;padding:.7em .85em;
border-radius:.3em;background:#eef3f7;box-shadow:inset 0 0 0 1px rgba(41,52,60,.09)}
.nameplate .lab{display:block;margin-bottom:.25em;font:.7em ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#646d76}
.nameplate .big{font:900 1.5em Nunito,Arial,sans-serif;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.nameplate .rom{display:block;margin-top:.3em;font:.72em ui-monospace,Menlo,monospace;letter-spacing:.2em;color:#646d76}
.sig{flex:none;text-align:center}
.sig svg{display:block;margin:0 auto}
.sig i{font:.64em ui-monospace,Menlo,monospace;font-style:normal;letter-spacing:.12em;color:#646d76}
.meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;margin:auto 0 0;border-radius:.3em;overflow:hidden;
background:rgba(41,52,60,.11);box-shadow:0 0 0 1px rgba(41,52,60,.11)}
.meta div{padding:.5em .6em;background:#fff}
.meta dt{margin:0 0 .25em;font:.64em ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#646d76}
.meta dd{margin:0;font:700 .78em ui-monospace,Menlo,monospace;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.footer-tape{position:relative;height:1.55em;border-radius:.24em;background:var(--ink);overflow:hidden;
display:flex;align-items:center;justify-content:center}
.footer-tape span{z-index:1;font:.66em ui-monospace,Menlo,monospace;letter-spacing:.2em;color:#9fb3c2}
.footer-tape::before,.footer-tape::after{content:"";position:absolute;top:0;bottom:0;width:3.1em;
background:repeating-linear-gradient(112deg,#4a5a67 0 .26em,var(--ink) .26em .56em)}
.footer-tape::before{left:0}
.footer-tape::after{right:0}
/* The preview is 240px on a phone, so the badge and its lanyard have to fit
inside that rather than the 280 they get on a desktop card. */
/* Small enough that the full swing still clears a 240px preview, rather than
clamping the swing down to fit a bigger badge. */
@media(max-width:600px){.badge-scene{--bw:132px;--drop:30px}}
@media(prefers-reduced-motion:reduce){.badge-sleeve,.sheen{transition:none!important}}
/* ── Play wave hit area ────────────────────────────────────────────────
The button measured 114x43 but only ten of fifteen points across it
actually reached it: .specimen-title carries z-index:1 and its
overlapped the button, so a third of the clicks landed on decorative
display text. The title is decoration and should never take a pointer.
The button then gets a hit area larger than its ink, grown with an
overlay so the text does not shift. */
.specimen-title{pointer-events:none}
.play-button{position:absolute;z-index:2}
.play-button::before{content:"";position:absolute;inset:-10px -20px;border-radius:999px}
.play-button:focus-visible{outline:2px solid var(--amber);outline-offset:6px;border-radius:999px}
@media(max-width:760px){.play-button::before{inset:-12px -22px}}
.collection .card .preview.gf-preview{height:auto;min-height:280px}
/* At card size the row cannot carry a badge, a name, a size and a chevron
without eating the name. The size is in the sheet anyway; the exported
component runs at 300px, where it fits, and keeps it. */
.gf-preview .gf-meta{display:none}
/* The card number and the sheet's header occupy the same corner. */
.collection .card .preview.gf-preview .preview-label{transition:opacity .3s ease}
.collection .card .preview.gf-preview.gf-reading .preview-label{opacity:0}
@media(max-width:600px){.collection .card .preview.gf-preview{min-height:240px}}
/* Two folders, one square. The stage is the taller demo's box and both sit in
the same grid cell, so switching swaps the drawing without moving anything
around it. The switch sits in the same band as the gatefold's close chip on
purpose: that band is margin the card already leaves, and only one of the two
is ever wanted — at rest you are choosing a folder, and once one is open the
only thing left to do is shut it. */
/* width:100% with min-width:0, or the gatefold's own `max-width:100%` resolves
against a box the gatefold itself sized, and the folder overflows its card on
a narrow phone instead of shrinking to it. */
.swap{position:relative;display:grid;justify-items:center;width:100%;min-width:0}
.swap-stage{display:grid;place-items:center;width:100%;min-width:0}
.swap-stage>*{grid-area:1/1}
/* The gatefold fills the stage and the lean-out folder is shorter, so aligning
the shorter one to the floor stands both on the same line — and puts the
empty room above the papers, which is the way they lean. */
.swap-stage .folder{align-self:end}
.swap-stage>[data-pane]{transition:opacity 260ms ease,transform 260ms cubic-bezier(.22,1,.36,1)}
.swap-stage>[data-pane].off{opacity:0;visibility:hidden;transform:scale(.96);pointer-events:none;
transition:opacity 200ms ease,transform 200ms ease,visibility 0s 200ms}
.swap-switch{position:absolute;left:50%;top:100%;transform:translateX(-50%);
display:flex;gap:6px;margin-top:9px;white-space:nowrap;transition:opacity .22s ease,visibility 0s}
.swap-switch button{position:relative;border:1px solid var(--line);border-radius:999px;background:#fff;
padding:5px 12px;font:600 11px Nunito,Arial,sans-serif;color:var(--muted);cursor:pointer;
transition:color .15s,border-color .15s,background .15s}
.swap-switch button[aria-pressed=true]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.swap-switch button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
/* The target reaches 44px without the pills growing into the folder above. */
.swap-switch button::before{content:"";position:absolute;top:-12px;bottom:-12px;left:-11px;right:-11px;
border-radius:999px}
/* An open gatefold owns the band — its close chip lands exactly here. */
.swap:has(.gf.is-open) .swap-switch{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,.22s}
/* ── Saturn (025) and the ripple grid (026) ─────────────────────────────
Both canvases are transparent and fill the card, so the gallery's own ground
carries them — no panel, and no hardcoded background to drift out of step
with the card behind it. The ink is the site's, at full strength: the site
owner picked it against paper. */
/* Written out per prefix rather than grouped: the export pulls a component's
rules by matching the start of the selector, so a rule reading
".sat-scene,.rip-scene" belongs to Saturn only and the ripple ships without
its own geometry. */
.sat-scene{position:absolute;left:0;right:0;top:34px;bottom:8px;
display:block;padding:0;border:0;background:none;--sat-ink:#29343c}
.sat-canvas{display:block;width:100%;height:100%}
.rip-canvas{display:block;width:100%;height:100%}
/* A control covering a whole card is where this site has trapped the page
scroll before, so a vertical drag still belongs to the page. */
.rip-scene{position:absolute;left:0;right:0;top:34px;bottom:8px;
display:block;padding:0;border:0;background:none;--rip-ink:#29343c;
cursor:crosshair;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.rip-scene:focus-visible{outline:2px solid var(--amber);outline-offset:-3px;border-radius:8px}
@media(max-width:600px){.sat-scene{top:32px;bottom:6px}}
@media(max-width:600px){.rip-scene{top:32px;bottom:6px}}
/* ── Press depth (013) ──────────────────────────────────────────────────
One surface: a face, an edge beneath it, an ambient shadow under that. The
press moves the face down by exactly the edge it loses, so the button's
underside stays put and only its top descends — which is what pressing
something looks like. Translating a button while its shadow holds still
reads as sliding.
Every colour is a token on the scene, so a face is never painted by a
selector: a variant that sets its own background on :hover out-specifies
any later state rule, and the cursor is sitting on the button after a
click. Selectors set --f and --fh; one rule paints. */
.pk-scene{--k:40px;
--pk-face:linear-gradient(180deg,#ffffff,#f4f8fb);
--pk-face-hover:linear-gradient(180deg,#ffffff,#eef4f9);
--pk-edge:#c3d3e1;--pk-rim:rgba(41,52,60,.09);--pk-cast:rgba(41,52,60,.14);
--pk-ink:#29343c;
--pk-dark:linear-gradient(180deg,#43515f,#2c3740);
--pk-dark-hover:linear-gradient(180deg,#4b5a69,#323e48);
--pk-dark-edge:#171f27;
--pk-tray:linear-gradient(180deg,#e6edf4,#eef3f8);--pk-tray-line:#d3dfea;
position:absolute;left:12px;right:12px;top:40px;bottom:12px;
display:grid;place-items:center}
.pk{display:grid;grid-template-columns:auto auto;gap:16px;align-items:center;
padding:15px;border-radius:18px;background-image:var(--pk-tray);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px var(--pk-tray-line)}
.pk-side{display:flex;flex-direction:column;gap:11px;min-width:0}
.pk-read{display:flex;align-items:baseline;justify-content:flex-end;gap:3px;
padding:9px 12px;border-radius:11px;background:var(--paper);
box-shadow:inset 0 1px 3px rgba(41,52,60,.1),inset 0 0 0 1px var(--pk-tray-line)}
.pk-read i{font-style:normal;font:700 14px Nunito,Arial,sans-serif;color:var(--muted)}
.pk-amount{font:800 24px/1 ui-monospace,Menlo,monospace;letter-spacing:-.04em;
color:var(--pk-ink);font-variant-numeric:tabular-nums}
.pk-grid{display:grid;grid-template-columns:repeat(3,var(--k));gap:8px}
.pk-btn{position:relative;border:0;cursor:pointer;color:var(--pk-ink);
--f:var(--pk-face);--fh:var(--pk-face-hover);--e:var(--pk-edge);
background-image:var(--f);border-radius:11px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px var(--pk-rim),
0 3px 0 var(--e),0 6px 13px var(--pk-cast);
transition:background-image .18s,box-shadow .11s ease,transform .11s ease}
.pk-btn:hover:not(:disabled){background-image:var(--fh)}
/* Travel equals the edge lost, so the underside never moves. */
.pk-btn.is-pressed:not(:disabled),.pk-btn:active:not(:disabled){
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px var(--pk-rim),
0 1px 0 var(--e),0 2px 5px var(--pk-cast)}
.pk-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.pk-btn:disabled{cursor:not-allowed;opacity:.45;transform:none!important;
box-shadow:inset 0 0 0 1px var(--pk-rim),0 3px 0 var(--e)}
.pk-key{height:var(--k);font:700 16px Nunito,Arial,sans-serif;font-variant-numeric:tabular-nums}
.pk-key[data-key=del]{color:var(--muted);display:grid;place-items:center}
/* Drawn, not typed: U+232B falls back to a boxed X in most system stacks and
renders as an emoji on iOS, which is the trap the hero's arrows fell into. */
.pk-key[data-key=del] svg{width:19px;height:19px}
.pk-charge{height:38px;padding:0 14px;color:var(--paper);font:800 13px Nunito,Arial,sans-serif;
letter-spacing:.01em;--f:var(--pk-dark);--fh:var(--pk-dark-hover);--e:var(--pk-dark-edge)}
.pk-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:600px){.pk-scene{--k:34px;top:38px;left:10px;right:10px;bottom:10px}
.pk{gap:12px;padding:12px}.pk-amount{font-size:20px}.pk-charge{height:34px}}
@media(prefers-reduced-motion:reduce){.pk-btn{transition:none}}
/* ── Point cloud (003) ──────────────────────────────────────────────────
No panel: the canvas is transparent and fills the card, so the gallery's
own ground carries it and there is no second dark rectangle beside the
rain card. pan-y, because a control that covers a whole card must not be
the reason the page stops scrolling under a thumb. */
.cloud{--cloud-ink:#3f5162;
position:absolute;inset:0;display:block;width:100%;border:0;padding:0;background:none;
cursor:crosshair;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.cloud-canvas{display:block;width:100%;height:100%}
.cloud:focus-visible{outline:2px solid var(--amber);outline-offset:-3px;border-radius:8px}
/* On a phone the card is short enough that a sphere centred in it reaches the
card's own number. The box starts below the number rather than the sphere
shrinking at every size — and the exported component keeps its own geometry. */
@media(max-width:600px){.cloud{inset:26px 0 0}}
/* ── Rain (022) ─────────────────────────────────────────────────────────
A dark panel inset in the card rather than a canvas filling it: the card's
own number sits on the light ground above, where it stays legible, and the
weather reads as something looked at through a window. */
.rain{position:absolute;left:12px;right:12px;top:42px;bottom:12px;
display:block;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;
background:#161d23;-webkit-tap-highlight-color:transparent;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 8px 20px rgba(27,35,42,.16)}
.rain::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:linear-gradient(180deg,rgba(22,29,35,.55),rgba(22,29,35,0) 34%)}
.rain-canvas{display:block;width:100%;height:100%}
.rain:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
@media(max-width:600px){.rain{left:10px;right:10px;top:38px;bottom:10px}}
/* ── Gatefold folder (003) ─────────────────────────────────────────────
Cover in the site's ink rather than the reference's green: the palette
is deliberate, and a folder is no reason to introduce a hue nothing
else on the page uses. Seven tokens carry the whole component — two for
geometry, five for colour — so reskinning it is redefining those. */
.gf-scene{--gf-w:204px;--gf-h:204px;
--gf-cover:#242f37;--gf-cover-in:#3d4b57;--gf-pocket:#45525e;
--gf-doc:#fbfaf6;--gf-doc-ink:#26302c;
/* Board tooth. Ruled gradients were the first try and they read as pinstripe:
a fibre is irregular, and anything on a repeat is a pattern. Turbulence has
no period to find, so it reads as stock. It lifts the base a few levels as
it composites, which the cover token is already darkened to absorb. */
--gf-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E");
--gf-tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23t)' opacity='.045'/%3E%3C/svg%3E");
--gf-rake:linear-gradient(152deg,rgba(255,255,255,.09),rgba(255,255,255,0) 46%,rgba(0,0,0,.08));
position:relative;perspective:1500px;perspective-origin:50% 48%;
width:calc(var(--gf-w) * 2);max-width:100%;display:grid;place-items:center;
min-height:var(--gf-h);
transition:min-height 520ms cubic-bezier(.22,1,.36,1)}
.gf-scene.is-reading{min-height:var(--gf-box,300px)}
.gf{position:relative;width:var(--gf-w);height:var(--gf-h);transform-style:preserve-3d;
transition:opacity 380ms ease,transform 520ms cubic-bezier(.22,1,.36,1)}
.gf-back{position:absolute;inset:0;border-radius:10px;background:var(--gf-cover-in);
transform-style:preserve-3d;box-shadow:0 14px 26px rgba(27,35,42,.24)}
.gf-spine{position:absolute;left:50%;top:8%;bottom:46%;width:1px;transform:translateX(-50%);
background:rgba(255,255,255,.07)}
.gf-slot{position:absolute;left:5.5%;right:5.5%;bottom:17%;transform:translateZ(1px);transform-style:preserve-3d}
.gf-doc{display:block;width:100%;padding:0;border:0;text-align:left;cursor:pointer;font:inherit;
border-radius:6px;color:var(--gf-doc-ink);background-color:var(--gf-doc);
background-image:var(--gf-tooth);
box-shadow:0 1px 0 rgba(38,48,44,.16),0 7px 15px rgba(27,35,42,.24);
transform:translateY(var(--doc-y,32px)) translateZ(var(--doc-z,0px)) scale(var(--doc-s,1));
transform-origin:50% 100%;
transition:transform 640ms cubic-bezier(.22,1,.36,1),opacity 300ms ease,box-shadow 300ms ease}
/* The rise has to clear the pocket lip with room to spare. At two pixels the
document is technically in front of it and practically unclickable. */
.gf.is-open .gf-doc{--doc-y:-76px}
.gf.is-open .gf-doc:hover{--doc-y:-82px}
.gf.is-wide .gf-doc{--doc-y:-96px;--doc-z:30px;--doc-s:1.04;opacity:0}
.gf-doc:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.gf-row{display:flex;align-items:center;gap:7px;padding:8px 10px}
.gf-kind{flex:none;padding:2px 5px;border-radius:3px;background:var(--gf-cover);color:var(--honey);
font:7.5px ui-monospace,Menlo,monospace;letter-spacing:.1em}
.gf-name{flex:1;min-width:0;font:800 11px Nunito,Arial,sans-serif;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-meta{flex:none;font:7.5px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#646d76}
.gf-chev{flex:none;display:grid;place-items:center;width:12px;height:12px;color:#646d76}
.gf-chev svg{width:9px;height:9px}
/* The pocket is the back panel folded up, so it is the same stock a shade
nearer the light, with the shadow it throws back onto the panel behind it.
Reading it as a separate piece is the whole reason the open folder looks
like a folder and not like a dark rectangle. */
.gf-pocket{position:absolute;left:0;right:0;bottom:0;height:44%;border-radius:0 0 10px 10px;
background-color:var(--gf-pocket);
background-image:var(--gf-grain),linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.2));
transform:translateZ(2px);
box-shadow:0 -10px 16px rgba(18,24,29,.34),inset 0 -1px 0 rgba(0,0,0,.2)}
.gf-pocket::before{content:"";position:absolute;left:5%;right:5%;top:0;height:1px;
background:linear-gradient(90deg,rgba(255,255,255,.16) 0 24%,transparent 24% 76%,rgba(255,255,255,.16) 76%)}
/* The thumb cut: a half-ellipse in the panel's own colour hanging off the lip,
the notch you reach into on a real folder. It sits wholly inside the pocket
on purpose — a full ellipse straddling the lip paints over the shadow the
pocket casts on the panel behind it, and the cut reads as a pale blob
floating above the folder rather than as a hole in it. */
.gf-pocket::after{content:"";position:absolute;left:50%;top:0;width:48%;height:calc(var(--gf-h) / 13);
transform:translateX(-50%);border-radius:0 0 50% 50% / 0 0 100% 100%;
background:var(--gf-cover-in);box-shadow:0 1px 0 rgba(255,255,255,.15)}
/* The cover sits in front of the pocket, as on a real folder. Without the
translateZ the flaps live at Z 0 and the pocket at 2px, so the pocket covers
the closed cover's own label — and the label punches through the pocket's
plane as the flap swings past it. */
.gf-flap{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;
transform:translateZ(3px);transition:transform 700ms cubic-bezier(.4,.01,.2,1)}
.gf-flap.l{left:0;transform-origin:left center}
.gf-flap.r{right:0;transform-origin:right center}
.gf-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.gf-face.out{background-color:var(--gf-cover);background-image:var(--gf-grain),var(--gf-rake)}
.gf-face.in{background-color:var(--gf-cover-in);background-image:var(--gf-grain);transform:rotateY(180deg);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 14px 22px rgba(18,24,29,.18)}
/* The cover's own edge, so the board has a thickness rather than a border, and
a shaded/lit pair down the middle so the two halves read as two boards
meeting rather than one slab with a line drawn on it. */
.gf-face.out{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.24)}
.gf-flap.l .gf-face.out{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.24),
inset -1px 0 0 rgba(0,0,0,.32)}
.gf-flap.r .gf-face.out{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.24),
inset 1px 0 0 rgba(255,255,255,.06)}
.gf-flap.l .gf-face{border-radius:10px 0 0 10px}
.gf-flap.r .gf-face{border-radius:0 10px 10px 0}
.gf.is-open .gf-flap.l{transform:translateZ(3px) rotateY(-118deg)}
.gf.is-open .gf-flap.r{transform:translateZ(3px) rotateY(118deg)}
.gf-mark{position:absolute;left:12px;top:11px;width:15px;height:15px}
.gf-title{position:absolute;left:12px;bottom:12px;right:8px}
/* The cover type is set off the folder's width, not in fixed pixels: the label
lives on one flap, so its column is half the folder, and at a phone's size a
fixed 8px "01 DOCUMENT" wrapped onto two lines. */
.gf-title b{display:block;font:900 calc(var(--gf-w) / 18.5)/1.15 Nunito,Arial,sans-serif;color:var(--paper);
letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-title span{display:block;margin-top:2px;font:calc(var(--gf-w) / 22) ui-monospace,Menlo,monospace;
letter-spacing:.08em;color:#9aa6b0;white-space:nowrap}
/* Z, not z-index: inside a preserve-3d context the pocket sits in front of
anything at Z 0 and would swallow every click aimed beneath it. */
.gf-open-btn{position:absolute;inset:0;z-index:4;transform:translateZ(5px);width:100%;border:0;
background:none;padding:0;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent}
.gf-open-btn:focus-visible{outline:2px solid var(--amber);outline-offset:5px}
.gf.is-open .gf-open-btn{display:none}
/* Closing is a labelled control, not a guess about where to click — and it
belongs outside the folder. Sitting in the pocket it covered the one thing
the folder had just revealed, and no delay fixes a control that is in the
wrong place. It hangs below the board instead, in the margin the card
already leaves around a demo — growing the card to make room instead broke
the one height every preview in the gallery shares. Sized in em off the
folder's own width so it stays in proportion. */
.gf-close{position:absolute;left:50%;top:100%;margin-top:.42em;z-index:6;
transform:translateX(-50%) translateZ(7px) translateY(5px);
display:inline-flex;visibility:hidden;opacity:0;pointer-events:none;
align-items:center;gap:.45em;min-height:2.2em;padding:0 .95em;border:0;border-radius:999px;
/* In proportion to the folder, but with a floor: on the narrowest phones the
square shrinks to fit and an em-sized control shrank with it, below a
finger. */
font-size:max(10px,calc(var(--gf-w) / 18));font-family:Nunito,Arial,sans-serif;font-weight:700;letter-spacing:.03em;
background:var(--gf-cover);color:var(--paper);cursor:pointer;white-space:nowrap;
box-shadow:0 4px 10px rgba(27,35,42,.2);
transition:background .2s,color .2s,opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s .3s}
/* Held back until the cover is most of the way open, so the folder finishes
its move before a second thing starts one. */
.gf.is-open .gf-close{visibility:visible;opacity:1;pointer-events:auto;
transform:translateX(-50%) translateZ(7px) translateY(0);
transition-delay:440ms,440ms,440ms,440ms,0s}
.gf-close:hover{background:var(--gf-cover-in)}
.gf-close:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.gf-close svg{width:.85em;height:.85em;flex:none}
/* The chip stays small so it does not compete with the document, but a control
has to be hittable: the target is grown past the ink rather than the chip. */
.gf-close::before{content:"";position:absolute;inset:-13px -10px;border-radius:999px}
.gf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The sheet, at reading width. A document has to become a document. */
/* display:grid on a class beats [hidden]{display:none} from the UA sheet, so
without this the sheet is never actually hidden — it stays rendered, just
invisible, and the attribute means nothing. */
.gf-reader{position:absolute;inset:0;display:grid;place-items:start center;pointer-events:none;
opacity:0;transition:opacity 380ms ease}
.gf-reader[hidden]{display:none}
.gf-scene.is-reading .gf-reader{pointer-events:auto;opacity:1}
.gf-scene.is-reading .gf{opacity:.16;transform:scale(.94);pointer-events:none}
.gf-scene.is-reading .gf-close{visibility:hidden;opacity:0;transition-delay:0s}
.gf-sheet-doc{width:min(100%,340px);color:var(--gf-doc-ink);border-radius:12px;
background-color:var(--gf-doc);
background-image:var(--gf-tooth);
padding:20px 22px 18px;text-align:left;transform:translateY(16px) scale(.97);transform-origin:50% 84%;
box-shadow:0 2px 0 rgba(38,48,44,.1),0 20px 40px rgba(27,35,42,.2),inset 0 0 0 1px rgba(38,48,44,.1);
transition:transform 520ms cubic-bezier(.22,1,.36,1)}
.gf-scene.is-reading .gf-sheet-doc{transform:none}
.gf-sheet-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.gf-sheet-top em{font-style:normal;font:9px ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#7a857f}
.gf-sheet-doc h3{margin:0 0 3px;font:900 18px Nunito,Arial,sans-serif;letter-spacing:-.02em;line-height:1.15}
.gf-sheet-doc .sub{font:9px ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#7a857f;margin-bottom:13px}
.gf-sheet-doc p{font-size:12.5px;line-height:1.7;color:#3d4a45;margin:0 0 10px}
.gf-sheet-doc h4{margin:16px 0 7px;font:900 9px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#7a857f}
.gf-sheet-doc dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;padding-top:10px;
border-top:1px solid rgba(38,48,44,.14);font-size:11.5px}
.gf-sheet-doc dt{font:8.5px ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#7a857f;padding-top:2px}
.gf-sheet-doc dd{margin:0;font-weight:700}
.gf-sheet-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:13px;
border-top:1px solid rgba(38,48,44,.14)}
.gf-return,.gf-original{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;
border:0;border-radius:999px;cursor:pointer;font:800 11px Nunito,Arial,sans-serif;white-space:nowrap;
text-decoration:none}
.gf-return{background:var(--gf-cover);color:var(--paper)}
.gf-return:hover{background:var(--gf-cover-in)}
.gf-original{color:var(--gf-cover);box-shadow:inset 0 0 0 1px rgba(38,48,44,.25)}
.gf-original:hover{box-shadow:inset 0 0 0 1px rgba(38,48,44,.5)}
.gf-return:focus-visible,.gf-original:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.gf-return svg,.gf-original svg{width:10px;height:10px}
/* The lean-out folder is drawn at a fixed size, so on a phone its open throw
is what overruns the square — the papers cleared the top of the card and
landed on the card's own number. The throw is damped rather than the folder
redrawn, so the exported component keeps the proportions it was built at. */
@media(max-width:600px){
.folder.open .folder-card:nth-child(2){transform:translate(-42px,-38px) rotate(-14deg)}
.folder.open .folder-card:nth-child(3){transform:translate(0,-45px) rotate(3deg)}
.folder.open .folder-card:nth-child(4){transform:translate(42px,-40px) rotate(13deg)}
.folder.open .folder-front{transform:rotateX(-52deg)}
}
/* On the narrowest phones the square itself shrinks but the lean-out folder is
fixed, so its throw is damped once more to stay clear of the number. */
@media(max-width:380px){
.folder.open .folder-card:nth-child(2){transform:translate(-34px,-26px) rotate(-10deg)}
.folder.open .folder-card:nth-child(3){transform:translate(0,-33px) rotate(2deg)}
.folder.open .folder-card:nth-child(4){transform:translate(34px,-28px) rotate(10deg)}
}
@media(max-width:600px){.gf-scene{--gf-w:min(164px,(100vw - 62px) / 2);--gf-h:var(--gf-w)}
.gf-name{font-size:10px}.gf-kind{font-size:7px;padding:2px 4px}
.gf.is-open .gf-doc{--doc-y:-63px}.gf.is-open .gf-doc:hover{--doc-y:-68px}.gf.is-wide .gf-doc{--doc-y:-80px}
.gf-sheet-doc{width:min(100%,290px);padding:16px 17px 15px}}
@media(prefers-reduced-motion:reduce){
.gf,.gf-scene,.gf-flap,.gf-doc,.gf-reader,.gf-sheet-doc{transition:none!important}}