/* Roswall Hero – the front-page header from the 2026 design. Everything is scoped to .rsh */
.rsh{--vh:100vh;font-family:Geist,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.55;color:#121214;-webkit-font-smoothing:antialiased}
@supports (height:100svh){.rsh{--vh:100svh}}
.rsh.rsh-hero{position:relative;display:block;width:calc(100vw - var(--sbw, 0px));max-width:none !important;margin:0 0 0 calc(50% - (100vw - var(--sbw, 0px)) / 2) !important;padding:0 !important;background:#121214;overflow-x:clip}
.rsh.rsh-hero.day{background:#F9F8F5}
.rsh h1,.rsh h2,.rsh p{margin:0;padding:0;text-transform:none}
.rsh h1{color:#121214}
.rsh a{color:inherit;text-decoration:none;box-shadow:none;border:0}
.rsh button{font-family:inherit;letter-spacing:normal;text-transform:none;box-shadow:none;min-height:0;min-width:0;line-height:inherit;color:inherit}
.rsh .hbot a{font-weight:500}
.rsh .hbot{font-size:13px}
.rsh .rsh-next{cursor:pointer}
.rsh .sws{display:none}
@media (max-width:600px){.rsh .hbot .sws{display:inline}}
body.rsh-front{margin:0;padding-bottom:0 !important}
body.rsh-front .rsh-main{display:block;margin:0;padding:0}
p:empty:has(+ .rsh-hero),.rsh-hero + p:empty,.rsh-portal + p:empty{display:none}
.rsh .rise{display:inline-block;opacity:0;animation:riseIn .9s cubic-bezier(.19,1,.22,1) both}
.rsh .fadein{animation:fade 1s ease 1.3s both}
.rsh .dotp{animation:pulseD 1.8s ease-out infinite}
.rsh .sw{font-style:italic;cursor:default}
.rsh .sw{background-image:linear-gradient(rgba(18,18,20,.35),rgba(18,18,20,.35));background-repeat:no-repeat;background-size:100% 1px;background-position:0 94%}
.rsh .pw{display:inline-block}
.rsh .pw.hot{filter:url(#warpHot);animation:flick .42s steps(1,end) infinite}
.rsh .dw{position:relative;display:inline-block;padding:0 .14em 0 .04em;margin:0 -.1em 0 0}
.rsh .dfill{visibility:hidden}
.rsh .dline,.rsh .dsolid{position:absolute;left:0;top:0;padding:0 .14em 0 .04em;white-space:nowrap}
.rsh .dline{color:transparent;-webkit-text-stroke:2px #121214;opacity:0}
.rsh .dsolid{color:#121214}
.rsh .bw{position:relative;display:inline-block;min-width:2.25em;padding:0 .12em 0 .02em;margin:0 -.1em 0 0;white-space:nowrap}
.rsh .bword{display:inline-block;vertical-align:bottom}
.rsh .bcode{display:none;vertical-align:bottom;white-space:nowrap;transform-origin:50% 85%}
.rsh .bc{display:inline-block;max-width:0;opacity:0;vertical-align:bottom}
@media (hover: hover){.rsh .sw-design:hover .dline{animation:lnIn2 .45s cubic-bezier(.5,0,.3,1) both}.rsh .sw-design:hover .dsolid{animation:midOut2 .4s cubic-bezier(.4,0,.2,1) .5s both}.rsh .sw-build:hover .bword{display:none}.rsh .sw-build:hover .bcode{display:inline-block;animation:stamp .32s cubic-bezier(.3,0,.3,1) .95s both}.rsh .sw-build:hover .bc{animation:chIn .06s linear calc(var(--i) * .07s) both}.rsh .sw-build:hover .bk{animation:chIn .06s linear calc(var(--i) * .07s) both,shut .16s ease-in .8s forwards}}
@media (hover: none){.rsh .pw.hot{filter:none;animation:none}}
@media (prefers-reduced-motion: reduce){.rsh .pw.hot{filter:none;animation:none !important}.rsh .dline,.rsh .bcode{display:none}.rsh .dsolid,.rsh .bword{animation:none !important}.rsh .rise,.rsh .fadein,.rsh .dotp{animation:none !important;opacity:1 !important}}
.rsh{overflow-x:clip}
.rsh{--gl:rgba(18,18,20,.1)}
.rsh .hero-intro{position:relative;display:grid;height:calc(var(--vh) - var(--hdr, 66px));grid-template-rows:minmax(0,1fr) calc(var(--rh) * 1.5) calc(var(--rh) * .6);background-image:linear-gradient(to right,var(--gl) 1px,transparent 1px),linear-gradient(to bottom,var(--gl) 1px,transparent 1px);background-size:var(--cw) var(--rh);background-position:-1px -1px;overflow:hidden}
.rsh .hero-text > *{position:relative;z-index:1}
.rsh .statswrap{min-height:0;overflow:hidden;background:#FFFFFF}
.rsh .stats{position:relative;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--gl)}
.rsh .stats{touch-action:pan-y}
.rsh .stats .track{display:flex;height:100%;width:max-content;transform:translateX(calc(var(--iw) * (var(--si, 0) + var(--sn, 0)) * -1 + var(--drag, 0px)));transition:transform .95s cubic-bezier(.75,0,.2,1);will-change:transform}
.rsh .stats .track.nt,.rsh .stats.drag .track{transition:none}
.rsh .stats .dup{display:flex}
.rsh .stats .sti{flex:none;width:var(--iw);height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--cw) * .16);padding:0 calc(var(--cw) * .3);border-right:1px solid var(--gl);white-space:nowrap}
.rsh .stats b{font-weight:300;font-size:min(calc(var(--rh) * .78),calc(var(--iw) * .16));line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.rsh .stats span:not(.coffee){font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;white-space:normal;max-width:14ch;line-height:1.3;text-align:left}
.rsh .hbot{display:grid !important;grid-template-columns:1fr auto 1fr;align-items:center;background:#FFFFFF;padding:0 32px !important;min-height:0}
.rsh .hbot > :last-child{justify-self:end}
.rsh .avail2{display:inline-flex;align-items:center;gap:9px;font-weight:500}
.rsh button.avail2{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:8px 0;font:inherit;font-weight:500;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
.rsh button.avail2:hover,.rsh button.avail2:focus-visible{text-decoration-color:currentColor;outline:none}
.rsh .aistar{position:relative;display:inline-block;width:.3em;height:.3em;margin:0 -.04em 0 -.05em;padding:0;border:0;background:none;color:var(--ink2);vertical-align:.62em;cursor:pointer;font-size:inherit;line-height:0;opacity:0;transform:scale(0) rotate(-90deg);-webkit-tap-highlight-color:transparent}
.rsh .aistar::before{content:"";position:absolute;inset:max(-14px,-.2em)}
.rsh .aistar svg{display:block;width:100%;height:100%;fill:currentColor;overflow:visible}
.rsh .aistar.in{animation:starIn .7s cubic-bezier(.3,1.7,.5,1) forwards}
.rsh .aistar.in svg{animation:starTw 9s ease-in-out 3s infinite}
.rsh .aistar:focus-visible{outline:2px solid var(--ink2);outline-offset:4px;border-radius:50%}
.rsh .aitip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);padding:7px 11px;border-radius:9px;background:#121214;color:#FFFFFF;font:500 14px/1.2 Geist,system-ui,sans-serif;font-style:normal;letter-spacing:0;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s .2s;z-index:40}
@media (hover:hover){.rsh .aistar:hover .aitip{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}}
.rsh .aistar:focus-visible .aitip,.rsh .aistar.open .aitip{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
@media (max-width:600px){.rsh .aitip{left:auto;right:-8px;transform:translateY(6px)}.rsh .aistar.open .aitip,.rsh .aistar:focus-visible .aitip{transform:none}}
@media (prefers-reduced-motion: reduce){.rsh .aistar{opacity:1;transform:none}.rsh .aistar.in,.rsh .aistar.in svg{animation:none}}
.rsh .sw-build{cursor:default}
@media (hover:none){.rsh .sw-build:hover:not(.play) .bword{display:inline}.rsh .sw-build:hover:not(.play) .bcode{display:none}.rsh .dk:hover:not(.open) .dkcard,.rsh .clk:hover:not(.open) .clkcard{opacity:0;visibility:hidden}}
.rsh .dk.open .dkcard,.rsh .clk.open .clkcard{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.rsh .dk.open .dkf{animation:dkCycle 6s ease infinite;animation-delay:calc(var(--n) * 1.5s - 6s)}
.rsh .dk,.rsh .clk{-webkit-tap-highlight-color:transparent}
.rsh .cpop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;visibility:hidden;pointer-events:none;transition:visibility 0s linear .45s}
.rsh .cpop.on{visibility:visible;pointer-events:auto;transition:none}
.rsh .cpop-bg{position:absolute;inset:0;background:rgba(14,14,16,.42);opacity:0;transition:opacity .3s ease}
.rsh .cpop.on .cpop-bg{opacity:1}
.rsh .cbox{position:relative;width:min(420px,calc(100vw - 32px));box-sizing:border-box;padding:28px;background:#FFFFFF;color:#121214;border-radius:18px;box-shadow:0 30px 80px rgba(14,14,16,.28);opacity:0;transform:translateY(18px) scale(.98);transition:opacity .25s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.rsh .cpop.on .cbox{opacity:1;transform:none}
.rsh .ck{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:13px;font-weight:500}
.rsh .ck .dotp{width:7px;height:7px;border-radius:50%;background:#121214}
.rsh .cbox h2{margin:0 0 22px;font-weight:400;font-size:36px;line-height:1.1;letter-spacing:-.02em}
.rsh .cv{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:#121214;color:#FFFFFF;border-radius:12px;text-decoration:none;font-weight:500}
.rsh .cv span{font-size:12px;letter-spacing:.08em;opacity:.6}
.rsh .cv:hover{background:#2A2A2E}
.rsh .cmail{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding:10px 10px 10px 18px;border:1px solid rgba(18,18,20,.14);border-radius:12px}
.rsh .cmail a{color:inherit;text-decoration:none;overflow-wrap:anywhere}
.rsh .cmail button{appearance:none;-webkit-appearance:none;border:0;background:#F2F0EA;color:#121214;border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.rsh .cx{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:#F2F0EA;color:#121214;font-size:20px;line-height:1;cursor:pointer}
@media (max-width:600px){.rsh .cpop{place-items:end center}.rsh .cbox{width:100%;border-radius:20px 20px 0 0;padding:24px 16px calc(24px + env(safe-area-inset-bottom));transform:translateY(100%)}.rsh .cpop.on .cbox{transform:none}}
@media (prefers-reduced-motion: reduce){.rsh .cbox,.rsh .cpop-bg{transition:none !important}}
.rsh .avail2 .dotp{width:7px;height:7px;border-radius:50%;background:#121214}
.rsh .coffee{--ck:20;--cr:384;animation:ckA 250000s steps(100,end) -960s infinite,crA 2500s linear -960s infinite;counter-reset:ck var(--ck) cr var(--cr)}
.rsh .coffee::before{content:counter(ck) "," counter(cr,pad3)}
.rsh.intro .hero-intro{grid-template-rows:minmax(0,1fr) 0px calc(var(--rh) * .6)}
.rsh.intro.intro-done .hero-intro{animation:toWhite .9s cubic-bezier(.6,0,.2,1) forwards,heroRows 1.1s cubic-bezier(.6,0,.2,1) .15s forwards}
.rsh.intro .stats{opacity:0}
.rsh.intro.intro-done .stats{animation:statsIn 1s cubic-bezier(.2,.8,.2,1) .7s forwards}
.rsh.intro:not(.intro-done) .fadein{animation:none;opacity:0}
.rsh.intro.intro-done .fadein{animation:fade .9s ease .5s both}
.rsh.intro-skip .hero-intro,.rsh.intro-skip .stats,.rsh.intro-skip .fadein,.rsh.intro-skip .rise{animation-duration:.01s !important;animation-delay:0s !important}
@media (max-width: 600px){.rsh .hbot{padding:0 16px !important;grid-template-columns:1fr auto 1fr !important;column-gap:10px}.rsh .hbot .swl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.rsh .hbot > a:last-child{padding:8px 0 8px 12px}.rsh .hero-text h1{font-size:clamp(36px,min(11.4vw,var(--hfs)),66px) !important;text-wrap:balance}}
@media (prefers-reduced-motion: reduce){.rsh .coffee{animation:none}.rsh .stats .track{animation:none}.rsh.intro .hero-intro,.rsh.intro .stats{animation-duration:.01s !important;animation-delay:0s !important}.rsh .stats .track{transition:none}}
.rsh .sw-design.play .dline{animation:lnIn2 .45s cubic-bezier(.5,0,.3,1) both}
.rsh .sw-design.play .dsolid{animation:midOut2 .4s cubic-bezier(.4,0,.2,1) .5s both}
.rsh .sw-build.play .bword{display:none}
.rsh .sw-build.play .bcode{display:inline-block;animation:stamp .32s cubic-bezier(.3,0,.3,1) .95s both}
.rsh .sw-build.play .bc{animation:chIn .06s linear calc(var(--i) * .07s) both}
.rsh .sw-build.play .bk{animation:chIn .06s linear calc(var(--i) * .07s) both,shut .16s ease-in .8s forwards}
.rsh .sw{transition:background-size .3s ease}
@media (hover: none){.rsh .pw.hot.auto{filter:url(#warpHot);animation:flick .42s steps(1,end) infinite}}
.rsh .br2{display:inline}
.rsh .nw{white-space:nowrap}
@media (max-width: 900px){.rsh .br2{display:none}}
.rsh{--ink2:#2B3BFF}
.rsh .sw,.rsh .sw.act{background-image:none !important}
.rsh .pw.hot,.rsh .pw.hot.auto{animation:none !important;opacity:1 !important}
.rsh .loc{display:flex;gap:8px;align-items:center}
.rsh .dk,.rsh .clk{position:relative;display:inline-block;cursor:default;outline:none}
.rsh:not(.intro) .loc:not(.seen) > span,.rsh.intro-done .loc:not(.seen) > span{animation:locBounce 40s cubic-bezier(.3,0,.3,1) 3s infinite}
.rsh:not(.intro) .loc:not(.seen) > .clk,.rsh.intro-done .loc:not(.seen) > .clk{animation-delay:3.18s}
@media (prefers-reduced-motion: reduce){.rsh .loc > span{animation:none !important}}
.rsh .dk{font-weight:600}
.rsh .clk{font-weight:300;font-variant-numeric:tabular-nums}
.rsh .dkcard,.rsh .clkcard{position:absolute;left:-10px;bottom:calc(100% + 14px);z-index:40;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s .2s;pointer-events:none}
.rsh .dk:hover .dkcard,.rsh .dk:focus-visible .dkcard,.rsh .clk:hover .clkcard,.rsh .clk:focus-visible .clkcard{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.rsh .dkcard{width:200px;padding:8px 8px 10px;background:#FFFFFF;border:1px solid rgba(18,18,20,.12);border-radius:12px;box-shadow:0 18px 40px rgba(18,18,20,.16)}
.rsh .dkpics{position:relative;display:block;height:150px}
.rsh .dkf{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;opacity:0}
.rsh .dkf:first-child{opacity:1}
.rsh .dkf svg{display:block;width:100%;height:118px;border-radius:7px}
.rsh .dkf .cap{font-size:12.5px;font-weight:500;color:#46454B;padding:0 2px}
.rsh .dk:hover .dkf,.rsh .dk:focus-visible .dkf{animation:dkCycle 6s ease infinite;animation-delay:calc(var(--n) * 1.5s - 6s)}
.rsh .clkcard{width:max-content;max-width:260px;padding:9px 13px;background:#121214;color:#FFFFFF;border-radius:10px;font-size:14px;font-weight:400;line-height:1.35;white-space:normal}
@media (prefers-reduced-motion: reduce){.rsh .dk:hover .dkf{animation:none}}
.rsh .sw.act{background-image:linear-gradient(#121214,#121214);background-size:100% 3px}
.rsh.th-dark.day.intro.intro-done .hero-intro{animation:toPaper .9s cubic-bezier(.6,0,.2,1) forwards,heroRows 1.1s cubic-bezier(.6,0,.2,1) .15s forwards}
.rsh.th-dark.day .statswrap,.rsh.th-dark.day .hbot{background:#F9F8F5}
.rsh.th-dark.intro.intro-done .hero-intro{animation:toInk .9s cubic-bezier(.6,0,.2,1) forwards,heroRows 1.1s cubic-bezier(.6,0,.2,1) .15s forwards}
.rsh.th-dark.hd .hero-intro{color:#F2F0EA;--gl:rgba(242,240,234,.09);--ink2:var(--acc);transition:color .9s cubic-bezier(.6,0,.2,1)}
.rsh.th-dark.hd .hero-intro h1{color:#F2F0EA !important}
.rsh.th-dark.hd .statswrap,.rsh.th-dark.hd .hbot{background:#121214;color:#F2F0EA;transition:background-color .9s,color .9s}
.rsh.th-dark.hd .stats{border-bottom-color:rgba(242,240,234,.09)}
.rsh.th-dark.hd .stats .sti{border-right-color:rgba(242,240,234,.09)}
.rsh.th-dark.hd .stats span:not(.coffee){color:rgba(242,240,234,.58)}
.rsh.th-dark.hd .dline{-webkit-text-stroke-color:#F2F0EA}
.rsh.th-dark.hd .dsolid{color:#F2F0EA}
.rsh.th-dark.hd .sw.act{background-image:linear-gradient(#F2F0EA,#F2F0EA)}
.rsh.th-dark.hd .avail2 .dotp{background:var(--acc);animation:pulseA 1.8s ease-out infinite}
.rsh.th-dark.hd .clkcard,.rsh.th-dark.hd .aitip{background:#F2F0EA;color:#121214}
.rsh.th-dark.hd .loc{color:rgba(242,240,234,.72)}
.rsh.th-dark.hd .hbot a,.rsh.th-dark.hd .hero-intro a{color:#F2F0EA}
.rsh.f-literata .hero-intro h1{letter-spacing:-.02em !important}
@keyframes riseIn{from{opacity:0;transform:translateY(.55em) scale(.9)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pulseD{0%{box-shadow:0 0 0 0 rgba(18,18,20,.5)}100%{box-shadow:0 0 0 9px rgba(18,18,20,0)}}
@keyframes flick{0%{opacity:1}14%{opacity:.3}22%{opacity:1}47%{opacity:.65}53%{opacity:1}79%{opacity:.2}85%{opacity:1}}
@keyframes lnIn2{from{opacity:1;clip-path:inset(-30% 100% -30% -10%)}to{opacity:1;clip-path:inset(-30% -20% -30% -10%)}}
@keyframes midOut2{from{clip-path:inset(-30% 50% -30% 50%)}to{clip-path:inset(-30% -20% -30% -10%)}}
@keyframes chIn{from{max-width:0;opacity:0}to{max-width:1.2em;opacity:1}}
@keyframes shut{from{max-width:1.2em;opacity:1}to{max-width:0;opacity:0}}
@keyframes stamp{0%{transform:none}35%{transform:scale(1.13)}65%{transform:scale(.95)}100%{transform:none}}
@keyframes toWhite{to{background-color:#FFFFFF}}
@keyframes statsIn{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes starIn{0%{opacity:0;transform:scale(0) rotate(-90deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes starTw{0%,86%,100%{transform:none}90%{transform:scale(1.35) rotate(45deg)}94%{transform:scale(.9) rotate(80deg)}}
@property --ck{syntax:"<integer>";inherits:false;initial-value:20}
@property --cr{syntax:"<integer>";inherits:false;initial-value:384}
@counter-style pad3{system:extends decimal;pad:3 "0"}
@keyframes ckA{from{--ck:20}to{--ck:120}}
@keyframes crA{from{--cr:0}to{--cr:1000}}
@keyframes heroRows{to{grid-template-rows:minmax(0,1fr) calc(var(--rh) * 1.5) calc(var(--rh) * .6)}}
@keyframes locBounce{0%{transform:none}1%{transform:translateY(-7px)}2%{transform:none}2.6%{transform:translateY(-2.5px)}3.2%,100%{transform:none}}
@keyframes dkCycle{0%{opacity:0;transform:scale(1.03)}5%,24%{opacity:1;transform:none}29%,100%{opacity:0}}
@keyframes out{to{opacity:0}}
@keyframes fill{from{width:0}to{width:100%}}
@keyframes toInk{to{background-color:#121214}}
@keyframes toPaper{to{background-color:#F9F8F5}}
@keyframes pulseA{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 70%,transparent)}100%{box-shadow:0 0 0 9px transparent}}