/* ---------- common.css */
@font-face { font-family: 'Instrument Sans'; font-weight: 400 700; font-display: swap; src: url('/felt/fonts/instrument.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url('/felt/fonts/Bricolage.woff2') format('woff2'); }
:root {--ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.3, 1.4, .5, 1); --ink: #111114; --muted: #5d5f6a; --subtle: #8b8d97; --hair: #eaeaed; font: 400 15px/1.5 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: -.008em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal;}
* {box-sizing: border-box;}
html, body {margin: 0;}
html {overflow-x: clip;}
a {color: inherit; text-decoration: none;}
img, video {display: block;}
button {font: inherit; letter-spacing: inherit;}
.wrap {width: min(1200px, calc(100% - 48px)); margin-inline: auto;}
.grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;}
.c5 {grid-column: span 5;}
.c7 {grid-column: span 7;}
.top {position: sticky; top: 0; z-index: 20;}
.nav {display: flex; align-items: center; gap: 34px; height: 64px; font-size: 14px;}
.nav .logo {height: 24px;}
.links {display: flex; gap: 26px;}
.end {display: flex; align-items: center; gap: 18px; margin-left: auto;}
.btn {display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 15px; border: 0; border-radius: 10px; cursor: pointer; white-space: nowrap; font-weight: 500; font-size: 14px; transition: transform 160ms var(--ease), background 200ms;}
.btn:active {transform: scale(.97);}
.field {display: flex; align-items: center; gap: 8px; width: min(480px, 100%); padding: 5px 5px 5px 16px;}
.field input {flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: inherit;}
.line {display: block; white-space: nowrap;}
#slot {display: inline-block; vertical-align: top;}
.wd {display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .18em; margin: -.08em -.02em -.18em;}
.wd i {display: inline-block; font-style: normal; transform: translateY(115%); transition: transform 760ms var(--ease) calc(var(--n, 0) * 34ms);}
[data-in] .wd i {transform: none;}
[data-rv] {opacity: 0; transform: translateY(16px); transition: opacity 620ms var(--ease) var(--rd, 80ms), transform 820ms var(--ease) var(--rd, 80ms);}
[data-rv][data-in] {opacity: 1; transform: none;}
.e {transition: opacity 760ms var(--ease) var(--d, 0ms), transform 980ms var(--ease) var(--d, 0ms);}
html:not(.ready) .e {opacity: 0; transform: translateY(16px);}
.story {position: relative; height: calc(100svh - 64px + 9 * 78vh);}
.stage {position: sticky; top: 64px; height: calc(100svh - 64px); display: flex; align-items: center;}
.inner {display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 36px; align-items: stretch;}
.side {position: relative; display: flex; flex-direction: column; min-width: 0;}
.lines {position: relative; flex: 1; min-height: 240px;}
.cap-i {position: absolute; left: 0; right: 0; top: 0; visibility: hidden;}
.cap-i[data-on] {visibility: visible;}
.cap-i .wd i {transition: none;}
.cap-i[data-on] .wd i {transform: none; transition: transform 760ms var(--ease) calc(var(--n, 0) * 30ms);}
.cap-i p {opacity: 0; transform: translateY(8px);}
.cap-i[data-on] p {opacity: 1; transform: none; transition: opacity 560ms var(--ease) 220ms, transform 760ms var(--ease) 220ms;}
.tally {display: flex; gap: 18px; margin: 0; font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums;}
.tally b {margin-left: 4px; font-weight: 500;}
.track {display: flex; margin: 0 0 14px; padding: 0; list-style: none;}
.track li {display: flex; align-items: center; flex: 1; min-width: 0;}
.track li:last-child {flex: none;}
.track button {all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; white-space: nowrap; transition: color 200ms;}
.track button:focus-visible {outline: 2px solid #1f7fea; outline-offset: 2px; border-radius: 4px;}
.track svg {width: 11px; height: 12px; flex: none; stroke-width: 1.4; transition: fill 200ms, stroke 200ms, transform 420ms var(--spring);}
.track [data-now] {font-weight: 500;}
.track [data-now] svg {transform: scale(1.26);}
.seg {flex: 1; height: 1px; margin: 0 10px;}
.win {position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: #f1f1f2;}
.win canvas {position: absolute; inset: 0; z-index: 3; pointer-events: none;}
.film {position: absolute; left: 0; top: 0; width: 1120px; height: 700px; transform-origin: 0 0; transform: scale(var(--k, 1));}
.scene {position: absolute; inset: 0; overflow: hidden; display: none;}
.scene[data-on] {display: block;}
.cam {position: absolute; left: 0; top: 0; width: 1120px; transform-origin: 0 0;}
.scene[data-on] .cam {will-change: transform;}
.cam > .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.ly {position: absolute; display: block; max-width: none; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 460ms var(--ease) var(--dl, 0ms), transform 720ms var(--ease) var(--dl, 0ms);}
.ly > img {display: block; width: 100%; height: 100%;}
.ly[data-on] {opacity: 1; transform: none;}
.ly.pop {transform: translate3d(0, 6px, 0) scale(.72); transition: opacity 240ms ease var(--dl, 0ms), transform 760ms var(--spring) var(--dl, 0ms);}
.ly.pop[data-on] {transform: none;}
.ly.col {opacity: 1; transform: scaleY(.002); transform-origin: 50% 100%; transition: transform 760ms cubic-bezier(.22, 1, .36, 1) var(--dl, 0ms);}
.ly.col[data-on] {transform: none;}
.ly.fade {transform: none;}
.ly.wipe {opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 760ms var(--ease) var(--dl, 0ms);}
.ly.wipe[data-on] {clip-path: inset(-30px -30px -60px -30px);}
.ly.alt {transform: none; transition: opacity 280ms ease;}
.scene[data-still] .ly, .scene[data-still] .ly.col, .scene[data-still] .ly.wipe {transition: none !important;}
.ly.spin {z-index: 2;}
.ly.spin[data-on] > img {animation: turn 1100ms linear infinite;}
@keyframes turn { to { transform: rotate(360deg); } }
.ly .back {position: absolute; inset: 7px 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(17 17 20 / .06), 0 22px 34px -20px rgb(23 37 84 / .4); opacity: 0; transition: opacity 240ms;}
.ly > img {position: relative;}
.scene[data-move] .ly[data-id='card1'] {transform: translate3d(var(--mx), var(--my), 0); opacity: 0; transition: transform 1150ms cubic-bezier(.62, .02, .2, 1), opacity 180ms linear 1040ms;}
.scene[data-move] .ly[data-id='card1'] .back {opacity: 1;}
.ly[data-id='moved'] {transform: translate3d(var(--mx), var(--my), 0); opacity: 0; transition: opacity 180ms;}
.scene[data-move] .ly[data-id='moved'] {opacity: 1; transition: opacity 180ms linear 1040ms;}
.scene[data-move] .ly[data-id='card2'], .scene[data-move] .ly[data-id='card3'] {transform: translate3d(0, -80px, 0); transition: transform 760ms var(--ease) 260ms;}
.scene[data-move] .ly[data-id='colhead1'], .scene[data-move] .ly[data-id='colhead4'], .scene[data-move] .ly[data-id='lead'] {opacity: 0; transition: opacity 260ms ease 500ms;}
.scene[data-move] .ly[data-id='count-ip'], .scene[data-move] .ly[data-id='lead-after'] {opacity: 1; transition: opacity 260ms ease 500ms;}
.scene[data-move] .ly[data-id='count-done'] {opacity: 1; transition: opacity 260ms ease 1040ms;}
.scene[data-move] .ly[data-id='colhead4'] {transition-delay: 1040ms;}
.mk {position: absolute; border-radius: 3px; background: rgb(255 201 71 / .42); mix-blend-mode: multiply; transform: scaleX(0); transform-origin: left; transition: transform 620ms var(--ease);}
.scene[data-mark] .mk {transform: none;}
.typed {position: absolute; font: 400 14px/20px 'Instrument Sans', sans-serif; color: #18181b; letter-spacing: normal;}
.typed .ph {color: #8a8a94;}
.typed .caret {display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: #18181b; animation: caret 1s steps(1) infinite;}
@keyframes caret { 50% { opacity: 0; } }
.press {position: absolute; border-radius: 999px; pointer-events: none;}
.scene[data-press] .press {animation: pressed 640ms var(--ease) both;}
@keyframes pressed { 0% { box-shadow: 0 0 0 0 rgb(17 17 20 / .34); background: rgb(17 17 20 / .18); } 100% { box-shadow: 0 0 0 16px rgb(17 17 20 / 0); background: rgb(17 17 20 / 0); } }
.siteview {position: absolute; overflow: hidden; border-radius: 0 0 11px 11px; opacity: 0; transition: opacity 240ms ease 200ms;}
.scene[data-on] .siteview[data-on] {opacity: 1;}
.siteview img {display: block; width: 100%; will-change: transform;}
.mstack {display: none;}
.sec {position: relative; padding: 120px 0;}
.sub {margin: 18px 0 0; font-size: 17px; line-height: 1.5; text-wrap: pretty;}
@keyframes runs { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.head {align-items: end; margin-bottom: 48px;}
.head .sub {margin: 0;}
.bees {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;}
.bees li {padding: 30px 20px;}
.bees li:first-child {padding-left: 0;}
.bees b {display: block; font-size: 17px; font-weight: 500; letter-spacing: -.016em;}
.bees small {display: block; font-size: 13.5px; opacity: .62;}
.bees p {margin: 8px 0 0; font-size: 14px; line-height: 1.45; text-wrap: pretty; opacity: .8;}
.bee {position: relative; display: block; width: 104px; height: 104px; margin: 0 0 14px -6px;}
.bee > img {display: block; width: 100%; height: 100%;}
.bee-blink {position: absolute; inset: 0; pointer-events: none; opacity: 0; background: url('/felt/bees/blink-whole-256.webp') 0 0 / 500% 100% no-repeat;}
[data-blink] > .bee-blink {animation: bee-blink 200ms steps(1, end) both;}
.bee-wave {position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url('/felt/bees/wave-arm-256.webp') 0 0 / 2100% 100% no-repeat; animation: bee-wave 1470ms steps(20, end) both;}
@keyframes bee-blink { 0% { opacity: 1; background-position-x: 0%; } 20% { opacity: 1; background-position-x: 25%; } 40% { opacity: 1; background-position-x: 50%; } 60% { opacity: 1; background-position-x: 75%; } 80% { opacity: 1; background-position-x: 100%; } 100% { opacity: 0; background-position-x: 100%; } }
@keyframes bee-wave { from { background-position-x: 0%; } to { background-position-x: 100%; } }
.plainrows {margin: 0; padding: 0; list-style: none;}
.plainrows li {display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; padding: 22px 0;}
.plainrows b {font-weight: 500; font-size: 15.5px;}
.plainrows p {margin: 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; opacity: .8;}
.faq details {interpolate-size: allow-keywords;}
.faq summary {cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 18px 0; font-size: 16px; font-weight: 500; letter-spacing: -.012em;}
.faq summary::-webkit-details-marker {display: none;}
.faq summary::after {content: ''; flex: none; width: 11px; height: 11px; margin-top: 6px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; opacity: .6; transition: rotate 320ms var(--ease);}
.faq details[open] summary::after {rotate: 45deg;}
.faq details p {margin: 0; padding: 0 40px 20px 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; opacity: .8;}
.faq details::details-content {height: 0; overflow: clip; transition: height 360ms var(--ease), content-visibility 360ms allow-discrete;}
.faq details[open]::details-content {height: auto;}
.foot {position: relative; z-index: 4; padding: 34px 0 40px;}
.foot .wrap {display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 22px; align-items: center;}
.fa {display: flex; align-items: center; gap: 16px;}
.fa .logo {height: 22px;}
.fa p {margin: 0; font-size: 13.5px; opacity: .62;}
.foot nav {display: flex; gap: 22px; font-size: 13.5px; opacity: .8;}
.note {grid-column: 1 / -1; margin: 0; max-width: 780px; font-size: 12.5px; line-height: 1.5; opacity: .62;}
.note a {text-decoration: underline; text-underline-offset: 2px;}
@media (max-width: 900px) {
.story {height: auto;}
.stage {display: none;}
.mstack {display: grid; gap: 44px;}
.mstack small {display: block; font-size: 13px; font-weight: 500;}
.mstack h2 {margin: 4px 0 0; font-size: 28px; line-height: 1.08;}
.mstack p {margin: 8px 0 14px; font-size: 15px; line-height: 1.45;}
.mstack .m {position: relative; overflow: hidden; aspect-ratio: 1 / 1.05; border-radius: 12px; background: #f1f1f2;}
.mstack .m img {width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50%) top;}
.mstack .tally {margin-top: 10px; font-size: 13px; white-space: normal;}
.nav .links {display: none;}
.sec {padding: 72px 0;}
.c5, .c7 {grid-column: 1 / -1;}
.head {margin-bottom: 26px;}
.head .sub {margin-top: 14px;}
.bees {grid-template-columns: 1fr;}
.bees li {display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; padding: 16px 0;}
.bees .bee {grid-row: span 3; width: 76px; height: 76px; margin: 0;}
.plainrows {margin-top: 22px;}
.plainrows li {grid-template-columns: 1fr; row-gap: 4px;}
.faq {margin-top: 22px;}
.foot .wrap {grid-template-columns: 1fr;}
.foot nav {flex-wrap: wrap; gap: 14px;}
.line {white-space: normal;}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {animation: none !important; transition: none !important;}
.e, .wd i, [data-rv] {opacity: 1 !important; transform: none !important;}
}

/* ---------- felt.css */
:root {--navy: #1b2748; --cream: #f6efe0; --lamp: #ffc56e; --hair: rgb(27 39 72 / .14); color: var(--navy);}
body {background: #1c2d5c;}
.sky {position: fixed; inset: 0; z-index: 0; overflow: hidden;}
.sky img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;}
.sky .m {opacity: var(--m, 0);}
.sun {position: absolute; left: 0; top: 0; width: clamp(96px, 10vw, 150px); margin-left: calc(clamp(96px, 10vw, 150px) / -2); will-change: transform;}
.sky .sun img {position: static; width: 100%; height: auto; object-fit: fill; filter: drop-shadow(0 0 22px rgb(255 190 110 / .5));}
main, .foot {position: relative; z-index: 1;}
.top {position: fixed; left: 0; right: 0; top: 0; color: var(--cream); transition: background 240ms, color 240ms, box-shadow 240ms;}
.links, .in {color: rgb(246 239 224 / .78);}
.links a, .in {transition: color 160ms;}
.links a[aria-current], .links a:hover, .in:hover {color: #fff;}
.btn {background: var(--cream); color: var(--navy);}
.btn:hover {background: #fff;}
.logo.on-cream {display: none;}
.top[data-cream] {background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; box-shadow: 0 1px 0 var(--hair);}
.top[data-cream] .links, .top[data-cream] .in {color: rgb(27 39 72 / .66);}
.top[data-cream] .links a[aria-current], .top[data-cream] .links a:hover, .top[data-cream] .in:hover {color: var(--navy);}
.top[data-cream] .btn {background: var(--navy); color: var(--cream);}
.top[data-cream] .logo.on-sky {display: none;}
.top[data-cream] .logo.on-cream {display: block;}
h1, h2 {margin: 0; font-weight: 540; letter-spacing: -.036em; text-wrap: balance;}
h2 {font-size: clamp(32px, 3.5vw, 50px); line-height: 1.06;}
.cut {color: transparent; background: url('/felt/art/cut.webp') 0 0 / 460px; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 0 rgb(255 255 255 / .28)) drop-shadow(0 2px 1px rgb(6 12 36 / .55)) drop-shadow(0 12px 16px rgb(6 12 36 / .4)); letter-spacing: -.034em; font-weight: 600;}
.cut .w {display: inline-block; white-space: nowrap; color: transparent; background: linear-gradient(var(--lamp), var(--lamp)), url('/felt/art/cut.webp') 0 0 / 460px; background-blend-mode: multiply; -webkit-background-clip: text; background-clip: text;}
.hero {position: relative; height: 100svh; min-height: 620px; overflow: clip;}
.copy {position: relative; z-index: 3; padding-top: max(84px, 10.5vh); text-align: center; color: var(--cream); will-change: opacity;}
h1 {font-size: min(6.3vw, 10.4vh); line-height: 1.04;}
h1 .line {padding-bottom: .04em;}
.lede {margin: 1.5vh auto 0; font-size: clamp(16px, 2.05vh, 20px); line-height: 1.34; color: rgb(246 239 224 / .86); letter-spacing: -.012em; text-wrap: balance;}
.field {position: relative; margin: 2.2vh auto 0; background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; border-radius: 14px; color: var(--navy); box-shadow: 0 2px 0 rgb(6 12 36 / .3), 0 22px 34px -18px rgb(6 12 36 / .7); transition: box-shadow 200ms;}
.field::after {content: ''; position: absolute; inset: 4px; border: 1.25px dashed rgb(140 118 84 / .7); border-radius: 10px; pointer-events: none;}
.field input, .field .btn {position: relative; z-index: 1;}
.field input::placeholder {color: #8a7f6a;}
.field .btn {background: var(--navy); color: var(--cream);}
.field .btn:hover {background: #2a3a66;}
.field:focus-within {box-shadow: 0 0 0 2px var(--lamp), 0 22px 34px -18px rgb(6 12 36 / .7);}
.under {margin: 1.2vh 0 0; font-size: 13.5px; color: rgb(246 239 224 / .72);}
.under a {color: var(--cream); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(246 239 224 / .4);}
.props {position: absolute; inset: 0; z-index: 1; pointer-events: none;}
.hang {position: absolute; left: var(--x); top: 0; width: var(--w); height: var(--y); transform-origin: 50% 0; will-change: transform;}
.hang::before {content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgb(246 239 224 / .34);}
.hang img {position: absolute; left: 0; top: 100%; width: 100%; margin-top: -8px;}
.set {position: absolute; left: 0; bottom: 0; z-index: 2; height: max(47vh, 27.2vw); aspect-ratio: 2611 / 708; transform: translate3d(var(--tx, 0), 0, 0); transition: transform 1250ms steps(15, end);}
.set img {position: absolute; inset: 0; display: block; width: 100%; height: 100%;}
.lit {-webkit-mask-image: linear-gradient(90deg, transparent calc(var(--a, 0%) - 1.2%), #000 var(--a, 0%), #000 var(--b, 16%), transparent calc(var(--b, 16%) + 1.2%)); mask-image: linear-gradient(90deg, transparent calc(var(--a, 0%) - 1.2%), #000 var(--a, 0%), #000 var(--b, 16%), transparent calc(var(--b, 16%) + 1.2%));}
.halo {position: absolute; left: var(--hx, 9%); bottom: 12%; width: 34%; aspect-ratio: 1.5; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(255 186 110 / .46), rgb(255 170 100 / .14) 55%, transparent); mix-blend-mode: screen; pointer-events: none;}
.walkers {position: absolute; left: 0; bottom: .5vh; z-index: 3; display: flex; gap: .1vh; transform: translate3d(var(--wx, 0), 0, 0); transition: transform 1250ms steps(15, end);}
.walker {position: relative; display: block; height: 10.4vh; aspect-ratio: var(--ba, .763); will-change: transform;}
.walker img {position: relative; width: 100%; height: 100%;}
.walker::before {content: ''; position: absolute; left: 12%; right: 12%; bottom: -1%; height: 13%; border-radius: 50%; background: radial-gradient(closest-side, rgb(6 8 20 / .62), transparent);}
.walkers.fixed {left: auto; right: 2.4vw;}
.walkers.fixed {transform: none;}
.story {overflow: clip;}
.side {color: var(--cream); padding-top: 1px;}
.lines {min-height: 250px;}
.cap-i small {display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #ffe2ad;}
.cap-i h2 {font-size: clamp(30px, 2.9vw, 42px); line-height: 1.06; color: #fff;}
.cap-i p {margin: 14px 0 0; font-size: 15.5px; line-height: 1.46; color: rgb(255 251 242 / .92); text-wrap: pretty;}
.stand {position: relative; height: 150px; flex: none;}
.prop {position: absolute; left: 0; bottom: 0; width: calc(150px * var(--a, 1)); max-width: 170px; transform: translateY(46px); opacity: 0; transition: transform 200ms steps(3, end), opacity 120ms; transform-origin: 50% 100%;}
.prop img {display: block; width: 100%; filter: drop-shadow(0 10px 8px rgb(6 12 36 / .4));}
.prop[data-on] {transform: none; opacity: 1; transition: transform 520ms steps(7, end), opacity 120ms; will-change: rotate;}
.tally {align-items: center; height: 25px; margin-bottom: 14px; color: rgb(255 251 242 / .82);}
.tally b {color: #fff;}
.track button {color: rgb(255 251 242 / .66);}
.track button:hover, .track [data-past] {color: rgb(246 239 224 / .86);}
.track [data-now] {color: #fff;}
.track svg {fill: transparent; stroke: rgb(246 239 224 / .5);}
.track [data-past] svg, .track [data-now] svg {fill: var(--lamp); stroke: var(--lamp);}
.seg {background: linear-gradient(90deg, var(--lamp) calc(var(--f, 0) * 100%), rgb(246 239 224 / .22) 0);}
.frame {position: relative; padding: 11px; border-radius: 20px; background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; box-shadow: 0 3px 0 rgb(6 12 36 / .28), 0 44px 80px -36px rgb(6 12 36 / .85);}
.frame::before {content: ''; position: absolute; z-index: -1; inset: -12% -8%; background: radial-gradient(closest-side, rgb(255 196 124 / .3), transparent); pointer-events: none;}
.frame::after {content: ''; position: absolute; inset: 4.5px; border: 1.25px dashed rgb(140 118 84 / .62); border-radius: 15px; pointer-events: none;}
.win {border-radius: 9px;}
.paper {position: relative; z-index: 3; background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; border-radius: 28px; box-shadow: 0 -24px 70px -24px rgb(6 12 36 / .55), 0 24px 70px -24px rgb(6 12 36 / .5); overflow: clip;}
.sec + .sec {border-top: 1px solid var(--hair);}
.sub {color: rgb(27 39 72 / .72);}
.bees {border-bottom: 1px solid var(--hair);}
.bees li + li {border-left: 1px solid var(--hair);}
.plainrows {border-top: 1px solid var(--hair);}
.plainrows li {border-bottom: 1px solid var(--hair);}
.faq {border-top: 1px solid var(--hair);}
.faq details {border-bottom: 1px solid var(--hair);}
.close {position: relative; z-index: 2; height: 100svh; min-height: 620px; overflow: clip;}
.close h2 {font-size: min(5vw, 9vh); line-height: 1.04;}
.close .copy {padding-top: max(96px, 13vh);}
.close .under {color: #fff;}
.close .field {margin-top: 3vh;}
.set.end {left: auto; right: 0; transition: none; transform: none;}
.foot {background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; box-shadow: 0 -1px 0 var(--hair);}
@media (max-width: 900px) {
.sun {display: none;}
.hero {height: auto; min-height: 100svh; padding-bottom: 36vh;}
.copy {padding: 84px 20px 0;}
h1 {font-size: 12.6vw;}
.lede {font-size: 17px;}
.field {margin-top: 16px;}
.props {display: none;}
.set {height: 30vh;}
.walker {height: 9vh;}
.under {margin-top: 10px;}
.story {padding: 44px 0;}
.mstack {color: var(--cream);}
.mstack small {color: var(--lamp);}
.mstack h2 {color: #fff;}
.mstack p {color: rgb(246 239 224 / .86);}
.mstack .m {box-shadow: 0 0 0 6px var(--cream); margin: 6px;}
.mstack .tally {color: rgb(246 239 224 / .72);}
.mstack .tally b {color: #fff;}
.bees li + li {border-left: 0; border-top: 1px solid var(--hair);}
.close {height: auto; min-height: 100svh; padding-bottom: 34vh;}
.close h2 {font-size: 11.6vw;}
.close .copy {padding: 92px 20px 0;}
}
@media (prefers-reduced-motion: reduce) {
.set, .walkers {transition: none;}
}

/* ---------- hero.css */
.stars {position: absolute; inset: 0; z-index: 0; pointer-events: none;}
.star {position: absolute; width: var(--s); height: var(--s); background: #f6efe0; opacity: var(--o); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px rgb(255 240 210 / .5));}
.puffs {position: absolute; inset: 0; pointer-events: none;}
.set img.puff {position: absolute; inset: auto; width: 2.6%; height: auto; opacity: 0; transform: translate(-50%, -100%) scale(.5); transform-origin: 50% 100%;}

/* ---------- title.css */
[data-t] .hero h1.cut {background: none;}
[data-t] .hero h1 {font-family: 'Bricolage', 'Instrument Sans', sans-serif; font-weight: 760; font-stretch: 86%; letter-spacing: -.02em;}
[data-t] .hero h1 .w {background: linear-gradient(var(--lamp), var(--lamp)), url('/felt/art/cut.webp') 0 0 / 460px; background-blend-mode: multiply; -webkit-background-clip: text; background-clip: text; color: transparent;}
[data-t='a'] .hero h1 {font-size: min(7vw, 11.4vh); line-height: 1.08; background: none;}
/* The mobile is as wide as its widest row and both rows stay centred under it, so a long word never reads as drifting right. */
[data-t='a'] .hero h1 .mob {display: inline-flex; flex-direction: column; align-items: center; text-align: left;}
[data-t='a'] .hero h1 .row {display: flex; gap: .26em;}
[data-t='a'] .hero h1 .row + .row {margin-top: .12em;}
[data-t='a'] .pc {flex: none;}
[data-t='a'] .hero .copy {padding-top: max(96px, 12vh);}
[data-t='a'] .pc {position: relative; display: inline-block; translate: 0 var(--dy); transform-origin: var(--ax, 50%) calc(var(--ay, 0px) - var(--len, 300px));}
[data-t='a'] .row:first-child .pc {z-index: 2;}
[data-t='a'] .row + .row .pc {z-index: 1;}
[data-t='a'] .pc .txt {position: relative; z-index: 1; display: inline-block; color: transparent; background: url('/felt/art/cut.webp') 0 0 / 460px; -webkit-background-clip: text; background-clip: text;}
[data-t='a'] .pc.word .txt {background: none;}
[data-t='a'] .pc .w {display: inline-block;}
[data-t='a'] .pc .bl {display: inline-block; width: 0; height: 0; vertical-align: baseline;}
[data-t='a'] .th {position: absolute; z-index: 0; left: calc(var(--ax, 50%) - .75px); top: calc(var(--ay, 0px) - var(--len, 300px)); width: 1.5px; height: calc(var(--len, 300px) + 3px); background: linear-gradient(rgb(246 239 224 / 0) 0, rgb(246 239 224 / 0) 84px, rgb(246 239 224 / .3) 150px, rgb(246 239 224 / .5) 100%); pointer-events: none;}
[data-t='a'] .kn {position: absolute; z-index: 2; left: var(--ax, 50%); top: var(--ay, 0px); width: .085em; height: .07em; translate: -50% -42%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8ea, #d8c6a2 70%); box-shadow: 0 .01em .02em rgb(6 12 36 / .5); pointer-events: none;}
[data-t='a'] .pc:not([style*='--ax']) .th, [data-t='a'] .pc:not([style*='--ax']) .kn {display: none;}
[data-t='a'] .pc[data-chain] .th {background: rgb(246 239 224 / .55);}
[data-t='a'] .kn.up {display: none;}
[data-t='a'] .pc[data-chain] .kn.up {display: block; top: calc(var(--ay, 0px) - var(--len, 0px)); translate: -50% -58%; width: .07em; height: .06em;}
[data-t='a'] .hero h1 .row {perspective: none;}
@keyframes liftoff { to { translate: .06em -.7em; rotate: 18deg; opacity: 0; } }
@keyframes laid { 0% { translate: 0 -.55em; rotate: calc(var(--r) * 3); opacity: 0; } 50% { opacity: 1; } 80% { translate: 0 calc(var(--y) + .04em); } 100% { translate: 0 var(--y); rotate: var(--r); } }
@media (max-width: 900px) {
[data-t] .hero h1 {font-size: 12.4vw !important;}
[data-t='a'] .hero h1 .row {flex-wrap: wrap;}
}
[data-t='a'][data-lit] .pc .txt {filter: drop-shadow(.07em .13em .045em rgb(4 8 26 / .55)); background: linear-gradient(rgb(255 255 255 / .16), rgb(255 255 255 / 0) 36%, rgb(255 255 255 / 0) 56%, rgb(255 168 92 / .34)), url('/felt/art/cut.webp') 0 0 / 460px; -webkit-background-clip: text; background-clip: text;}
[data-t='a'][data-lit] .pc.word .txt {background: none;}
[data-t='a'][data-lit] .pc.word .w {background: linear-gradient(rgb(255 255 255 / .18), rgb(255 255 255 / 0) 40%, rgb(255 140 60 / .22)), linear-gradient(var(--lamp), var(--lamp)), url('/felt/art/cut.webp') 0 0 / 460px; background-blend-mode: normal, multiply, normal; -webkit-background-clip: text; background-clip: text;}
[data-t='a'][data-lit] .th, [data-t='a'][data-lit] .kn {filter: drop-shadow(.07em .13em .02em rgb(4 8 26 / .4));}
.beam {position: absolute; left: 50%; top: 2vh; z-index: 0; width: min(92vw, 1320px); height: 66vh; transform: translateX(-50%); pointer-events: none; background: radial-gradient(48% 46% at 50% 34%, rgb(168 188 255 / .2), rgb(140 162 240 / .08) 52%, rgb(140 162 240 / 0) 78%);}
.mote {position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff4dc; box-shadow: 0 0 6px rgb(255 240 210 / .6);}
.mob {position: relative;}
[data-t='a'] h1.touchy .pc {cursor: grab;}
[data-t='a'] h1.touchy .pc:active {cursor: grabbing;}
@media (max-width: 900px) {
.beam {display: none;}
}

/* ---------- days.css */
[data-d~='a'] .track {position: relative; z-index: 2; display: block; height: 76px; margin: 0 0 12px;}
[data-d~='a'] .track svg.line {position: absolute; left: 0; top: 0; height: 40px; overflow: visible; pointer-events: none;}
[data-d~='a'] .track .ln {fill: none; stroke: rgb(246 239 224 / .42); stroke-width: 1.5;}
[data-d~='a'] .track .ln.on {stroke: var(--lamp); stroke-width: 2;}
[data-d~='a'] .track .pin {position: absolute; top: 2px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8ea, #c9b48c 70%); filter: drop-shadow(.06em .14em .08em rgb(4 8 26 / .5));}
[data-d~='a'] .track .pin.l {left: 0;}
[data-d~='a'] .track .pin.r {left: 100%;}
[data-d~='a'] .track li {position: absolute; display: block; flex: none; width: 0; height: 0; transform-origin: 0 0;}
[data-d~='a'] .track .seg, [data-d~='a'] .track button svg {display: none;}
[data-d~='a'] .track .th {position: absolute; left: -.75px; top: 0; width: 1.5px; height: var(--len); background: rgb(246 239 224 / .62);}
[data-d~='a'] .track .kn {position: absolute; z-index: 2; left: -3.5px; top: calc(var(--len) - 2px); width: 7px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8ea, #d8c6a2 70%);}
[data-d~='a'] .track button {position: absolute; left: 0; top: var(--len); transform: translateX(-50%); padding: 8px 11px 7px; border-radius: 7px; background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; color: rgb(27 39 72 / .8); font: 700 13px/1 'Bricolage', sans-serif; font-stretch: 86%; letter-spacing: 0; filter: drop-shadow(.08em .2em .12em rgb(4 8 26 / .5)); transition: none;}
[data-d~='a'] .track button::after {content: ''; position: absolute; inset: 3px; border: 1px dashed rgb(140 118 84 / .7); border-radius: 5px; pointer-events: none;}
[data-d~='a'] .track button span {position: relative;}
[data-d~='a'] .track li:not(:has([data-past], [data-now])) button {opacity: .58;}
[data-d~='a'] .track button[data-now] {padding: 10px 14px 9px; font-size: 15px; color: #4a2a08; background: linear-gradient(var(--lamp), var(--lamp)), url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; background-blend-mode: multiply, normal;}
[data-d~='a'] .track button[data-now]::after {border-color: rgb(120 70 20 / .55);}
[data-d~='a'] .track button:hover {color: var(--navy);}
[data-d~='a'] .frame {transform-origin: 50% -70vh;}
[data-d~='a'] .frame .hook {position: absolute; bottom: calc(100% - 7px); width: 1.5px; height: 46vh; background: linear-gradient(rgb(246 239 224 / 0), rgb(246 239 224 / .55) 22vh);}
[data-d~='a'] .frame .hook.l {left: 9%;}
[data-d~='a'] .frame .hook.r {right: 9%;}
[data-d~='a'] .frame .hook::after {content: ''; position: absolute; left: -3.5px; bottom: 0; width: 8px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8ea, #d8c6a2 70%);}
[data-d~='a'] .tally {height: auto; gap: 12px; margin-bottom: 22px; align-items: flex-start;}
[data-d~='a'] .tally > span {position: relative; display: inline-flex; align-items: baseline; gap: 2px; padding: 8px 12px 8px 24px; border-radius: 4px 10px 10px 4px; background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; color: rgb(27 39 72 / .7); font-size: 12.5px; rotate: -2deg; transform-origin: 12px 50%; filter: drop-shadow(.06em .18em .12em rgb(4 8 26 / .5));}
[data-d~='a'] .tally > span:nth-child(2) {rotate: 1.6deg;}
[data-d~='a'] .tally b {margin-left: 5px; color: var(--navy); font: 700 15px/1 'Bricolage', sans-serif; font-stretch: 86%;}
[data-d~='a'] .tally .hole {position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #23315c; box-shadow: inset 0 1px 1.5px rgb(0 0 0 / .5);}
[data-d~='a'] .tally .hole::after {content: ''; position: absolute; left: 2.75px; bottom: 3.5px; width: 1.5px; height: 34vh; background: linear-gradient(rgb(246 239 224 / 0), rgb(246 239 224 / .5) 18vh);}
[data-d~='a'] .cap-i h2 {font-family: 'Bricolage', sans-serif; font-weight: 760; font-stretch: 86%; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.02; letter-spacing: -.012em;}
[data-d~='a'] .cap-i h2 .wd i {color: transparent; background: linear-gradient(rgb(255 255 255 / .16), rgb(255 255 255 / 0) 40%, rgb(255 168 92 / .2)), url('/felt/art/cut.webp') 0 0 / 460px; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(.04em .08em .03em rgb(4 8 26 / .5));}
[data-d~='b'] .stand {--sh: clamp(200px, 36vh, 316px); height: var(--sh);}
[data-d~='a'][data-d~='b'] .stand {--sh: clamp(190px, 31vh, 280px);}
[data-d~='b'] .lines {min-height: 196px;}
.shop {position: absolute; left: 0; bottom: 0; height: 100%; aspect-ratio: 391 / 557;}
.shop::before {content: ''; position: absolute; left: -8%; right: -8%; bottom: -3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgb(4 10 24 / .55), transparent);}
.shop .bldg {position: absolute; inset: 0; clip-path: inset(100% 0 0 0);}
.shop .bldg img {position: absolute; inset: 0; width: 100%; height: 100%;}
.shop .bldg .dy, .shop .bldg .lt {opacity: 0;}
.shop .glow {position: absolute; left: -45%; right: -45%; bottom: -10%; height: 66%; background: radial-gradient(closest-side, rgb(255 186 110 / .5), rgb(255 170 100 / .14) 55%, transparent); mix-blend-mode: screen; opacity: 0; pointer-events: none;}
.shop .plot {position: absolute; z-index: 2; left: 40%; bottom: 0; width: 70%; transform-origin: 50% 100%; transition: transform 500ms steps(5, end), opacity 420ms steps(4, end);}
.shop .plot img {display: block; width: 100%;}
.shop .plot .dy {position: absolute; inset: 0; height: 100%; opacity: 0;}
.shop .plot[data-gone] {transform: translateY(18%) rotate(9deg); opacity: 0;}
.shop .plot .say {position: absolute; left: 9%; right: 9%; top: 5%; height: 39%; display: grid; place-items: center; text-align: center; font: 700 clamp(12px, 1.75vh, 17px) / 1.04 'Bricolage', sans-serif; font-stretch: 86%; color: #2a2018; text-wrap: balance;}
.shop .puffs {position: absolute; inset: auto 0 0 0; height: 0;}
.shop .puffs img {position: absolute; bottom: 0; width: 30%; opacity: 0;}
.shop .opensign {position: absolute; z-index: 1; left: 13.5%; top: 63%; width: 21%; transform-origin: 50% 0; opacity: 0; filter: drop-shadow(0 .12em .1em rgb(4 8 26 / .45));}
.shop[data-open] .opensign {opacity: 1;}
[data-d~='b'] .prop {left: calc(var(--sh) * .8 + 6px); width: calc(var(--sh) * .3 * var(--a)); max-width: none;}
.cap-i p b.who {color: #fff; font-weight: 600;}
@media (max-width: 900px) {
[data-d] .stand {height: auto;}
[data-d~='a'] .mstack small {position: relative; display: inline-block; margin-top: 30px; padding: 7px 11px 6px; border-radius: 7px; background: linear-gradient(var(--lamp), var(--lamp)), url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; background-blend-mode: multiply, normal; color: #4a2a08; font: 700 14px/1 'Bricolage', sans-serif; font-stretch: 86%; rotate: -2deg; filter: drop-shadow(.06em .18em .1em rgb(4 8 26 / .5));}
[data-d~='a'] .mstack small::before {content: ''; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 30px; background: rgb(246 239 224 / .6);}
[data-d~='a'] .mstack small::after {content: ''; position: absolute; inset: 3px; border: 1px dashed rgb(120 70 20 / .55); border-radius: 5px;}
[data-d~='a'] .mstack h2 {margin-top: 10px; font-family: 'Bricolage', sans-serif; font-weight: 760; font-stretch: 86%; font-size: 32px; line-height: 1.02; letter-spacing: -.012em; color: transparent; background: linear-gradient(rgb(255 255 255 / .16), rgb(255 255 255 / 0) 40%, rgb(255 168 92 / .2)), url('/felt/art/cut.webp') 0 0 / 460px; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(.04em .08em .03em rgb(4 8 26 / .5));}
.mrow {display: flex; align-items: flex-end; gap: 18px; margin-top: 18px;}
.mrow .mshop {position: relative; flex: none; height: 168px;}
.mrow .mshop .say {font-size: 11px;}
.mrow .tally {flex-direction: column; align-items: flex-start; gap: 12px; height: auto; margin: 0 0 6px; padding-top: 22px;}
[data-d~='a'] .mrow .tally .hole::after {height: 22px;}
}

/* ---------- seams.css */
[data-x] .story {height: calc(100svh - 64px + 9 * 78vh + var(--T, 0px));}
[data-x] .paperwrap {position: relative; z-index: 3; margin-top: calc(-100svh - var(--T, 0px));}
[data-x] .paperwrap > .paper {position: sticky; top: 0; clip-path: inset(0 0 100% 0);}
[data-x] .paperwrap > .seam-space {display: block; height: var(--T, 0px);}
[data-x] .closewrap {position: relative; z-index: 2; margin-top: -100svh;}
[data-x] .closewrap > .close {position: sticky; top: 0;}
[data-x] .closewrap > .seam-space {display: block; height: 100svh;}
[data-x] .paper .sec + .sec {border-top: 0;}
[data-x] .paper .sec + .sec::before {content: ''; position: absolute; left: max(24px, calc(50% - 600px)); right: max(24px, calc(50% - 600px)); top: -1px; height: 2px; background: repeating-linear-gradient(90deg, rgb(140 118 84 / .6) 0 10px, transparent 10px 17px);}
[data-x='a'] .hero {overflow-x: clip; overflow-y: visible;}
[data-x='a'] .story {z-index: 3;}
[data-x='a'] .hero .copy {will-change: auto;}
[data-x='a'] .hero h1, [data-x='a'] .hero .props .hang, [data-x='a'] .hero #set, [data-x='a'] .hero #walkers {will-change: translate;}
.drop-hem {position: fixed; left: 0; right: 0; top: -16px; z-index: 6; display: none; height: 16px; pointer-events: none; background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; border-radius: 0 0 6px 6px; box-shadow: 0 2px 0 rgb(6 12 36 / .22), 0 26px 44px -10px rgb(6 12 36 / .55);}
.drop-hem::after {content: ''; position: absolute; left: 14px; right: 14px; top: 6px; border-top: 1.5px dashed rgb(140 118 84 / .7);}
[data-x='a'] .paper {border-radius: 28px 28px 10px 10px;}
[data-x='a'] .paper::after {content: ''; position: absolute; left: 22px; right: 22px; bottom: 9px; border-top: 1.5px dashed rgb(140 118 84 / .7); pointer-events: none;}

/* ---------- nav.css */
[data-n] .top {transition: none;}
[data-n] .top .btn {transition: transform 160ms var(--ease);}
[data-n] .top .btn, [data-n] .top[data-cream] .btn {position: relative; background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; color: var(--navy);}
[data-n] .top .btn::after {content: ''; position: absolute; inset: 3px; border: 1px dashed rgb(140 118 84 / .7); border-radius: 7px; pointer-events: none;}
[data-n] .top .btn:hover {background-color: #fff;}
[data-n='b'] .top, [data-n='b'] .top[data-cream] {background: none; box-shadow: none; pointer-events: none;}
[data-n='b'] .top .nav {position: relative; pointer-events: auto; width: fit-content; max-width: calc(100% - 32px); height: 52px; margin: 18px auto 0; padding: 0 7px 0 20px; gap: 28px; border-radius: 16px; background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; color: var(--navy); box-shadow: 0 2px 0 rgb(6 12 36 / .22), 0 18px 30px -16px rgb(6 12 36 / .65); transform-origin: 50% -18px;}
[data-n='b'] .top .nav::after {content: ''; position: absolute; inset: 4px; border: 1.25px dashed rgb(140 118 84 / .6); border-radius: 12px; pointer-events: none;}
[data-n='b'] .top .nav::before {content: ''; position: absolute; left: 12%; right: 12%; bottom: 100%; height: 18px; border-left: 1.5px solid rgb(150 128 96 / .75); border-right: 1.5px solid rgb(150 128 96 / .75); pointer-events: none;}
[data-n='b'] .top .logo.on-cream, [data-n='b'] .top[data-cream] .logo.on-cream {display: block;}
[data-n='b'] .top .logo.on-sky, [data-n='b'] .top[data-cream] .logo.on-sky {display: none;}
[data-n='b'] .top .links a, [data-n='b'] .top[data-cream] .links a, [data-n='b'] .top .in, [data-n='b'] .top[data-cream] .in {position: relative; color: rgb(27 39 72 / .66);}
[data-n='b'] .top .links a:hover, [data-n='b'] .top .links a[aria-current], [data-n='b'] .top[data-cream] .links a[aria-current], [data-n='b'] .top .in:hover {color: var(--navy);}
[data-n='b'] .top .links a[aria-current]::after {content: ''; position: absolute; left: 0; right: 0; bottom: -7px; border-top: 2px dashed #d08a2a;}
[data-n='b'] .top .btn, [data-n='b'] .top[data-cream] .btn {background: url('/felt/art/cut.webp') 0 0 / 460px, #1b2748; background-blend-mode: multiply; color: var(--cream);}
[data-n='b'] .top .btn::after {border-color: rgb(246 239 224 / .4);}
[data-n='b'] .top .btn:hover {background-color: #26346a;}
@media (max-width: 900px) {
[data-n='b'] .top .nav {margin-top: 14px; height: 50px; gap: 16px;}
}

/* ---------- motion.css */
[data-m='calm'] .prop {transition: transform 250ms steps(3, end), opacity 120ms;}
[data-m='calm'] .prop[data-on] {transition: transform 500ms steps(6, end), opacity 120ms;}
[data-m='calm'] .shop .plot {transition: transform 500ms steps(6, end), opacity 420ms steps(5, end);}

/* ---------- sheet.css */
[data-s] .paper {--stitch: rgb(140 118 84 / .55); --sew: repeating-linear-gradient(90deg, var(--stitch) 0 8px, transparent 8px 14px); --sew-v: repeating-linear-gradient(180deg, var(--stitch) 0 8px, transparent 8px 14px);}
[data-s] .paper .sec h2 {font-family: 'Bricolage', sans-serif; font-weight: 760; font-stretch: 86%; letter-spacing: -.012em; font-size: clamp(36px, 3.5vw, 52px); line-height: 1.02; color: var(--navy);}
[data-s] .paper .sub {color: rgb(27 39 72 / .72);}
[data-s] .bees {border: 0; background: var(--sew) 0 100% / 100% 1.5px no-repeat;}
[data-s] .bees li + li {border: 0; background: var(--sew-v) 0 0 / 1.5px 100% no-repeat;}
[data-s] .bees b {font-family: 'Bricolage', sans-serif; font-weight: 720; font-stretch: 86%; font-size: 20px; letter-spacing: -.005em;}
[data-s] .plainrows {border: 0; counter-reset: step; background: var(--sew) 0 0 / 100% 1.5px no-repeat;}
[data-s] .plainrows li {border: 0; counter-increment: step; grid-template-columns: 44px 220px minmax(0, 1fr); background: var(--sew) 0 100% / 100% 1.5px no-repeat;}
[data-s] .plainrows li::before {content: counter(step); font: 760 26px / .9 'Bricolage', sans-serif; font-stretch: 86%; color: #c07a26;}
[data-s] .faq {border: 0; background: var(--sew) 0 0 / 100% 1.5px no-repeat;}
[data-s] .faq details {border: 0; background: var(--sew) 0 100% / 100% 1.5px no-repeat;}
[data-s='b'] .paper .hk {position: absolute; z-index: 1; top: 0; width: 1.5px; height: var(--len, 0px); background: rgb(150 128 96 / .7); pointer-events: none;}
[data-s='b'] .paper .hk::after {content: ''; position: absolute; left: -3.5px; bottom: -3px; width: 8px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8ea, #c9b48c 70%); box-shadow: 0 1px 1px rgb(6 12 36 / .25);}
[data-s='b'] .plainrows {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; background: none;}
[data-s='b'] .plainrows li {position: relative; display: block; padding: 26px 22px 24px; border-radius: 14px; background: url('/felt/art/cream.webp') 0 0 / 512px #efe6d1; background-blend-mode: multiply; box-shadow: 0 3px 0 rgb(6 12 36 / .1), 0 24px 40px -30px rgb(6 12 36 / .55); transform-origin: 50% calc(-1 * var(--len, 120px)); rotate: var(--r, 0deg);}
[data-s='b'] .plainrows li::after {content: ''; position: absolute; inset: 5px; border: 1.25px dashed var(--stitch); border-radius: 10px; pointer-events: none;}
[data-s='b'] .plainrows li::before {display: block; margin-bottom: 14px;}
[data-s='b'] .plainrows b {display: block; font-family: 'Bricolage', sans-serif; font-weight: 720; font-stretch: 86%; font-size: 19px; line-height: 1.1;}
[data-s='b'] .plainrows p {margin-top: 10px; font-size: 14.5px;}
[data-s='b'] .plainrows li:nth-child(1) {--r: -1.2deg; margin-top: 10px;}
[data-s='b'] .plainrows li:nth-child(2) {--r: .8deg; margin-top: 46px;}
[data-s='b'] .plainrows li:nth-child(3) {--r: -.4deg; margin-top: 22px;}
[data-s='b'] #open .wrap {align-items: start;}
@media (max-width: 900px) {
[data-s] .plainrows li {grid-template-columns: 34px minmax(0, 1fr);}
[data-s] .plainrows li p {grid-column: 2;}
[data-s='b'] .plainrows {grid-template-columns: 1fr;}
[data-s='b'] .plainrows li {margin-top: 0 !important;}
[data-s='b'] .paper .hk {display: none;}
[data-s] .bees li + li {background: var(--sew) 0 0 / 100% 1.5px no-repeat;}
}

/* ---------- dash.css */
[data-u] {--d-ink: #18181b; --d-muted: #52525b; --d-subtle: #67676f; --d-faint: #a1a1aa; --d-line: #e4e4e7;
  --d-key: linear-gradient(#6e6e73, #2c2c30); --d-key-hover: linear-gradient(#7c7c81, #3a3a3e);
  --d-key-face: inset 0 1px 0 rgb(255 255 255 / .25), 0 10px 18px -10px rgb(0 0 0 / .55), 0 0 0 1px #2a2a2e;
  --d-key-down: inset 0 1px 0 rgb(255 255 255 / .18), 0 3px 6px -4px rgb(0 0 0 / .5), 0 0 0 1px #2a2a2e;
  --d-key2: linear-gradient(#ffffff, #e8e8ea); --d-key2-face: inset 0 1px 0 #fff, 0 8px 16px -10px rgb(0 0 0 / .28), 0 0 0 1px #e9e9ea;
  --d-field: linear-gradient(#f4f4f5, #f9f9f9); --d-field-face: inset 0 1px 2px rgb(0 0 0 / .06), 0 0 0 1px #efeff0; --d-field-focus: 0 0 0 1px #c9dcf6, 0 0 0 4px #e5effc;
  --d-pane: radial-gradient(120% 240px at 50% 0, rgb(255 255 255 / .9), transparent), linear-gradient(#ffffff, #f6f6f8); --d-pane-ring: #e6e6e8;
  --d-lift: linear-gradient(#ffffff, #f2f2f4);
  --d-ease: linear(0, .074, .223, .385, .531, .651, .745, .817, .87, .908, .936, .956, .969, .979, .986, .99, .993, .996, 1);}
[data-u] .btn, [data-u] .top .btn, [data-u] .top[data-cream] .btn, [data-u] .field .btn {height: 34px; padding: 0 15px; border-radius: 999px; font: 500 14px/1 'Instrument Sans', sans-serif; letter-spacing: .004em; color: var(--d-on-key, #fafafa); background: var(--d-key); box-shadow: var(--d-key-face); transition: box-shadow 120ms, transform 60ms;}
[data-u] .btn:hover, [data-u] .top .btn:hover, [data-u] .field .btn:hover {background: var(--d-key-hover);}
[data-u] .btn:active {transform: translateY(1px); box-shadow: var(--d-key-down);}
[data-u] .btn::after, [data-u] .top .btn::after {display: none;}
[data-u] .field {width: min(480px, 100%); height: 48px; padding: 0 7px 0 20px; border-radius: 999px; background: var(--d-field); color: var(--d-ink); box-shadow: var(--d-field-face), 0 18px 30px -18px rgb(6 12 36 / .7); transition: box-shadow 120ms, background 120ms;}
[data-u] .field::after {display: none;}
[data-u] .field:focus-within {background: #fff; box-shadow: var(--d-field-focus), 0 18px 30px -18px rgb(6 12 36 / .7);}
[data-u] .field input {height: 46px; font-size: 15px; letter-spacing: .004em;}
[data-u] .field input::placeholder {color: var(--d-subtle);}
[data-u] .hero .under a, [data-u] .close .under a {color: #c9c2f7; text-decoration-color: #4b4390;}
[data-u][data-n='b'] .top .nav {background: var(--d-pane); border-radius: 14px; box-shadow: 0 0 0 1px var(--d-pane-ring), 0 18px 30px -16px rgb(6 12 36 / .55);}
[data-u][data-n='b'] .top .nav::after {display: none;}
[data-u][data-n='b'] .top .nav::before {border-color: rgb(161 161 170 / .8);}
[data-u][data-n='b'] .top .links a, [data-u][data-n='b'] .top .in {font-size: 14px; letter-spacing: .004em; color: var(--d-muted);}
[data-u][data-n='b'] .top .links a:hover, [data-u][data-n='b'] .top .links a[aria-current], [data-u][data-n='b'] .top .in:hover {color: var(--d-ink);}
[data-u][data-n='b'] .top .links a[aria-current]::after {border-top: 2px solid var(--d-tab, #27272a); bottom: -8px;}
[data-u][data-n='b'] .top .logo.on-cream {filter: none;}
[data-u] .frame {padding: 8px; border-radius: 16px; background: var(--d-pane); box-shadow: 0 0 0 1px var(--d-pane-ring), 0 44px 80px -36px rgb(6 12 36 / .85);}
[data-u] .frame::after {display: none;}
[data-u] .frame::before {opacity: .45;}
[data-u] .faq summary::after {width: 8px; height: 8px; margin: 5px 4px 0 0; background: none; border-right: 1.5px solid var(--d-subtle); border-bottom: 1.5px solid var(--d-subtle); transform: rotate(45deg); transition: transform 280ms var(--d-ease);}
[data-u] .faq details[open] summary::after {transform: rotate(-135deg); margin-top: 9px;}
[data-u] .faq details::details-content {block-size: 0; overflow: clip; transition: block-size 280ms var(--d-ease), content-visibility 280ms allow-discrete;}
[data-u] .faq details[open]::details-content {block-size: auto;}
[data-u] .faq summary {font-weight: 500; letter-spacing: .004em;}
[data-u]:not([data-u='a'])[data-d~='a'] .track button {padding: 0 12px; height: 28px; display: flex; align-items: center; border-radius: 999px; font: 500 12.5px/1 'Instrument Sans', sans-serif; letter-spacing: .004em; color: var(--d-ink); background: var(--d-key2); box-shadow: var(--d-key2-face); filter: none;}
[data-u]:not([data-u='a'])[data-d~='a'] .track button::after {display: none;}
[data-u]:not([data-u='a'])[data-d~='a'] .track button[data-now] {padding: 0 14px; height: 32px; font-size: 13.5px; color: var(--d-on-key, #fafafa); background: var(--d-key); box-shadow: var(--d-key-face);}
[data-u]:not([data-u='a'])[data-d~='a'] .track li:not(:has([data-past], [data-now])) button {opacity: .7;}
[data-u]:not([data-u='a'])[data-d~='a'] .tally > span {border-radius: 999px; padding: 7px 14px; background: var(--d-key2); box-shadow: var(--d-key2-face); color: var(--d-muted); filter: none;}
[data-u]:not([data-u='a'])[data-d~='a'] .tally b {font: 500 14px/1 'Instrument Sans', sans-serif; color: var(--d-ink);}
[data-u]:not([data-u='a'])[data-d~='a'] .tally .hole {left: 50%; top: 0; margin: 0 0 0 -3px; background: none; box-shadow: none;}
@media (max-width: 900px) {
[data-u] .mstack .m {box-shadow: 0 0 0 1px var(--d-pane-ring), 0 0 0 7px #fff, 0 0 0 8px var(--d-pane-ring);}
[data-u]:not([data-u='a'])[data-d~='a'] .mstack small {padding: 0 12px; height: 28px; display: inline-flex; align-items: center; border-radius: 999px; font: 500 13px/1 'Instrument Sans', sans-serif; color: var(--d-on-key, #fafafa); background: var(--d-key); box-shadow: var(--d-key-face); rotate: none; filter: none;}
[data-u]:not([data-u='a'])[data-d~='a'] .mstack small::after {display: none;}
}

/* ---------- use.css */
.startpanel {position: relative; z-index: 4; width: min(480px, 100%); margin: 12px auto 0; padding: 18px 20px 16px; text-align: left; color: var(--d-ink, #18181b); border-radius: 16px; background: var(--d-pane, radial-gradient(120% 240px at 50% 0, rgb(255 255 255 / .9), transparent), linear-gradient(#ffffff, #f6f6f8)); box-shadow: 0 0 0 1px var(--d-pane-ring, #e6e6e8), 0 24px 44px -24px rgb(6 12 36 / .65); font-size: 14px; line-height: 1.45; letter-spacing: .004em;}
.sp-idea {margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--d-line, #e4e4e7);}
.sp-idea span {display: block; font-size: 12px; color: var(--d-subtle, #67676f);}
.sp-idea b {font-weight: 500; font-size: 15px;}
.sp-steps {display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;}
.sp-steps li {display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: start; color: var(--d-muted, #52525b);}
.sp-steps b {font-weight: 500; color: var(--d-ink, #18181b);}
.sp-faces {display: flex; padding-top: 1px;}
.sface {position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--disc); box-shadow: 0 0 0 2px var(--d-face-gap, #fff);}
.sface + .sface {margin-left: -8px;}
.sface img {position: absolute; left: 50%; top: 1px; width: 150%; max-width: none; translate: -50% 0;}
.sp-n {display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 500 12px/1 'Instrument Sans', sans-serif; color: var(--d-ink, #18181b); background: var(--d-key2, linear-gradient(#ffffff, #e8e8ea)); box-shadow: var(--d-key2-face, inset 0 1px 0 #fff, 0 6px 12px -8px rgb(0 0 0 / .28), 0 0 0 1px #e9e9ea);}
.sp-go {display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--d-line, #e4e4e7);}
.startpanel .sp-key {height: 34px; padding: 0 15px; border-radius: 999px; font: 500 14px/1 'Instrument Sans', sans-serif; color: var(--d-on-key, #fafafa); background: var(--d-key, linear-gradient(#6e6e73, #2c2c30)); box-shadow: var(--d-key-face, inset 0 1px 0 rgb(255 255 255 / .25), 0 10px 18px -10px rgb(0 0 0 / .55), 0 0 0 1px #2a2a2e);}
.startpanel .sp-key::after {display: none;}
.sp-log {font-size: 14px; color: #5a4fcf; text-decoration: underline; text-decoration-color: #d6d2f4; text-underline-offset: 3px;}
.sp-log:hover {text-decoration-color: #5a4fcf;}
.sp-hint {margin: 8px auto 0; font-size: 13px; color: #ffd0db;}
.close .sp-hint {color: #fff;}
.field[data-invalid] {box-shadow: 0 0 0 1px #f2b8c6, 0 0 0 4px #fdecf0 !important;}
.close .startpanel {margin-top: 14px;}
.skip {align-self: center; margin-left: 4px; font-size: 13px; color: rgb(246 239 224 / .8); text-decoration: underline; text-decoration-color: rgb(246 239 224 / .35); text-underline-offset: 3px; white-space: nowrap;}
.skip:hover {color: #fff; text-decoration-color: #fff;}
[data-u] .skip {color: #c9c2f7; text-decoration-color: #4b4390;}
[data-u] a:focus-visible, [data-u] button:focus-visible, [data-u] summary:focus-visible {outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f7fea; border-radius: 8px;}
@media (max-width: 900px) {
.startpanel {padding: 16px;}
.sp-steps li {grid-template-columns: 40px minmax(0, 1fr);}
}
.skipkey {all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; font: 500 13px/1 'Instrument Sans', sans-serif; letter-spacing: .004em; color: var(--d-ink, #1b2748); background: var(--d-key2, linear-gradient(#fffaf1, #eee3cc)); box-shadow: var(--d-key2-face, inset 0 1px 0 #fffdf7, 0 8px 16px -10px rgb(6 12 36 / .32), 0 0 0 1px #e2d6bd); transition: transform 60ms;}
[data-u='f'] .skipkey {background: url('/felt/art/cream.webp') 0 0 / 512px, var(--d-key2); background-blend-mode: multiply;}
.skipkey:active {transform: translateY(1px);}
.skipkey i {width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);}
.skiprow {display: flex; justify-content: flex-end; margin-top: 12px;}
.top .skipkey.nav {height: 30px; display: none;}
[data-instory] .top .skipkey.nav {display: inline-flex;}
.skiprow.m {justify-content: center; margin: 0 0 28px;}
[data-hd='m'][data-n='b'] .top .nav {height: 44px; margin-top: 16px; padding: 0 6px 0 16px; gap: 22px; border-radius: 13px;}
[data-hd='m'] .top .nav .logo {height: 18px;}
[data-hd='m'] .top .links {gap: 20px;}
[data-hd='m'] .top .links a, [data-hd='m'] .top .in {font-size: 13px;}
[data-hd='m'] .top .end {gap: 14px;}
[data-hd='m'] .top .btn, [data-u][data-hd='m'] .top .btn {height: 30px; padding: 0 13px; font-size: 13px;}
[data-u][data-hd='m'][data-n='b'] .top .links a[aria-current]::after {bottom: -6px; border-top-width: 1.5px;}
[data-hd='m'][data-n='b'] .top .nav::before {height: 16px;}
.skiphang {position: absolute; left: 50%; top: 100%; z-index: -1; display: grid; justify-items: center; padding-top: 12px; translate: -50% 0; pointer-events: none; visibility: hidden;}
.skiphang::before {content: ''; position: absolute; top: 0; left: 26%; right: 26%; height: 15px; border-left: 1.5px solid rgb(150 128 96 / .75); border-right: 1.5px solid rgb(150 128 96 / .75);}
.skiphang .skipkey {pointer-events: auto;}
[data-instory] .skiphang {visibility: visible;}
#idea[data-demo]::placeholder {color: var(--d-ink, #1b2748);}
.field .btn[data-press] {transform: translateY(1px); box-shadow: var(--d-key-down, inset 0 1px 0 rgb(255 255 255 / .18), 0 3px 6px -4px rgb(0 0 0 / .5)) !important;}
.melt {position: fixed; left: 0; right: 0; z-index: 15; pointer-events: none; opacity: 0; transition: opacity 240ms ease;}
.melt[data-on] {opacity: 1;}
.melt i {position: absolute; inset: 0;}
.melt.top {top: 0; height: 96px;}
.melt.top i:nth-child(1) {backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); mask-image: linear-gradient(#000 40%, transparent); -webkit-mask-image: linear-gradient(#000 40%, transparent);}
.melt.top i:nth-child(2) {backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask-image: linear-gradient(#000 25%, transparent 70%); -webkit-mask-image: linear-gradient(#000 25%, transparent 70%);}
.melt.top i:nth-child(3) {backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); mask-image: linear-gradient(#000 10%, transparent 45%); -webkit-mask-image: linear-gradient(#000 10%, transparent 45%);}
.melt.low {bottom: 0; height: 64px;}
.melt.low i:nth-child(1) {backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); mask-image: linear-gradient(transparent, #000 60%); -webkit-mask-image: linear-gradient(transparent, #000 60%);}
.melt.low i:nth-child(2) {backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px); mask-image: linear-gradient(transparent 30%, #000 80%); -webkit-mask-image: linear-gradient(transparent 30%, #000 80%);}
.melt.low i:nth-child(3) {backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); mask-image: linear-gradient(transparent 55%, #000); -webkit-mask-image: linear-gradient(transparent 55%, #000);}
[data-blur='both'] .stage, [data-blur='both'] #hero #set {will-change: filter;}
.oktag {position: absolute; z-index: 5; display: none; width: 220px; opacity: 0; pointer-events: none; transform-origin: 50% -16px;}
.ok-flip {position: relative; transform-style: preserve-3d;}
.ok-back {backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.ok-back {position: absolute; inset: 0; display: grid; justify-items: center; align-items: start; transform: rotateY(180deg);}

/* ---------- kit.css */
[data-u='f'] {--d-ink: #1b2748; --d-muted: #4a5578; --d-subtle: #6b7393; --d-faint: #9aa0b8; --d-line: #e3d8c2; --d-hover: #f1e9d8; --d-menu: #fffaf2; --d-tab: #1b2748; --d-face-gap: #fffaf2;
  --d-key: linear-gradient(#3b4b7c, #17213f); --d-key-hover: linear-gradient(#475890, #1d2848);
  --d-key-face: inset 0 1px 0 rgb(255 255 255 / .22), 0 10px 18px -10px rgb(6 12 36 / .6), 0 0 0 1px #121a33;
  --d-key-down: inset 0 1px 0 rgb(255 255 255 / .16), 0 3px 6px -4px rgb(6 12 36 / .55), 0 0 0 1px #121a33;
  --d-on-key: #f6efe0;
  --d-key2: linear-gradient(#fffaf1, #eee3cc); --d-key2-face: inset 0 1px 0 #fffdf7, 0 8px 16px -10px rgb(6 12 36 / .32), 0 0 0 1px #e2d6bd;
  --d-field: linear-gradient(#ece2cd, #f6efe0); --d-field-face: inset 0 1px 2px rgb(60 40 10 / .12), 0 0 0 1px #e2d6bd; --d-field-focus: 0 0 0 1px #c9dcf6, 0 0 0 4px #e5effc;
  --d-pane: radial-gradient(120% 240px at 50% 0, rgb(255 253 247 / .9), transparent), linear-gradient(#fffaf2, #f3ead7); --d-pane-ring: #e6dbc4;
  --d-lift: linear-gradient(#fffaf2, #efe5d1);}
[data-u='f'] .field:focus-within {background: #fffcf6;}
[data-u='f'] .faq summary::after {border-color: var(--d-subtle);}
[data-u='f'][data-n='b'] .top .nav::before {border-color: rgb(150 128 96 / .75);}
[data-u='f'] .btn, [data-u='f'] .top .btn, [data-u='f'] .top[data-cream] .btn, [data-u='f'] .field .btn, [data-u='f'] .startpanel .sp-key, [data-u='f'][data-d~='a'] .track button[data-now], [data-u='f'][data-d~='a'] .mstack small {background: url('/felt/art/cut.webp') 0 0 / 460px, var(--d-key); background-blend-mode: multiply;}
[data-u='f'] .btn:hover, [data-u='f'] .top .btn:hover, [data-u='f'] .field .btn:hover {background: url('/felt/art/cut.webp') 0 0 / 460px, var(--d-key-hover); background-blend-mode: multiply;}
[data-u='f'][data-n='b'] .top .nav, [data-u='f'] .frame, [data-u='f'] .startpanel, [data-u='f'][data-s='b'] .plainrows li {background: url('/felt/art/cream.webp') 0 0 / 512px, var(--d-pane); background-blend-mode: multiply;}
[data-u='f'] .field {background: url('/felt/art/cream.webp') 0 0 / 512px, var(--d-field); background-blend-mode: multiply;}
[data-u='f'] .field:focus-within {background: url('/felt/art/cream.webp') 0 0 / 512px, linear-gradient(#fffcf6, #fffcf6); background-blend-mode: multiply;}
[data-u='f'] .sp-n, [data-u='f'][data-d~='a'] .track button:not([data-now]), [data-u='f'][data-d~='a'] .tally > span {background: url('/felt/art/cream.webp') 0 0 / 512px, var(--d-key2); background-blend-mode: multiply;}

/* ---------- depth.css */
[data-depth='1'] {--g-cream: rgb(252 245 230 / .82); --g-cream-strong: rgb(252 246 233 / .9); --g-blur: blur(18px) saturate(1.1);   
  --g-edge: inset 0 1px 0 rgb(255 255 255 / .85), inset 0 -1px 0 rgb(120 96 60 / .1), 0 0 0 1px rgb(120 96 60 / .14);
  --lift-1: 0 1px 1px rgb(6 12 36 / .1), 0 3px 6px -2px rgb(6 12 36 / .16), 0 14px 28px -12px rgb(6 12 36 / .38), 0 40px 70px -40px rgb(6 12 36 / .5);
  --lift-2: 0 1px 1px rgb(6 12 36 / .12), 0 4px 10px -3px rgb(6 12 36 / .2), 0 22px 40px -16px rgb(6 12 36 / .45), 0 60px 100px -50px rgb(6 12 36 / .6);}
[data-depth='1'][data-u][data-n='b'] .top .nav, [data-depth='1'] .skiphang .skipkey, [data-depth='1'][data-u] .startpanel, [data-depth='1'][data-u] .field {background: radial-gradient(120% 120% at 50% 0, rgb(255 255 255 / .55), transparent 60%), var(--g-cream); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);}
[data-depth='1'][data-u][data-n='b'] .top .nav::after, [data-depth='1'][data-u] .startpanel::before, [data-depth='1'][data-u] .field::before {content: ''; display: block; position: absolute; inset: 0; border: 0; border-radius: inherit; pointer-events: none; background: url('/felt/art/cream.webp') 0 0 / 512px; mix-blend-mode: multiply; opacity: .45;}
[data-depth='1'][data-u][data-n='b'] .top .nav {box-shadow: var(--g-edge), var(--lift-1);}
[data-depth='1'][data-u] .startpanel {background: radial-gradient(120% 90% at 50% 0, rgb(255 255 255 / .6), transparent 55%), var(--g-cream-strong); box-shadow: var(--g-edge), var(--lift-2);}
[data-depth='1'] .startpanel > * {position: relative;}
[data-depth='1'] .skiphang .skipkey {box-shadow: var(--g-edge), var(--lift-1);}
[data-depth='1'][data-u] .field {box-shadow: inset 0 2px 4px rgb(60 40 10 / .14), inset 0 0 0 1px rgb(120 96 60 / .18), 0 1px 0 rgb(255 255 255 / .35), var(--lift-1);}
[data-depth='1'][data-u] .field:focus-within {background: var(--g-cream-strong); box-shadow: inset 0 1px 2px rgb(60 40 10 / .1), var(--d-field-focus), var(--lift-1);}
[data-depth='1'] .field input, [data-depth='1'] .field .btn {position: relative; z-index: 1;}
[data-depth='1'][data-u] .btn, [data-depth='1'][data-u] .top .btn, [data-depth='1'] .startpanel .sp-key {box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -2px 0 rgb(0 0 0 / .22), 0 1px 1px rgb(6 12 36 / .3), 0 6px 12px -6px rgb(6 12 36 / .55), 0 0 0 1px #121a33; transition: transform 120ms cubic-bezier(.22,1,.36,1), box-shadow 120ms;}
[data-depth='1'][data-u] .btn:hover, [data-depth='1'][data-u] .top .btn:hover, [data-depth='1'] .startpanel .sp-key:hover {transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 -2px 0 rgb(0 0 0 / .22), 0 2px 2px rgb(6 12 36 / .28), 0 10px 18px -8px rgb(6 12 36 / .6), 0 0 0 1px #121a33;}
[data-depth='1'][data-u] .btn:active, [data-depth='1'] .field .btn[data-press] {transform: translateY(1px); box-shadow: inset 0 2px 3px rgb(0 0 0 / .3), 0 0 0 1px #121a33 !important;}
[data-depth='1'] .skipkey:hover, [data-depth='1'] .sp-log:hover {transform: translateY(-1px);}
[data-depth='1'][data-u] .frame {box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--d-pane-ring), var(--lift-2);}
[data-depth='1'] .frame .win {box-shadow: 0 0 0 1px rgb(27 39 72 / .08), 0 1px 3px rgb(6 12 36 / .08);}
[data-depth='1'][data-u][data-d~='a'] .track button, [data-depth='1'][data-u][data-d~='a'] .tally > span {filter: drop-shadow(.05em .2em .14em rgb(4 8 26 / .5));}
[data-depth='1'][data-u][data-d~='a'] .track button:not([data-now]), [data-depth='1'][data-u][data-d~='a'] .tally > span {box-shadow: inset 0 1px 0 #fffdf7, inset 0 -1.5px 0 rgb(120 96 60 / .16), 0 0 0 1px #e2d6bd;}
[data-depth='1'][data-u][data-s='b'] .plainrows li {box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--d-pane-ring), var(--lift-1); transition: box-shadow 220ms cubic-bezier(.22,1,.36,1), translate 220ms cubic-bezier(.22,1,.36,1);}
[data-depth='1'][data-u][data-s='b'] .plainrows li:hover {translate: 0 -2px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--d-pane-ring), var(--lift-2);}
[data-depth='1'][data-u] .faq details {border-radius: 12px; margin: 0 -14px; padding: 0 14px; transition: background-color 220ms, box-shadow 220ms;}
[data-depth='1'][data-u] .faq details[open] {background: var(--d-lift); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--d-pane-ring), 0 10px 22px -14px rgb(6 12 36 / .32);}
@media (prefers-reduced-motion: reduce) {
[data-depth='1'] .btn:hover, [data-depth='1'] .plainrows li:hover {transform: none; translate: none;}
}
[data-depth='1'] :is(.btn, .sp-key, .skipkey, .skiptag, .sp-log, summary):focus-visible {outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f7fea !important;}

/* ---------- footer.css */
[data-ft] .foot {padding: 0;}
[data-ft] .foot .wrap {display: block;}
[data-ft='b'] .foot {background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; text-align: center;}
.ftB {padding: 84px 0 56px; color: var(--navy);}
.cr-k {margin: 0; font-size: 13px; letter-spacing: .02em; color: rgb(27 39 72 / .6);}
.cr-t {margin: 10px 0 0; font-family: 'Bricolage', sans-serif; font-weight: 760; font-stretch: 86%; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -.012em;}
.cr-s {margin: 22px 0 18px; font-size: 13px; color: rgb(27 39 72 / .55);}
.cr-cast {display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px; margin: 0; padding: 0; list-style: none;}
.cr-cast li {display: grid; justify-items: center; gap: 2px; min-width: 96px;}
.cr-cast b {margin-top: 8px; font-family: 'Bricolage', sans-serif; font-weight: 720; font-stretch: 86%; font-size: 19px;}
.cr-cast span:not(.sface) {font-size: 13px; color: rgb(27 39 72 / .62);}
.sface.big {width: 56px; height: 56px; box-shadow: 0 0 0 3px #fbf6ec, 0 8px 16px -8px rgb(6 12 36 / .4);}
.cr-note {max-width: 44em; margin: 40px auto 0; font-size: 13px; line-height: 1.5; color: rgb(27 39 72 / .62);}
.cr-note a {color: var(--navy); text-decoration: underline; text-decoration-color: rgb(27 39 72 / .3); text-underline-offset: 3px;}
.foot .cr-links {opacity: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding-top: 22px; border-top: 1px dashed rgb(140 118 84 / .5); font-size: 14px;}
.cr-links a {color: rgb(27 39 72 / .78);}
.cr-links a:hover {color: var(--navy); text-decoration: underline; text-underline-offset: 3px;}
.ftB .logo {height: 20px; margin: 30px auto 0;}
[data-ft='b'] .foot:not([data-in]) :is(.cr-k, .cr-t, .cr-s, .cr-cast li, .cr-note, .cr-links, .ftB .logo) {opacity: 0;}
[data-ft='b'] .foot[data-in] :is(.cr-k, .cr-t, .cr-s, .cr-note, .cr-links, .ftB .logo) {animation: cr-in 600ms steps(7, end) both;}
[data-ft='b'] .foot[data-in] .cr-t {animation-delay: 80ms;}
[data-ft='b'] .foot[data-in] .cr-s {animation-delay: 200ms;}
[data-ft='b'] .foot[data-in] .cr-cast li {animation: cr-in 600ms steps(7, end) both; animation-delay: calc(280ms + var(--i) * 110ms);}
[data-ft='b'] .foot[data-in] .cr-note {animation-delay: 900ms;}
[data-ft='b'] .foot[data-in] .cr-links {animation-delay: 980ms;}
[data-ft='b'] .foot[data-in] .ftB .logo {animation-delay: 1060ms;}
@keyframes cr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
.cr-cast {gap: 18px 22px;}
.cr-cast li {min-width: 84px;}
}
@media (prefers-reduced-motion: reduce) {
[data-ft='b'] .foot :is(.cr-k, .cr-t, .cr-s, .cr-cast li, .cr-note, .cr-links, .ftB .logo) {opacity: 1 !important; animation: none !important;}
}

/* ---------- tidy.css */
:root {--ink-72: rgb(27 39 72 / .72); --ink-58: rgb(27 39 72 / .58); --sky-86: rgb(246 239 224 / .86); --sky-72: rgb(246 239 224 / .72);}
[data-u='f'] .close h2.cut {font-family: 'Bricolage', sans-serif; font-weight: 760; font-stretch: 86%; letter-spacing: -.02em; line-height: 1.02; font-size: min(5.4vw, 9.6vh);
  background: linear-gradient(rgb(255 255 255 / .16), rgb(255 255 255 / 0) 40%, rgb(255 168 92 / .2)), url('/felt/art/cut.webp') 0 0 / 460px; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(.07em .13em .045em rgb(4 8 26 / .45));}
@media (max-width: 900px) {
[data-u='f'] .close h2.cut {font-size: 11.6vw;}
}
.cap-i p {font-size: 15px; color: var(--sky-86);}
.mstack p {font-size: 15px;}
[data-s='b'] .plainrows p {font-size: 14px;}
.bees p {font-size: 14px;}
.faq details p {font-size: 15px;}
.close .under, .hero .under {font-size: 13.5px;}
.paper .sub, [data-u] .paper .sub {color: var(--ink-72);}
.cr-k, .cr-s {color: var(--ink-58);}
.cr-cast span:not(.sface) {color: var(--ink-58);}
.cr-links a {color: var(--ink-72);}
.tally {color: var(--sky-86);}
.lede {color: var(--sky-86);}
[data-s] .bees b, .cr-cast b, [data-s='b'] .plainrows b {font-size: 19px;}
[data-u][data-n='b'] .top .nav, [data-hd='m'][data-n='b'] .top .nav {border-radius: 14px;}
[data-depth='1'][data-u] .faq details {border-radius: 14px;}
[data-u]:not([data-u='a'])[data-d~='a'] .tally > span {height: 30px; padding: 0 14px; display: inline-flex; align-items: center;}
[data-u]:not([data-u='a'])[data-d~='a'] .tally > span {height: 30px !important; padding-block: 0 !important; box-sizing: border-box;}

/* ---------- seampat.css */
[data-sp='b'] {--hem: url('/felt/art/seam/b-hem.svg'); --hem-w: 96px; --hem-h: 68.48px; --hem-up: 2px; --band: url('/felt/art/seam/b-band.svg'); --band-w: 51.2px; --band-h: 21.68px; --band-up: 10.84px;}
.sp-hem, .sp-band {display: none;}
[data-sp] .sp-hem, [data-sp] .sp-band {display: block; position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; filter: drop-shadow(0 1.5px 1px rgb(6 12 36 / .28)) drop-shadow(0 8px 10px rgb(6 12 36 / .18));}
[data-sp] .sp-hem {top: calc(100% - var(--hem-up)); height: var(--hem-h);}
[data-sp] .sp-band {top: calc(var(--band-up) * -1); height: var(--band-h);}
[data-sp] :is(.sp-hem, .sp-band) > i {position: absolute; inset: 0;}
[data-sp] .sp-hem > i {background: url('/felt/art/cut.webp') 0 0 / 460px, var(--hem) center 0 / var(--hem-w) var(--hem-h) repeat-x; background-blend-mode: multiply; -webkit-mask: var(--hem) center 0 / var(--hem-w) var(--hem-h) repeat-x; mask: var(--hem) center 0 / var(--hem-w) var(--hem-h) repeat-x;}
[data-sp] .sp-band > i {background: url('/felt/art/cut.webp') 0 0 / 460px, var(--band) center 0 / var(--band-w) var(--band-h) repeat-x; background-blend-mode: multiply; -webkit-mask: var(--band) center 0 / var(--band-w) var(--band-h) repeat-x; mask: var(--band) center 0 / var(--band-w) var(--band-h) repeat-x;}
[data-sp] .sp-hem.head {top: 0;}
[data-sp] .drop-hem {top: calc(var(--hem-up) * -1); height: var(--hem-h); background: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 1.5px 1px rgb(6 12 36 / .3)) drop-shadow(0 10px 14px rgb(6 12 36 / .28));}
[data-sp] .drop-hem::after {display: none;}
[data-sp] .drop-hem > i {position: absolute; inset: 0; background: url('/felt/art/cut.webp') 0 0 / 460px, var(--hem) center 0 / var(--hem-w) var(--hem-h) repeat-x; background-blend-mode: multiply; -webkit-mask: var(--hem) center 0 / var(--hem-w) var(--hem-h) repeat-x; mask: var(--hem) center 0 / var(--hem-w) var(--hem-h) repeat-x;}
.drop-hem > i {display: none;}
[data-sp] .drop-hem > i {display: block;}
[data-sp] .paperwrap {position: relative; z-index: 3;}
[data-sp] .paper {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
[data-sp][data-x='a'] .paper::after {display: none;}
[data-sp] .paper .sec + .sec {border-top: 0;}
[data-sp] .paper .sec + .sec::before {display: none;}
[data-sp] .foot {z-index: 3;}
.sp-hem.m {display: none !important;}
@media (max-width: 900px) {
[data-sp] .sp-hem.m {display: block !important;}
[data-sp] .paper {border-radius: 0;}
[data-sp] .skiprow.m {padding-top: max(0px, calc(var(--hem-h) - var(--hem-up) - 38px));}
[data-sp] #calls {padding-top: calc(72px + var(--hem-h) - var(--hem-up) - 24px);}
}

/* ---------- navmove.css */
.nm-pill {display: none;}
[data-hm='f'] .nm-pill {display: block; position: absolute; left: 0; pointer-events: none; opacity: 0; will-change: transform, width;}
[data-hm='f'] .top .links a[aria-current]::after {display: none !important;}
[data-hm='f'] .nm-pill {height: 30px; border-radius: 999px; background: rgb(120 92 52 / .085); box-shadow: inset 0 1px 2px rgb(70 48 18 / .16), inset 0 -1px 0 rgb(255 255 255 / .5);}
[data-hm='f'] .top .links a, [data-hm='f'] .top .in {transition: color 180ms cubic-bezier(.22, 1, .36, 1);}
[data-hm='f'][data-n='b'] .top .nav {transform-origin: 50% -130px;}
[data-hm='f'][data-n='b'] .top .nav::before {height: 150px;}
@media (prefers-reduced-motion: no-preference) {
html[data-hm='f']:not(.ready) .top .nav {translate: 0 -110px;}
}
[data-hm='f'][data-sk='h'] .skiphang {visibility: hidden; opacity: 0; transition: opacity 200ms cubic-bezier(.22, 1, .36, 1), visibility 0s 200ms;}
[data-hm='f'][data-sk='h'][data-instory] .skiphang {visibility: visible; opacity: 1; transition: opacity 160ms cubic-bezier(.22, 1, .36, 1), visibility 0s;}
.nm-key {display: none;}
[data-hm='f'][data-nm='key'] .nm-key {display: block; position: absolute; left: 0; pointer-events: none; opacity: 0; will-change: transform, width;}
[data-hm='f'] .nm-key {height: 30px; border-radius: 999px; background: url('/felt/art/cream.webp') 0 0 / 512px, linear-gradient(#fffdf8, #efe5cf); background-blend-mode: multiply; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(120 92 52 / .2), 0 1px 1px rgb(6 12 36 / .14), 0 5px 10px -5px rgb(6 12 36 / .38);}
@media (max-width: 900px) {
.nm-key {display: none !important;}
}
/* The page in the app, after felt.css (the felt sketch's stylesheets joined, with only the settled choices' rules kept). */

/* ---------- Per-element values, as classes: the CSP allows no style attributes. */
.hero .hang.ha { --x: 8%; --y: 17vh; --w: clamp(110px, 12.5vw, 210px); --o: 0; }
.hero .hang.hb { --x: 81%; --y: 26vh; --w: clamp(70px, 8vw, 130px); --o: 4; }
.close .hang.ca { --x: 6%; --y: 20vh; --w: clamp(110px, 13vw, 220px); --o: 1; }
.close .hang.cb { --x: 72%; --y: 32vh; --w: clamp(70px, 8vw, 130px); --o: 5; }
/* The deck's cards: the last one (Everything else) is a small card. */
.deck .dk { --w: 620px; } .deck .dk:last-child { --w: 320px; }
/* What comes in on scroll comes in one after another. */
.bees li:nth-child(1), .plainrows li:nth-child(1) { --rd: 80ms; }
.bees li:nth-child(2), .plainrows li:nth-child(2) { --rd: 150ms; }
.bees li:nth-child(3), .plainrows li:nth-child(3) { --rd: 220ms; }
.bees li:nth-child(4) { --rd: 290ms; }
.bees li:nth-child(5) { --rd: 360ms; }
/* The credits' cast, in turn, each on their own colour. */
.cr-cast li:nth-child(1) { --i: 0; } .cr-cast li:nth-child(1) .sface { --disc: #3b5bff; }
.cr-cast li:nth-child(2) { --i: 1; } .cr-cast li:nth-child(2) .sface { --disc: #ec1f3b; }
.cr-cast li:nth-child(3) { --i: 2; } .cr-cast li:nth-child(3) .sface { --disc: #00955a; }
.cr-cast li:nth-child(4) { --i: 3; } .cr-cast li:nth-child(4) .sface { --disc: #8a3ffc; }
.cr-cast li:nth-child(5) { --i: 4; } .cr-cast li:nth-child(5) .sface { --disc: #f05a00; }
/* Where each day's picture is cut on a phone (data.js, `mobile`). */
.mstack article:nth-child(1) .m { --pos: 100%; }
.mstack article:nth-child(2) .m { --pos: 62%; }
.mstack article:nth-child(3) .m { --pos: 14%; }
.mstack article:nth-child(4) .m { --pos: 50%; }
.mstack article:nth-child(5) .m { --pos: 100%; }
.mstack article:nth-child(6) .m { --pos: 40%; }
.mstack article:nth-child(7) .m { --pos: 42%; }

/* ---------- Without scripts the page still reads whole: what a script would bring in is simply there, the sign hangs
   where it rests, and the sixteen days are the phone's stack. (root.tsx marks <html class="js"> before it paints.) */
html:not(.js) [data-rv] { opacity: 1 !important; transform: none !important; }
html:not(.js) .foot :is(.cr-k, .cr-t, .cr-s, .cr-cast li, .cr-links, .ftB .logo) { opacity: 1 !important; }
html:not(.js) .top .nav { translate: none !important; }
html:not(.js) .stage { display: none; }
html:not(.js) .mstack { display: grid; gap: 44px; padding-block: 64px; }
html:not(.js) .mstack .m img { max-width: 100%; }

/* ---------- The hero can be played (round 46). */
/* The shops are keys over the street; the one under the pointer glows in its windows (a hand moves it, so it is smooth). */
.set .shopkey { position: absolute; top: 4%; height: 90%; padding: 0; border: 0; border-radius: 14px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.set .shopkey:focus-visible { outline: 2px solid #1f7fea; outline-offset: -3px; }
.set img.lit.peek { opacity: 0; pointer-events: none; transition: opacity 260ms cubic-bezier(.22, 1, .36, 1); }
.set img.lit.peek[data-on] { opacity: .5; }
/* The bees are keys too; pressed, one shows its name on a felt tag tied to it like a balloon. */
.walkers .walker { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.walkers .walker:focus-visible { outline: 2px solid #1f7fea; outline-offset: 2px; border-radius: 40%; }
.beetag { position: absolute; left: 50%; bottom: calc(100% + 18px); z-index: 2; translate: -50% 0; white-space: nowrap; padding: 6px 11px 7px; border-radius: 11px; font: 400 12.5px / 1.2 'Instrument Sans', sans-serif; color: rgb(27 39 72 / .72); background: url('/felt/art/cream.webp') 0 0 / 512px #f6efe0; box-shadow: inset 0 1px 0 #fffdf7, 0 1px 1px rgb(6 12 36 / .3), 0 8px 14px -6px rgb(6 12 36 / .55); opacity: 0; visibility: hidden; pointer-events: none; }
.beetag b { margin-right: 3px; font-family: 'Bricolage', sans-serif; font-weight: 720; font-stretch: 86%; font-size: 14px; color: #1b2748; }
.beetag::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 18px; margin-left: -.75px; background: rgb(246 239 224 / .7); }
.beetag[data-on] { opacity: 1; visibility: visible; }
/* While a bee shows its tag, the team stands in front of the door sign, so the name is never hidden. */
.walkers:has(.beetag[data-on]) { z-index: 6; }
@keyframes felt-nudge { 0%, 72%, 100% { transform: none; } 78% { transform: translateY(-2px) rotate(-3deg); } 86% { transform: translateY(0) rotate(2deg); } 93% { transform: rotate(-.8deg); } }
/* Then Start asks to be pressed: the same nudge, with the lamp's light round it. */
#ask .btn[data-invite] { outline: 2px solid rgb(255 197 110 / .85); outline-offset: 3px; animation: felt-nudge 2400ms steps(29, end) infinite; }
@media (prefers-reduced-motion: reduce) { .oktag[data-wait] .ok-sign, #ask .btn[data-invite] { animation: none; } }

/* ---------- The shop's door sign (round 47, A picked): the same felt board, cord and eyelets as its Open side, so turning
   it over is one sign turning. Its front says the shop is ready, Otto's face pinned in the corner; the whole sign is the key.
   It hangs on the shop's front in the street's twin layer (hero.css .setfront), in front of the team, so they never hide
   what it says. */
.oktag { z-index: 2; width: 96px; transform-origin: 50% 0; }
.oktag .ok-sign { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 262 / 298; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; cursor: pointer; pointer-events: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 10px 12px rgb(6 12 36 / .5)); }
.oktag .ok-sign[data-press] { transform: translateY(2px); box-shadow: none; }
.oktag .ok-sign:focus-visible { outline: 2px solid #1f7fea; outline-offset: 4px; border-radius: 12px; }
.oktag .ok-rope { position: absolute; inset: 0; width: 100%; height: 100%; }
.oktag .ok-board { position: absolute; left: 3%; right: 3%; top: 46.5%; bottom: 2.5%; display: grid; align-content: center; justify-items: center; padding: 0 9%; border-radius: 9% / 15%; text-align: center; background: url('/felt/art/cream.webp') 0 0 / 300px, linear-gradient(#f7ecd6, #ecdcbc); background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgb(255 250 238 / .9), inset 0 -2px 3px rgb(120 80 30 / .2), 0 1px 1px rgb(6 12 36 / .25); }
.oktag .ok-board::after { content: ''; position: absolute; inset: 7%  4.5%; border: 1.25px dashed rgb(176 118 46 / .75); border-radius: 7% / 12%; pointer-events: none; }
.oktag .ok-eye { position: absolute; top: 7%; width: 7.5%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d8b47a, #6b4a22 72%); box-shadow: inset 0 0 0 1.5px rgb(70 44 16 / .55), 0 1px 1px rgb(0 0 0 / .35); }
.oktag .ok-eye.l { left: 10%; } .oktag .ok-eye.r { right: 10%; }
.oktag .ok-name { position: relative; z-index: 1; font: 760 13.5px / 1 'Bricolage', sans-serif; font-stretch: 86%; letter-spacing: -.01em; color: transparent; background: linear-gradient(#80481a, #5b2f0f), url('/felt/art/cut.webp') 0 0 / 300px; background-blend-mode: multiply; -webkit-background-clip: text; background-clip: text; text-wrap: balance; }
.oktag .ok-n { position: relative; z-index: 1; margin-top: 3px; font: 500 9.5px / 1.15 'Instrument Sans', sans-serif; color: rgb(107 58 20 / .78); }
.oktag .ok-pin { position: absolute; right: -8%; top: -17%; z-index: 2; width: 20px; height: 20px; box-shadow: 0 0 0 2px #fbf6eb, 0 2px 4px rgb(6 12 36 / .35); }
.oktag .ok-back img { width: 100%; margin: 0; filter: drop-shadow(0 10px 12px rgb(6 12 36 / .5)); }
/* On a shop the reader picked it waits for them, swinging a little on its cord now and then. */
.oktag[data-wait] .ok-sign { animation: sign-nudge 2400ms steps(29, end) infinite; }
@keyframes sign-nudge { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -4deg; } 84% { rotate: 3deg; } 92% { rotate: -1deg; } }
.oktag .ok-sign { transform-origin: 50% 2%; }
@media (max-width: 900px) { .oktag { z-index: 5; width: 76px; } .oktag .ok-name { font-size: 12px; } .oktag .ok-n { font-size: 8.5px; } .oktag .ok-pin { width: 16px; height: 16px; } }

/* ---------- The four sections the owner settled in the session of 2026-11-07, all the rounds' picks made permanent:
   the decisions (calls.js: the dashboard's Today in the felt frame, the lamp around it), the team (teamfilm.js: the office
   film through the GPU), already open (open.js: drag in), the questions (faq.js: the list beside Ask the team). */
#open .c5 { grid-column: 1 / -1; }
/* n · the rule as Anna meets it (rounds 62 to 69): the dashboard's Today as it is now (studio-lue, measured on its own page),
   in the landing's felt frame, a lamp on the GPU around it */
#calls .grid { align-items: center; }
#calls { padding-top: 140px; padding-bottom: 140px; }
#calls h2 { font-size: clamp(44px, 4.6vw, 68px); }
/* the lamp's canvas under the section's content (feltlight.js); the frame's own amber glow is off here, the lamp is the light */
#calls .wrap { position: relative; z-index: 1; }
.db-gpu { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#calls .frame::before { display: none; }
/* the pane (its face: the sheen over white to #f6f6f8, its ring), the dashboard's light tokens under their own names */
.db { --fg: #18181b; --fg-muted: #52525b; --fg-subtle: #67676f; --hair: #f2f2f3; --bg-hover: #f1f1f3; --focus: #1f7fea;
  --key-top: #6e6e73; --key-bottom: #2c2c30; --key-ring: #2a2a2e; --key-hover-top: #7c7c81; --key-hover-bottom: #3a3a3e;
  --key-face: inset 0 1px 0 rgb(255 255 255 / .25), 0 10px 18px -10px rgb(0 0 0 / .55), 0 0 0 1px var(--key-ring);
  --key-face-down: inset 0 1px 0 rgb(255 255 255 / .18), 0 3px 6px -4px rgb(0 0 0 / .5), 0 0 0 1px var(--key-ring);
  --key-2-top: #fff; --key-2-bottom: #e8e8ea; --key-2-ring: #e9e9ea; --key-2-hover-bottom: #f3f3f4;
  --key-2-face: inset 0 1px 0 #fff, 0 8px 16px -10px rgb(0 0 0 / .28), 0 0 0 1px var(--key-2-ring);
  --key-2-face-down: inset 0 1px 0 #fff, 0 2px 4px -3px rgb(0 0 0 / .28), 0 0 0 1px var(--key-2-ring);
  --st-done: #0d9f92; --st-done-fg: #0a6e66; --st-idle: #8b93a1; --st-idle-fg: #52525b;
  --ease-out: linear(0, 0.074, 0.223, 0.385, 0.531, 0.651, 0.745, 0.817, 0.87, 0.908, 0.936, 0.956, 0.969, 0.979, 0.986, 0.99, 0.993, 0.996, 1);
  --ease-spring: linear(0, 0.075, 0.246, 0.451, 0.647, 0.812, 0.935, 1.017, 1.063, 1.082, 1.082, 1.07, 1.054, 1.037, 1.022, 1.01, 1.001, 0.996, 0.994, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1, 1);
  display: block; overflow: hidden; padding: 26px 28px 0; border-radius: 8px; background: radial-gradient(120% 240px at 50% 0, rgb(255 255 255 / .9), transparent), linear-gradient(#fff, #f6f6f8); color: var(--fg); font: 400 14px / 21px 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: .004em; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; box-shadow: 0 0 0 1px #e6e6e8; }
.dk-list { position: relative; height: 440px; contain: layout; }
.dk-h, .dk-clear, .dk-row { position: absolute; left: 0; right: 0; top: 0; }
/* a section's label: 13/20 at 500, muted; its count 13 at 400, subtle, 6 px past the gap; 0 shows nothing */
.dk-h { display: flex; align-items: baseline; gap: 8px; margin: 0; padding-bottom: 8px; font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: normal; color: var(--fg-muted); will-change: transform; transition: transform 220ms var(--ease-out); }
.dk-count { display: inline-grid; margin-left: 6px; color: var(--fg-subtle); font-weight: 400; }
.dk-count i { grid-area: 1 / 1; font-style: normal; transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out), filter 240ms var(--ease-out); }
.dk-count i[data-in] { opacity: 0; filter: blur(2px); transition: none; }
.dk-count i[data-in='up'], .dk-count i[data-out='down'] { transform: translateY(8px); }
.dk-count i[data-in='down'], .dk-count i[data-out='up'] { transform: translateY(-8px); }
.dk-count i[data-out] { opacity: 0; filter: blur(2px); }
.dk-clear { display: flex; align-items: center; min-height: 58px; margin: 0; box-shadow: inset 0 1px 0 var(--hair); color: var(--fg-subtle); font-size: 13px; opacity: 0; transition: transform 220ms var(--ease-out), opacity 110ms var(--ease-out); }
.dk-clear[data-on] { opacity: 1; transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out) 90ms; }
/* a Today row: 58 tall, 8 px top and bottom, 12 px between its parts, a hairline above; it moves by transform only */
.dk-row { box-sizing: border-box; box-shadow: inset 0 1px 0 var(--hair); transform: translate3d(0, var(--y, 0), 0); will-change: transform; transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out); }
.dk-row[data-enter] { opacity: 0; transform: translate3d(0, calc(var(--y, 0px) - 8px), 0); transition: none; }
.dk-row[data-gone], .dk-row[data-out] { opacity: 0; pointer-events: none; transition: transform 220ms var(--ease-out), opacity 110ms var(--ease-out); }
.dk-in { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 0; box-sizing: border-box; transition: opacity 90ms var(--ease-out); animation: dk-in 200ms var(--ease-out); }
.dk-row[data-fold] .dk-in { opacity: 0; }
@keyframes dk-in { from { opacity: 0; } }
.dk-face { flex: none; display: block; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; }
.dk-face img { display: block; width: 24px; height: 24px; }
.dk-face[data-who='Chief'] { background: #3b5bff; } .dk-face[data-who='Rhea'] { background: #ec1f3b; } .dk-face[data-who='Otto'] { background: #00955a; } .dk-face[data-who='Iris'] { background: #8a3ffc; } .dk-face[data-who='Juno'] { background: #f05a00; }
.dk-text { display: grid; flex: 1; gap: 0; min-width: 0; }
.dk-title, .dk-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-title { font-size: 14px; font-weight: 500; line-height: 20px; }
.dk-sub { font-size: 13px; line-height: 18px; color: var(--fg-muted); }
/* the keys: pills 30 tall, 13 px at 500, the dark key then the light one; down in 40, back with the spring in 380 */
.dk-keys { display: flex; flex: none; gap: 8px; }
.dk-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: linear-gradient(var(--key-2-top), var(--key-2-bottom)); color: var(--fg); box-shadow: var(--key-2-face); font: 400 13px / 1 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: .004em; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out), box-shadow 380ms var(--ease-out), transform 380ms var(--ease-spring), filter 260ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.dk-btn span { font-weight: 500; padding-bottom: .12em; margin-bottom: -.12em; }
.dk-btn:hover { background: linear-gradient(var(--key-2-top), var(--key-2-hover-bottom)); }
.dk-btn[data-variant='primary'] { background: linear-gradient(var(--key-top), var(--key-bottom)); color: #fff; box-shadow: var(--key-face); }
.dk-btn[data-variant='primary']:hover { background: linear-gradient(var(--key-hover-top), var(--key-hover-bottom)); }
.dk-btn[data-pressed] { transform: scale(.955); filter: brightness(.97); box-shadow: var(--key-2-face-down); transition-duration: 40ms; }
.dk-btn[data-variant='primary'][data-pressed] { box-shadow: var(--key-face-down); }
.dk-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the state word: a 16 px tile (radius 5) with its white mark, then the word at 13/500 in the tone's ink */
.dk-state { display: inline-flex; flex: none; align-items: center; gap: 6px; }
.dk-tile { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: var(--st-done); color: #fff; line-height: 0; }
.dk-tile svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dk-word { font-size: 13px; font-weight: 500; line-height: 20px; color: var(--st-done-fg); }
.dk-state[data-tone='idle'] .dk-tile { background: var(--st-idle); } .dk-state[data-tone='idle'] .dk-word { color: var(--st-idle-fg); }

/* c · the film (round 72, "daha webgpu lu animasyonlu videolu daha az ui li"): the office recorded clean, through the GPU
   (teamfilm.js); under it only the name and the job of whoever is met, and the five names to jump to */
#team .frame::before { display: none; }
.tf-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 8px; background: #f3f3f4; }
.tf-film, .tf-gpu { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tf-film { object-fit: cover; }
.tf-gpu { opacity: 0; transition: opacity 400ms ease; }
.tf-gpu[data-on] { opacity: 1; }
.tf-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-top: 24px; }
.tf-cap { min-height: 56px; max-width: 760px; margin: 0; transition: opacity 160ms ease, transform 160ms ease; }
.tf-cap[data-swap] { opacity: 0; transform: translateY(4px); }
.tf-cap b { display: block; font-family: 'Bricolage', sans-serif; font-weight: 720; font-stretch: 86%; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; color: var(--navy, #1b2748); }
.tf-cap span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; color: rgb(27 39 72 / .72); }
.tf-names { display: flex; flex: none; gap: 2px; margin-top: 2px; }
.tf-names button { all: unset; padding: 6px 11px; border-radius: 999px; font-size: 14px; color: rgb(27 39 72 / .5); cursor: pointer; transition: color 200ms ease, background-color 200ms ease; }
.tf-names button:hover { color: var(--navy, #1b2748); }
.tf-names button[data-now] { background: rgb(27 39 72 / .07); color: var(--navy, #1b2748); }
.tf-names button:focus-visible { outline: 2px solid #1f7fea; outline-offset: 2px; }

/* round 77 ("dashboard ui ina uygun birseyler yapalim ve partikullu olmasin"): the dashboard on Crumb & Rye's first
   morning, filling in; the site in its preview on the left, Today on the right, in the current dashboard's parts (open.js) */
.dt-frame { grid-column: 1 / -1; margin-top: 44px; }
#open .dt-frame::before { display: none; }
.dt { --fg: #18181b; --fg-muted: #52525b; --fg-subtle: #67676f; --hair: #f2f2f3; --line: #ececee;
  --ease-out: linear(0, 0.074, 0.223, 0.385, 0.531, 0.651, 0.745, 0.817, 0.87, 0.908, 0.936, 0.956, 0.969, 0.979, 0.986, 0.99, 0.993, 0.996, 1);
  --ease-spring: linear(0, 0.075, 0.246, 0.451, 0.647, 0.812, 0.935, 1.017, 1.063, 1.082, 1.082, 1.07, 1.054, 1.037, 1.022, 1.01, 1.001, 0.996, 0.994, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1, 1);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 548px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #e6e6e8; color: var(--fg); font: 400 14px / 21px 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: .004em; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.dt-today { position: relative; padding: 30px 36px 64px; }
.dt-hi { margin: 0; font-size: 34px; font-weight: 400; line-height: 40px; letter-spacing: -.025em; }
.dt-lead { max-width: 520px; min-height: 54px; margin: 10px 0 0; color: var(--fg-muted); font-size: 17px; line-height: 27px; }
.dt-lead b { color: var(--fg); font-weight: 500; }
.dt-sec { margin-top: 22px; opacity: 0; transform: translateY(8px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.dt-sec[data-in] { opacity: 1; transform: none; }
.dt-label { display: flex; margin: 0; padding-bottom: 8px; color: var(--fg-muted); font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: normal; }
.dt-label span { margin-left: 14px; color: var(--fg-subtle); font-weight: 400; }
.dt-row { display: flex; align-items: center; gap: 12px; min-height: 54px; margin: 0 -10px; padding: 6px 10px; border-radius: 8px; box-shadow: inset 0 1px 0 var(--hair); outline: none; opacity: 0; transform: translateY(8px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), background-color 260ms var(--ease-out); }
.dt-row[data-in] { opacity: 1; transform: none; }
.dt-text { display: grid; flex: 1; min-width: 0; }
.dt-text b { overflow: hidden; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.dt-text small { overflow: hidden; color: var(--fg-muted); font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.dt-face { display: block; flex: none; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; }
.dt-face img { display: block; width: 100%; height: 100%; }
.dt-face[data-who='Iris'] { background: #8a3ffc; } .dt-face[data-who='Rhea'] { background: #ec1f3b; } .dt-face[data-who='Otto'] { background: #00955a; }
.dt-marks { display: flex; flex: none; }
/* the accounts row's marks are the services' own (round 85, "gsc gri backgroundli kisimlari logolarla degistir"): white tiles,
   the mark faded and grey until the account is connected, then in its colours with a small spring, one after another */
.dt-marks i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px #e4e4e7; }
.dt-marks i + i { margin-left: -4px; }
.dt-marks img { display: block; width: 16px; height: 16px; filter: grayscale(1); opacity: .45; transition: filter 260ms ease, opacity 260ms ease; }
.dt-marks i[data-on] { box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px #d9d9de, 0 4px 10px -6px rgb(0 0 0 / .3); animation: dt-pop 380ms var(--ease-spring); }
.dt-marks i[data-on] img { filter: none; opacity: 1; }
@keyframes dt-pop { from { transform: scale(.7); } }
.dt-end { display: inline-flex; flex: none; }
.dt-state { display: inline-flex; align-items: center; gap: 6px; color: #0a6e66; font-size: 13px; font-weight: 500; line-height: 20px; animation: dt-in 200ms var(--ease-out); }
.dt-state[data-tone='work'] { color: #1557ad; }
@keyframes dt-in { from { opacity: 0; transform: translateY(3px); } }
.dt-tile { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: #0d9f92; color: #fff; line-height: 0; }
.dt-state[data-tone='work'] .dt-tile { background: #1f7fea; }
/* Working's ring turns while the agent works, as the dashboard's spinner does (round 86) */
.dt-state[data-tone='work'] .dt-tile svg { animation: dt-spin 900ms linear infinite; }
@keyframes dt-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .dt-state[data-tone='work'] .dt-tile svg { animation-duration: 2.4s; } }
.dt-tile svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dt-key { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: linear-gradient(#fff, #e8e8ea); color: var(--fg); box-shadow: inset 0 1px 0 #fff, 0 8px 16px -10px rgb(0 0 0 / .28), 0 0 0 1px #e9e9ea; font: 400 13px / 1 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; white-space: nowrap; cursor: pointer; user-select: none; transition: transform 380ms var(--ease-spring), filter 260ms var(--ease-out); }
.dt-key span, .dt-again span { font-weight: 500; padding-bottom: .12em; margin-bottom: -.12em; }
.dt-key:hover { background: linear-gradient(#fff, #f3f3f4); }
.dt-key[data-variant='primary'] { background: linear-gradient(#6e6e73, #2c2c30); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 10px 18px -10px rgb(0 0 0 / .55), 0 0 0 1px #2a2a2e; }
.dt-key[data-variant='primary']:hover { background: linear-gradient(#7c7c81, #3a3a3e); }
.dt-key[data-pressed] { transform: scale(.955); filter: brightness(.97); transition-duration: 40ms; }
.dt-key:focus-visible, .dt-again:focus-visible { outline: 2px solid #1f7fea; outline-offset: 2px; }
.dt-again { all: unset; position: absolute; right: 26px; bottom: 20px; display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; color: var(--fg-muted); font-size: 13px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out), background-color 260ms var(--ease-out), color 260ms var(--ease-out); }
.dt-again:hover { background: #f1f1f3; color: var(--fg); }
.dt[data-done] .dt-again { opacity: 1; pointer-events: auto; }
/* round 78 · A/B ("daha dikkat cekici kreatif"): a · the magic move, b · drag in (open-ab.js); both end on round 77's Today */
/* the box on the left, her tray of things on the right (round 79, "all in kismini soldan saga gecirelim") */
.ab-b { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); align-items: center; gap: 40px; margin-top: 44px;
  --fg: #18181b; --fg-muted: #52525b; --fg-subtle: #67676f; }
.ab-b .ab-win { grid-column: auto; margin-top: 0; }
/* her things lie in a tray as tall as the box beside it, its edge drawn in long dashes; when all are in, the empty tray says so */
.ab-things { position: relative; display: grid; align-self: stretch; align-content: center; justify-items: center; gap: 14px; padding: 22px 18px 16px; }
.ab-tray { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ab-tray rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: 20px; fill: none; stroke: rgb(27 39 72 / .3); stroke-width: 2; stroke-dasharray: 12 9; stroke-linecap: round; }
/* her things, as the dashboard's board draws a card (round 82): white, 8 px, the key's ring, top edge and soft drop, the name
   at 14/500, a 13 px line under it with its mark; the whole card is held; taken up it lifts a little and leaves a .45 trace */
.ab-thing { all: unset; box-sizing: border-box; position: relative; z-index: 1; display: grid; gap: 6px; width: min(330px, 100%); padding: 12px 14px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #e6e6e8, inset 0 1px 0 #fff, 0 6px 14px -8px rgb(0 0 0 / .22); color: #18181b; font: 400 14px / 20px 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: .004em; cursor: grab; touch-action: none; user-select: none; transition: box-shadow 140ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms linear(0, 0.075, 0.246, 0.451, 0.647, 0.812, 0.935, 1.017, 1.063, 1.082, 1.082, 1.07, 1.054, 1.037, 1.022, 1.01, 1.001, 0.996, 0.994, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1, 1); }
.ab-thing:hover { box-shadow: 0 0 0 1px #d9d9de, inset 0 1px 0 #fff, 0 8px 18px -8px rgb(0 0 0 / .26); }
.ab-thing[data-drag] { z-index: 10; cursor: grabbing; transition: none; box-shadow: 0 0 0 1px #e6e6e8, inset 0 1px 0 #fff, 0 18px 36px -14px rgb(0 0 0 / .38); }
.ab-thing[data-gone] { pointer-events: none; }
.ab-trace { position: absolute; z-index: 0; opacity: .45; pointer-events: none; transform: none; }
.ab-thing img, .ab-thing svg { pointer-events: none; -webkit-user-drag: none; }
.ab-thing:focus-visible { outline: 0; box-shadow: 0 0 0 2px #1f7fea, 0 6px 14px -8px rgb(0 0 0 / .22); }
.ab-prev { display: block; overflow: hidden; margin-bottom: 4px; border-radius: 4px; box-shadow: 0 0 0 1px #ececee; }
.ab-prev img { display: block; width: 100%; height: 92px; object-fit: cover; object-position: 50% 0; transition: object-position 2600ms cubic-bezier(0.45, 0, 0.25, 1); }
/* round 84: the cards show the thing itself and come alive under a hand: the card tips toward it, her page pans down, her
   accounts' marks open out, her inbox's next line rolls in */
.ab-thing[data-tip] { transform: perspective(800px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-3px); transition: box-shadow 140ms cubic-bezier(0.16, 1, 0.3, 1), transform 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.ab-thing:hover .ab-prev img { object-position: 50% 72%; }
.ab-logos { display: flex; align-items: center; height: 52px; padding-left: 6px; }
.ab-logos i { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px #e6e6e8, inset 0 1px 0 #fff, 0 6px 14px -8px rgb(0 0 0 / .28); transition: transform 520ms linear(0, 0.075, 0.246, 0.451, 0.647, 0.812, 0.935, 1.017, 1.063, 1.082, 1.082, 1.07, 1.054, 1.037, 1.022, 1.01, 1.001, 0.996, 0.994, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1, 1); }
.ab-logos i + i { margin-left: -12px; }
.ab-logos i:nth-child(1) { z-index: 3; transform: rotate(-8deg); }
.ab-logos i:nth-child(2) { z-index: 2; transform: translateY(-3px); }
.ab-logos i:nth-child(3) { z-index: 1; transform: rotate(8deg); }
.ab-thing:hover .ab-logos i:nth-child(1) { transform: translateX(-2px) rotate(-3deg); }
.ab-thing:hover .ab-logos i:nth-child(2) { transform: translate(14px, -5px); }
.ab-thing:hover .ab-logos i:nth-child(3) { transform: translateX(30px) rotate(3deg); }
.ab-logos img { display: block; width: 24px; height: 24px; }
.ab-mail { display: block; height: 78px; margin-bottom: 2px; overflow: hidden; border-radius: 6px; background: #fafafa; box-shadow: inset 0 0 0 1px #ececee; }
.ab-mail-in { display: grid; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.ab-thing:hover .ab-mail-in { transform: translateY(-26px); }
.ab-msg { display: grid; grid-template-columns: 20px 70px minmax(0, 1fr) auto; align-items: center; gap: 7px; height: 26px; padding: 0 8px; box-shadow: inset 0 -1px 0 #f0f0f2; color: #52525b; font-size: 12px; line-height: 16px; }
.ab-msg i { display: block; width: 20px; height: 20px; border-radius: 50%; background: #e4e4e7; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); overflow: hidden; }
.ab-msg i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-msg b, .ab-msg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-msg b { color: #18181b; font-weight: 500; }
.ab-msg time { color: #67676f; font-variant-numeric: tabular-nums; }
.ab-title { display: block; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ab-who { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; color: #52525b; font-size: 13px; line-height: 20px; white-space: nowrap; }
.ab-who > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #67676f; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ab-marks { display: flex; flex: none; }
.ab-marks i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #f4f4f5; box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1px #e4e4e7; color: #67676f; font-size: 11px; font-style: normal; font-weight: 600; }
.ab-marks i + i { margin-left: -3px; }
.ab-all { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--navy, #1b2748); font-family: 'Bricolage', sans-serif; font-weight: 720; font-stretch: 86%; font-size: 26px; opacity: 0; pointer-events: none; transition: opacity 400ms ease 300ms; }
.ab-b[data-all] .ab-all { opacity: 1; }
/* the dashboard's own empty picture for "nothing waits" (an empty tray, the bee at rest, a tick), as ink with its own alpha
   (black at 1 minus its grey), which is what the app's multiply makes of it, without a blend that flashes white while it fades in */
.ab-all { align-content: center; gap: 4px; }
.ab-all img { display: block; width: min(280px, 100%); height: auto; transform: translateY(8px); transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 300ms; }
.ab-b[data-all] .ab-all img { transform: none; }
/* the box: Today's three sections from the start, each with the place its thing goes */
.ab-solo { position: relative; grid-template-columns: minmax(0, 1fr); min-height: 0; transition: box-shadow 200ms ease; }
.ab-solo .dt-today { padding-bottom: 60px; }
.ab-date { margin: 0 0 6px; color: var(--fg-muted); font-size: 13px; }
.ab-solo .dt-sec { opacity: 1; transform: none; }
/* a place and the rows that fill it share one cell: the rows hold their room from the start, so nothing grows or jumps;
   the place fades as they rise in, one after another */
.ab-cell { display: grid; }
.ab-cell > * { grid-area: 1 / 1; min-width: 0; }
.ab-solo .dt-row { transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out), background-color 260ms var(--ease-out); }
@keyframes ab-rise { from { opacity: 0; transform: translateY(8px); } }
.ab-slot { position: relative; z-index: 1; display: grid; place-items: center; min-height: 58px; padding: 10px 16px; border-radius: 8px; background: #f4f4f5; color: #67676f; text-align: center; transition: opacity 220ms var(--ease-out), background-color 140ms ease, box-shadow 140ms ease, color 140ms ease; }
.ab-slot p { margin: 0; font-size: 13px; line-height: 20px; }
.ab-slot[data-hot] { background: #f1f1f3; box-shadow: inset 0 0 0 2px #1f7fea; color: #18181b; }
.ab-solo .dt-sec[data-in] .ab-slot { opacity: 0; pointer-events: none; }
/* a section still waiting for its card sits back, faint and soft, and comes into focus when a card is over it or lands (round 87) */
.ab-solo .dt-label { transition: opacity 260ms var(--ease-out), filter 260ms var(--ease-out); }
.ab-solo .dt-sec:not([data-in]) .dt-label, .ab-slot { opacity: .5; filter: blur(1.2px); }
.ab-solo .dt-sec:has(.ab-slot[data-hot]) .dt-label, .ab-slot[data-hot] { opacity: 1; filter: none; }
.ab-slot { transition: opacity 260ms var(--ease-out), filter 260ms var(--ease-out), background-color 140ms ease, box-shadow 140ms ease, color 140ms ease; }
.ab-lead { min-height: 54px; transition: opacity 140ms ease; }
.ab-lead[data-swap] { opacity: 0; }
.ab-cursor { position: absolute; top: 0; left: 0; z-index: 30; width: 26px; height: 26px; pointer-events: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .3)); }
.ab-cursor svg { width: 100%; height: 100%; fill: #18181b; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }

/* "What people ask first." · round 81 (?faq=n): the landing's own list of questions, each with a rail that fills while it is
   shown, beside one exchange at a time in the dashboard's pane (faq.js) */
#questions .grid { align-items: start; }
#questions .fq-frame::before { display: none; }
.fq-list { display: grid; gap: 2px; max-width: 460px; margin: 30px 0 0; padding: 0; list-style: none; }
.fq-q { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 2px minmax(0, 1fr); column-gap: 18px; width: 100%; padding: 15px 0; color: var(--navy, #1b2748); font-size: 17px; line-height: 1.4; letter-spacing: -.003em; cursor: pointer; opacity: .5; transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.fq-q:hover { opacity: .8; }
.fq-list li[data-now] .fq-q { opacity: 1; }
.fq-q:focus-visible { outline: 2px solid #1f7fea; outline-offset: 4px; border-radius: 4px; }
.fq-rail { display: block; overflow: hidden; border-radius: 2px; background: rgb(27 39 72 / .14); }
.fq-run { display: block; width: 100%; height: 100%; background: var(--navy, #1b2748); transform: scaleY(0); transform-origin: 50% 0; }
.fq-list li[data-now] .fq-run { animation: fq-run var(--dwell, 6s) linear forwards; }
@keyframes fq-run { to { transform: scaleY(1); } }
/* held while a hand is on the questions or on the window, not merely over the page */
#questions:has(.fq-list:hover, .fq-frame:hover) .fq-list li[data-now] .fq-run { animation-play-state: paused; }
.fq-list[data-mine] li[data-now] .fq-run { animation: none; transform: none; }
.fq { --fg: #18181b; --fg-muted: #52525b; --fg-subtle: #67676f;
  --ease-spring: linear(0, 0.075, 0.246, 0.451, 0.647, 0.812, 0.935, 1.017, 1.063, 1.082, 1.082, 1.07, 1.054, 1.037, 1.022, 1.01, 1.001, 0.996, 0.994, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column; height: 452px; overflow: hidden; border-radius: 8px; background: radial-gradient(120% 240px at 50% 0, rgb(255 255 255 / .9), transparent), linear-gradient(#fff, #f6f6f8); box-shadow: 0 0 0 1px #e6e6e8; color: var(--fg); font: 400 14px / 21px 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: .004em; -webkit-font-smoothing: antialiased; }
.fq-top { display: flex; flex: none; align-items: center; gap: 8px; height: 52px; padding: 0 24px; border-bottom: 1px solid #ececee; }
.fq-top b { font-size: 16px; font-weight: 500; } .fq-top span { color: var(--fg-muted); }
/* one exchange at a time, sitting just above the composer; the last one lifts away as the next comes in */
.fq-stage { position: relative; flex: 1; overflow: hidden; }
.fq-ex { position: absolute; right: 28px; bottom: 22px; left: 28px; display: grid; gap: 18px; transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out); }
.fq-ex[data-out] { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.fq-me { display: flex; justify-content: flex-end; animation: fq-me 420ms var(--ease-out) both; }
@keyframes fq-me { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.fq-me p { max-width: 80%; margin: 0; padding: 10px 15px; border-radius: 16px 16px 4px 16px; background: #f4f4f5; font-size: 15px; line-height: 22px; transform-origin: 100% 100%; }
.fq-who { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--fg-muted); font-size: 13px; line-height: 20px; animation: fq-fade 320ms var(--ease-out) 260ms both; }
.fq-who b { color: var(--fg); font-weight: 500; }
@keyframes fq-fade { from { opacity: 0; } }
.fq-face { display: block; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; background: #3b5bff; }
.fq-face img { display: block; width: 100%; height: 100%; }
.fq-a { margin: 0; padding-left: 32px; font-size: 16px; line-height: 25px; text-wrap: pretty; }
.fq-a span { animation: fq-phrase 520ms var(--ease-out) both; animation-delay: calc(480ms + var(--d, 0) * 130ms); }
@keyframes fq-phrase { from { opacity: 0; filter: blur(2px); transform: translateY(3px); } }
.fq-compose { display: flex; flex: none; align-items: center; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid #ececee; pointer-events: none; }
.fq-field { display: flex; flex: 1; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: linear-gradient(#f4f4f5, #f9f9f9); box-shadow: inset 0 1px 2px rgb(0 0 0 / .06), 0 0 0 1px #efeff0; color: var(--fg-subtle); font-size: 15px; }

@media (max-width: 900px) {
  .db-wrap { margin-top: 28px; }
  .db { padding: 18px 16px 0; }
  .dk-list { height: 560px; }
  .dk-in { flex-wrap: wrap; row-gap: 8px; }
  .dk-keys { width: 100%; padding-left: 36px; }
  .dk-btn { min-height: 44px; }
  .tf-foot { flex-direction: column; gap: 14px; }
  .tf-names { flex-wrap: wrap; }
  .ab-b { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; }
  .ab-things { gap: 10px; }
  .ab-thing { width: 100%; }
  .ab-prev { display: none; }
  .dt-today { padding: 22px 18px 60px; }
  .dt-hi { font-size: 26px; line-height: 32px; }
  .dt-lead { font-size: 16px; line-height: 24px; }
  .fq-list { margin-top: 20px; }
  .fq { height: 440px; }
  .fq-q { font-size: 16px; }
  #questions .fq-frame { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .ab-prev img, .ab-logos i, .ab-mail-in { transition: none; } .ab-thing:hover .ab-prev img { object-position: 50% 0; } .ab-thing:hover .ab-mail-in { transform: none; } .dk-in { animation: none; } .dk-row, .dk-h, .dk-clear, .dk-count i, .dk-btn { transition: opacity 150ms ease; filter: none; } .fq-me, .fq-who, .fq-a span { animation: none; } }

/* The page's grain (round 91, "noise effect ... genele"; stronger in round 92, "biraz effecti arttiralim"): one fine tile of light and dark specks over everything, moved to a
   new place twelve times a second, as grain changes from one frame of film to the next. It takes no pointer, it is only
   moved (no blending, so the compositor carries it), and it stands still with reduced motion. */
body::after { content: ''; position: fixed; inset: -200px; z-index: 9000; pointer-events: none; background: url('/felt/art/grain.webp') 0 0 / 200px 200px; animation: grain 667ms steps(1, end) infinite; will-change: transform; }
@keyframes grain {
  0% { transform: translate(0, 0); } 12.5% { transform: translate(-63px, 41px); } 25% { transform: translate(87px, -112px); }
  37.5% { transform: translate(-141px, -27px); } 50% { transform: translate(29px, 133px); } 62.5% { transform: translate(118px, 64px); }
  75% { transform: translate(-92px, 156px); } 87.5% { transform: translate(51px, -78px); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }
/* The page's grid (round 93, "grid ekleyelim ... min 200x200"): hairlines in squares of 200 px, laid on the page's column
   (a line on the middle, so the 1200 px column's edges fall on lines), under the grain. Mid grey, so it shows a little on
   the dusk sky and on the cream alike. On a phone one square spans the column, its edges on the column's edges. It lies
   on the page and scrolls with it (round 94, "scroll da fixed kaliyor ama grid"): the body holds it, the page's height.
   Nothing on the page is placed against the window's corner, so a placed body moves nothing else. */
body { position: relative; }
body::before { --cell: 200px; content: ''; position: absolute; inset: 0; z-index: 8999; pointer-events: none; background: linear-gradient(to right, rgb(128 128 128 / .16) 1px, transparent 1px) calc(50% + var(--cell) / 2) 0 / var(--cell) var(--cell), linear-gradient(to bottom, rgb(128 128 128 / .16) 1px, transparent 1px) 0 0 / var(--cell) var(--cell); }
@media (max-width: 600px) { body::before { --cell: calc(100vw - 48px); background-position: 24px 0, 0 0; } }
@media print { body::after, body::before { display: none; } }
/* The hero's box (html[data-hb], brand-explore rounds 77 to 85, 2026-11-07). The dashboard's sentence field at team-hire's
   size (64 px, 8 8 8 16, words 17/26 at -0.01em, the key inside at its end, Instrument Sans) with nothing around it, worn in
   the sign's own frosted cream: --g-cream over a blur of the sky, the felt grain (depth.css' ::before), the lit lip and
   --lift-1. The key is the sign's: cream felt while the box is empty, navy once there are words. Anchored on the two ids so
   it stands over felt.css' earlier boxes (the pill, the kit field, the frosted depth field). */
[data-hb] :is(#ask, #ask2) {
  display: flex; align-items: center; gap: 8px; width: min(720px, 100%); height: auto; min-height: 64px; margin: 2.2vh auto 0;
  padding: 8px 8px 8px 16px; border-radius: 14px; text-align: left;
  background: radial-gradient(120% 120% at 50% 0, rgb(255 255 255 / .55), transparent 60%), var(--g-cream, rgb(252 245 230 / .82));
  -webkit-backdrop-filter: var(--g-blur, blur(18px) saturate(1.1)); backdrop-filter: var(--g-blur, blur(18px) saturate(1.1));
  box-shadow: var(--g-edge), var(--lift-1);
  color: var(--navy); font: 400 14px/20px 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: normal;
  transition: box-shadow 120ms cubic-bezier(.22, 1, .36, 1), background 120ms cubic-bezier(.22, 1, .36, 1);
}
[data-hb] .close #ask2 { margin-top: 3vh; }
[data-hb] :is(#ask, #ask2):focus-within {
  background: radial-gradient(120% 120% at 50% 0, rgb(255 255 255 / .6), transparent 55%), var(--g-cream-strong, rgb(252 246 233 / .9));
  box-shadow: 0 0 0 1px #c9dcf6, 0 0 0 4px rgb(31 127 234 / .18), var(--lift-1);
}
[data-hb] :is(#ask, #ask2)::after { display: none; }
[data-hb] :is(#ask, #ask2) input {
  position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; padding: 11px 0; border: 0; background: none;
  color: var(--navy); font: inherit; font-size: 17px; line-height: 26px; letter-spacing: -.01em; caret-color: #1f7fea; outline: none;
}
[data-hb] :is(#ask, #ask2) input::placeholder { color: rgb(27 39 72 / .5); opacity: 1; }

/* The stem: the start of the sentence in the field's own type, not editable; the reader's words follow it after one word space. */
[data-hb] .hb-stem {
  position: relative; z-index: 1; flex: none; margin-right: -3.5px; white-space: nowrap; cursor: text; user-select: none;
  color: var(--navy); font-size: 17px; line-height: 26px; letter-spacing: -.01em;
}

/* The key: the kit Button at sm (30 high, 0 12, 13 px), in the sign's cream felt; navy once there are words. */
[data-hb] :is(#ask, #ask2) .btn {
  position: relative; z-index: 1; flex: none; height: 30px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
  background: url('/felt/art/cream.webp') 0 0 / 512px, linear-gradient(#fffdf8, #efe5cf); background-blend-mode: multiply;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(120 92 52 / .2), 0 1px 1px rgb(6 12 36 / .14), 0 5px 10px -5px rgb(6 12 36 / .38);
  color: var(--navy); font: 400 13px/1 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: normal; transform: none;
  transition: background-color 260ms cubic-bezier(.22, 1, .36, 1), color 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 380ms cubic-bezier(.22, 1, .36, 1), transform 380ms cubic-bezier(.22, 1, .36, 1);
}
[data-hb] :is(#ask, #ask2) .btn::after { display: none; }
[data-hb] :is(#ask, #ask2) .btn:hover { background: url('/felt/art/cream.webp') 0 0 / 512px, linear-gradient(#fffefb, #f3eadb); background-blend-mode: multiply; transform: none; }
[data-hb] :is(#ask, #ask2)[data-has] .btn, [data-hb] :is(#ask, #ask2)[data-has] .btn:hover {
  background: linear-gradient(#2a3a66, var(--navy)); color: var(--cream);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 0 0 1px rgb(13 20 40 / .6), 0 1px 1px rgb(6 12 36 / .2), 0 5px 10px -5px rgb(6 12 36 / .45);
}
[data-hb] :is(#ask, #ask2) .btn:focus-visible { outline: 2px solid #1f7fea; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  [data-hb] :is(#ask, #ask2) .btn:active { transform: scale(.965); filter: brightness(.97); transition-duration: 70ms; }
}

/* What competes with the box steps back: the line under it is quiet. The sign's Get started stays (owner, 2026-11-07). */
[data-hb] .hero .under { margin-top: 1.8vh; font-size: 12px; opacity: .55; }

/* A phone: thumb-sized key; the words stay at 16 px so the phone doesn't zoom into the page when the box is pressed. */
@media (max-width: 900px) {
  [data-hb] :is(#ask, #ask2) { min-height: 60px; margin-top: 18px; padding: 6px 6px 6px 14px; }
  [data-hb] .close #ask2 { margin-top: 20px; }
  [data-hb] :is(#ask, #ask2) input { height: 44px; padding: 9px 0; font-size: 16px; line-height: 24px; }
  [data-hb] .hb-stem { font-size: 16px; line-height: 24px; }
  [data-hb] :is(#ask, #ask2) .btn { height: 44px; min-height: 44px; padding: 0 16px; font-size: 14px; }
}
@media (max-width: 380px) { [data-hb] .hb-stem { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { [data-hb] :is(#ask, #ask2), [data-hb] :is(#ask, #ask2) .btn { transition: none; } }

/* The lens (gpu-lens.js, html[data-lens] once its first frame is up): its canvas lies over the hero only, under everything
   the page draws there, and never takes a click. It draws the sky, the hills, the street, its lit windows and the stars
   itself, so the page's own copies step out of sight but keep their places (their positions, the lamp's mask and its
   flicker are read from them). What the page still draws softens at its own depth. */
.wg-canvas { position: absolute; left: 0; top: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
[data-lens] :is(#hero .stars, #set > .dim, #set > #lit) { visibility: hidden; }
[data-lens] :is(#props .hang img, #hero .beam) { filter: blur(var(--wgb-sky, 0px)); }
[data-lens] :is(#set > .halo, #set > .puffs, #set > .peek, #walkers .walker, #hero .oktag) { filter: blur(var(--wgb-street, 0px)); }

/* The street's twin in front of it (hero.js #setfront): the same box, walk and camera as .set (felt.css), holding only what
   hangs on a shop's front, the door sign. It is in front of the team: framed closer (camera.js), the door comes down to
   their heads, and the sign is the key the reader turns, so what it says is never hidden. */
.setfront { position: absolute; left: 0; bottom: 0; z-index: 5; height: max(47vh, 27.2vw); aspect-ratio: 2611 / 708; transform: translate3d(var(--tx, 0), 0, 0); transition: transform 1250ms steps(15, end); pointer-events: none; }
.setfront .oktag { translate: -50% 0; }
@media (max-width: 900px) { .setfront { height: 30vh; } }
@media (prefers-reduced-motion: reduce) { .setfront { transition: none; } }

/* The sign's two groups read apart (owner, 2026-11-07): the page's places, then Log in and Get started, with room between. */
.top .nav .end { margin-left: 22px; }

/* The door sign softens with the street it hangs on (owner: a sharp sign over the blur looks pasted on). The lens blurs
   .oktag from outside: it turns over in 3D (.ok-flip keeps its faces in depth), and a filter on .ok-flip itself would
   flatten it, so the turn would show the front mirrored. */
.oktag .ok-sign { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/*$vite$:1*/