@font-face{font-family:Kode;src:url('assets/kode-mono.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Plex;src:url('assets/plex-mono.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:GardenSerif;src:url('assets/garden-serif.woff2') format('woff2');font-style:italic;font-weight:300;font-display:swap}
:root{color-scheme:light;--paper:#f8fafa;--ink:#191918;--green:#b2bf5a;--pink:#fd6b94;--blue:#add6f7;--orange:#f2511b}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:108px}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.4 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #668037;outline-offset:6px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:88px;padding:0 3.4%;background:rgba(248,250,250,.94);backdrop-filter:blur(16px);border-bottom:1px solid #edf0f0}.brand{font-size:14px}.site-header nav{display:flex;align-items:center;gap:4px;position:absolute;left:50%;transform:translateX(-50%);padding:6px 10px;background:#f2f3f4;border-radius:40px}.site-header nav a{padding:10px 17px;color:#919296;transition:color .2s,background .2s;border-radius:30px}.site-header nav a:hover{color:#191918}.site-header nav a.active{color:#191918;background:#fff}.garden-shortcut{color:#919697;font-size:25px;line-height:1}.garden-shortcut:hover{color:#798643}
.gallery{max-width:1260px;margin:0 auto;padding:32px 5% 0}.media-row{display:flex;gap:20px;margin-bottom:20px;align-items:stretch}.card{position:relative;display:block;border:1px solid #edf0f1;border-radius:8px;overflow:hidden;background:#eef0f2;min-width:0;height:410px;padding:0;cursor:pointer}.card img,.card video{width:100%;height:100%;display:block;object-fit:cover}.media-row:nth-child(2) .card{height:390px}.media-row:nth-child(3) .card{height:370px}.media-row:nth-child(4) .card{height:425px}.gallery-end{max-width:1260px;padding:28px 5% 84px;margin:auto;display:flex;justify-content:space-between;font-size:12px;color:#8b9292}.gallery-end a{color:#6e7776}.gallery-end a:hover{color:#191918}
footer{background:var(--ink);color:#f9f8f6;overflow:hidden;position:relative}.footer-top{display:grid;grid-template-columns:42% 20% 1fr;gap:0;padding:64px 2.7% 24px;position:relative;z-index:2}.footer-quote p{font-family:GardenSerif,Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(28px,2.1vw,40px);line-height:1.05;letter-spacing:.01em;margin:0 0 22px}.footer-quote>span,.footer-column{font-family:Plex,'Courier New',monospace;font-size:12px}.footer-column h2{font:inherit;margin:0 0 22px}.footer-column>a,.footer-column>div{display:block;color:#737370;margin-bottom:20px;width:max-content;line-height:1.5}.footer-column a:hover{color:#f9f8f6}.footer-column [aria-disabled=true]{color:#686866}
.garden{position:relative;height:610px;width:100%;cursor:url('assets/watering-can.svg') 8 20,auto;touch-action:pan-y}.plants{position:absolute;inset:0}.plant{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:end;justify-content:center;padding:9px;min-width:44px;min-height:44px;background:transparent;border:0;color:var(--green);cursor:inherit;border-radius:4px}.plant pre{margin:0;white-space:pre;text-align:center;font:700 12px/14px Kode,'Courier New',monospace;transform-origin:50% 100%}.plant .flower-head{color:var(--flower)}.plant .stem{color:var(--green)}.plant:focus-visible{outline:1px dashed var(--green)}.plant.wet pre{animation:grow .65s ease-out}.plant.sway pre{animation:sway 2.4s steps(2,end) infinite}.plant.wet.sway pre{animation:grow .65s ease-out,sway 2.4s .65s steps(2,end) infinite}.watering-cursor{position:absolute;z-index:4;pointer-events:none;display:none;width:31px;height:24px;transform:translate(-8px,-20px)}.watering-cursor img{display:block;width:31px;height:24px;transform-origin:50% 50%}.watering-cursor .water{position:absolute;top:17px;left:-20px;margin:0;color:var(--blue);font:700 12px/14px Kode,monospace;opacity:0;white-space:pre}.garden.custom-cursor,.garden.custom-cursor .plant{cursor:none}.garden.custom-cursor .watering-cursor{display:block}.watering-cursor.pouring img{transform:rotate(-24deg)}.watering-cursor.pouring .water{animation:pour 1s steps(4,end)}.footer-base{display:flex;justify-content:space-between;padding:0 2.7% 24px;font:10px/1.5 Plex,monospace;color:#737370}.garden-instruction{color:#b2bf5a}
@keyframes grow{0%{transform:scale(.82) rotate(-4deg)}50%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0)}}@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes pour{0%{opacity:1;transform:translateY(0)}25%{opacity:1;transform:translate(-3px,6px)}50%{opacity:1;transform:translate(-5px,12px)}75%{opacity:.7;transform:translate(-6px,18px)}100%{opacity:0;transform:translate(-8px,24px)}}
@media(min-width:1600px){.gallery{max-width:1480px}.card{height:480px}.media-row:nth-child(2) .card{height:450px}.media-row:nth-child(3) .card{height:440px}.media-row:nth-child(4) .card{height:470px}.garden{height:690px}.plant pre{font-size:15px;line-height:17.5px}.footer-column,.footer-quote>span{font-size:15px}.footer-top{padding-top:72px}}
@media(max-width:700px){.site-header{height:76px;padding:0 5%;}.brand{font-size:12px}.site-header nav{gap:0;padding:5px;left:auto;right:4%;transform:none}.site-header nav a{padding:9px 11px;font-size:11px}.garden-shortcut{display:none}.gallery{padding:22px 5% 0}.media-row{gap:14px;margin-bottom:14px;flex-direction:column}.card,.media-row:nth-child(n) .card{flex:none!important;width:100%;height:auto;aspect-ratio:1.35}.gallery-end{padding:20px 5% 50px;gap:18px;flex-direction:column}.footer-top{grid-template-columns:1fr 1fr;padding:42px 5% 0;gap:34px 10px}.footer-quote{grid-column:1/-1}.footer-quote p{font-size:30px}.footer-column{font-size:11px}.footer-column h2{margin-bottom:16px}.footer-column a,.footer-column>div{margin-bottom:13px}.garden{height:600px}.plant pre{font-size:11px;line-height:13px}.plant:nth-child(n+25){display:none}.footer-base{padding:0 5% 22px;gap:16px;flex-direction:column}dialog{padding:14px}}
.component-card{width:100%;overflow:hidden;border:1px solid #e9edf2;border-radius:12px;background:#f5f7fa}.component-card iframe{display:block;width:100%;height:810px;border:0}.media-row.component-row{display:block;margin:20px 0}.component-row+.media-row{margin-top:20px}
@media(max-width:1150px){.component-card iframe{height:880px}}@media(max-width:700px){.component-card iframe{height:950px}.media-row.component-row{margin:24px 0}.component-row+.media-row{margin-top:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.watering-cursor.pouring .water{opacity:1}}
.media-row{align-items:flex-start}
.card.natural-media{height:auto!important;aspect-ratio:auto!important}
.card.natural-media img,.card.natural-media video{width:100%;height:auto;display:block}

.card.mobile-demo{height:auto!important;aspect-ratio:8/5!important}
.mobile-demo-scene{width:100%;height:100%;aspect-ratio:8/5;display:flex;align-items:center;justify-content:center;background:#c5c5b9 url('assets/tina-grain-gradient.svg') center/cover}
.mobile-demo-frame{width:25%;aspect-ratio:630/1366;border-radius:10% / 4.6%;overflow:hidden;background:#f7f7f7;box-shadow:0 22px 44px -18px #38444350,0 1px 3px #38444320;isolation:isolate}
.card.mobile-demo .mobile-demo-frame video{width:100%;height:100%;max-height:none;object-fit:cover;display:block;border-radius:0;background:#f7f7f7}


@media(max-width:700px){.card.mobile-demo,.mobile-demo-scene{aspect-ratio:1/1!important}.mobile-demo-frame{width:38%}}
.card.component-card{height:auto!important;aspect-ratio:1100/660!important;border-radius:8px}
.component-preview{width:100%;height:100%;pointer-events:none}
.component-card .component-preview iframe{position:absolute;left:0;top:0;width:1100px;height:660px;transform-origin:top left;border:0;pointer-events:none}

@media(hover:hover) and (pointer:fine){body,body *{cursor:url('assets/circle-cursor.svg') 12 12,auto}}

.garden.custom-cursor,.garden.custom-cursor *{cursor:none!important}
.card.coffee-mobile{height:auto!important;aspect-ratio:1.45!important;cursor:inherit}
.coffee-mobile-scene{width:100%;height:100%;aspect-ratio:1.45;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));align-items:center;gap:12px 8px;padding:18px;background:#eeeae1}
.card.coffee-mobile .coffee-phone{width:100%;height:100%;max-width:none;max-height:100%;object-fit:contain;display:block;border-radius:0}
@media(max-width:700px){.card.coffee-mobile,.coffee-mobile-scene{aspect-ratio:1/1.75!important}.coffee-mobile-scene{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:12px 6px;padding:14px}}

.card.interactive-as{aspect-ratio:8/9;height:auto!important;background:#030303}.interactive-as iframe{display:block;border:0;width:100%;height:100%;position:absolute;inset:0}.interactive-as{position:relative}

.media-row .card.interactive-as{height:auto!important;aspect-ratio:8/9!important;min-height:0}

.media-row .card.confidence-card{height:auto!important;aspect-ratio:1!important;background:#eaf0f7;cursor:inherit}confidence-score{display:block;position:relative;width:100%;height:100%;aspect-ratio:1;font-family:Arial,Helvetica,sans-serif}.confidence-art{width:100%;height:100%;display:block}.confidence-heading{font-size:19px;fill:#242d3b;font-weight:400}.confidence-segments path{fill:none;stroke-width:13;stroke-linecap:round}.confidence-number{font-size:64px;letter-spacing:-2px;fill:#171c27;font-weight:400}.confidence-subtitle{font-size:15px;fill:#949dab}.confidence-question{font-size:14px;fill:#677283}.confidence-meta{font-size:12px;fill:#929ba9}.confidence-level,.confidence-outlook{font-size:18px;fill:#263247;font-weight:500}.confidence-options{position:absolute;inset:0;pointer-events:none}.confidence-options button{pointer-events:auto;position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:6%;aspect-ratio:1;border:0;padding:0;background:transparent;border-radius:50%;color:#aab4c4;font-size:clamp(10px,1.2vw,14px);font-family:Arial,Helvetica,sans-serif}.confidence-options button[aria-pressed=true]{color:#0054ed;background:#eef4ff;font-weight:600}.confidence-options button:focus-visible{outline:2px solid #0054ed;outline-offset:2px}@media(max-width:700px){.confidence-options button{font-size:11px}}

.media-row .card.trigger-component-card{height:auto!important;aspect-ratio:1120/760!important;background:#e5e8ec}.trigger-preview{width:100%;height:100%;pointer-events:none}.trigger-preview iframe{position:absolute;left:0;top:0;width:1120px;height:760px;border:0;transform-origin:top left;pointer-events:none}

.confidence-segments path{stroke-width:16}.confidence-number{fill:#17385f}.confidence-heading{font-size:19px;font-weight:400}

.media-row .card.demo-component-card{height:auto!important;min-height:0}.demo-preview{width:100%;height:100%;pointer-events:none}.demo-preview iframe{position:absolute;left:0;top:0;border:0;transform-origin:top left;pointer-events:none}/* Match the borders of paired tiles without changing their complete media frames. */
.media-row{align-items:stretch}

/* Keep a compact gap between the playground closing line and footer. */
.gallery-end{padding-bottom:48px}

/* Gallery tiles are presentation surfaces; only inline confidence controls and garden plants are interactive. */
.card{cursor:inherit}

/* Original counter GIF, composited over a code-native orange gradient and grain. */
.orange-counter-card{cursor:url('assets/random/counter-cursor.svg') 16 16,auto!important}


.orange-counter-card video{cursor:url('assets/random/counter-cursor.svg') 16 16,auto}