@font-face{font-family:"Bricolage Grotesque";src:url("./bricolage-grotesque.ttf") format("truetype");font-style:normal;font-weight:200 800;font-display:swap}
:root{--paper:#eff4ef;--ink:#19322d;--dark:#152c29;--mint:#9fe8c9;--mint-light:#d8f6e6;--sea:#618d82;--line:#b7cfc1;--soft:#f9fcf8;--rose:#d47b7b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Bricolage Grotesque",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}
:focus-visible{outline:3px solid #256b59;outline-offset:4px}
.site-header{min-height:73px;background:var(--dark);color:#eefcf3;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px max(36px,calc((100vw - 1480px)/2))}
.wordmark{color:inherit;text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-.065em;display:flex;align-items:center;white-space:nowrap}.wordmark-dot{width:22px;height:22px;background:var(--mint);border-radius:58% 44% 52% 48%;border:2px solid #426c60;display:inline-block;margin-right:9px;transform:rotate(-15deg)}.period{color:var(--mint)}
.header-note{color:#a8c8b9;font-size:13px}.source-link{color:#d4f9e4;border:1px solid #6b9984;text-decoration:none;font-size:12px;font-weight:700;padding:10px 13px;white-space:nowrap}.source-link:hover{background:#23453d}
main{max-width:1480px;margin:auto;padding:0 36px}
.intro{padding:36px 0 27px;display:flex;justify-content:space-between;align-items:end;gap:30px}
.eyebrow,.stage-kicker,.control-label{font:800 11px "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.14em;color:#32765f}
h1,h2,p{margin-top:0}
h1{font-size:clamp(46px,4.5vw,62px);line-height:1;letter-spacing:-.08em;font-weight:800;margin:18px 0 21px}
h1 em{color:#3d886e;font-style:normal}
.intro p{font-size:17px;line-height:1.55;color:#5b786d;max-width:680px;margin:0}
.intro-rule{min-width:330px;display:flex;align-items:center;gap:10px;padding-bottom:9px;white-space:nowrap}.intro-rule span{font:800 11px "Bricolage Grotesque",system-ui,sans-serif;color:#42836a}.intro-rule b{font-size:11px}.intro-rule i{height:1px;background:#8fb8a4;width:35px}
.demo-stage{background:var(--soft);border:1px solid var(--ink);box-shadow:11px 11px 0 #19322d13;padding:27px 28px 0}
.stage-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.stage-kicker{display:block;margin-bottom:8px}.stage-head h2{font-size:25px;line-height:1.1;letter-spacing:-.05em;margin:0}.sample-chip{font:800 10px "Bricolage Grotesque",system-ui,sans-serif;color:#4d7465;border:1px solid #bfd8c8;padding:8px 10px;white-space:nowrap}
.desktop{height:340px;position:relative;overflow:hidden;background:radial-gradient(circle at 82% 30%,#d5eee0,transparent 30%),linear-gradient(130deg,#f1f6ef 0%,#dcebe3 65%,#c5dfd2 100%);border:1px solid #91b09f}
.desktop::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 24px,#fff8 25px,transparent 26px),linear-gradient(transparent 24px,#fff6 25px,transparent 26px);background-size:80px 80px;opacity:.28}
.desktop-top{height:42px;background:#e5efe8aa;border-bottom:1px solid #b6cbbd;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 17px;color:#6b8d7b;font:600 11px "Bricolage Grotesque",system-ui,sans-serif}.desk-dots{display:flex;gap:5px}.desk-dots i{height:7px;width:7px;border:1px solid #819f8f;border-radius:50%}
.editor-ghost{position:absolute;left:48px;top:72px;width:min(49%,500px);height:210px;border:1px solid #b5d2bd;background:#ffffffb8;padding:22px 24px;box-shadow:7px 9px 0 #748b751a;filter:blur(.3px)}.editor-title{font:700 12px "Bricolage Grotesque",system-ui,sans-serif;color:#5a7f6a;border-bottom:1px solid #d5e1d4;padding-bottom:14px;margin-bottom:24px}.editor-line{display:block;height:9px;background:#d8e4d8;margin:13px 0;border-radius:2px}.editor-line.l1{width:80%}.editor-line.l2{width:62%}.editor-line.l3{width:92%}.editor-line.l4{width:48%}.editor-line.l5{width:72%}
.desktop-caption{position:absolute;left:50px;bottom:30px;color:#5a806b;font:700 11px "Bricolage Grotesque",system-ui,sans-serif;z-index:2}
.widget{position:absolute;right:60px;bottom:26px;z-index:3;display:flex;align-items:end;gap:9px;transition:transform .3s ease}.pet-hit{border:0;background:transparent;padding:0;position:relative;width:205px;height:209px;display:block;flex:none}.pet-crop{display:block;width:190px;height:195px;overflow:hidden;position:absolute;bottom:4px;left:8px;filter:drop-shadow(0 8px 7px #1c5d4530)}.pet-crop img{position:absolute;width:280px;height:auto;max-width:none;left:-45px;top:-70px}.pet-halo{position:absolute;width:158px;height:112px;left:23px;bottom:8px;border-radius:50%;background:#b2efceaa;filter:blur(16px);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.5;transform:scale(.92)}}
.usage-card{width:278px;background:var(--dark);color:#e4f8e9;border:1px solid #4b7864;box-shadow:9px 9px 0 #143d3226;padding:15px 17px 13px;transition:opacity .25s,transform .25s}.usage-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font:800 11px "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.06em;color:#a8dbb9}.usage-heading small{color:#629c80}.usage-heading button{background:transparent;border:1px solid #568a72;color:#cef5d6;font-size:16px;line-height:1;width:23px;height:23px}.pet-message{font-size:13px;line-height:1.4;color:#f0fff2;margin:16px 0 19px}.usage-row{margin:0 0 16px}.usage-row>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:end;margin-bottom:7px}.usage-row span{font:700 10px "Bricolage Grotesque",system-ui,sans-serif;color:#a9c6b5}.usage-row strong{font-size:14px;color:#fff}.bar{height:6px;background:#36574d;overflow:hidden}.bar i{display:block;height:100%;background:var(--mint);transition:width .45s ease}.bar.weekly i{background:#9bbfd1}.usage-footer{border-top:1px solid #406259;padding-top:10px;display:flex;justify-content:space-between;gap:8px;color:#a6c1b5;font-size:10px}.usage-footer span:last-child{white-space:nowrap}
.widget.compact{right:56px}.widget.compact .usage-card{opacity:0;transform:translateY(8px);pointer-events:none;width:0;padding:0;border:0;overflow:hidden}.widget.compact .pet-hit{width:144px;height:155px}.widget.compact .pet-crop{transform:scale(.72);transform-origin:bottom left}.widget.compact .pet-halo{transform:scale(.7);transform-origin:bottom left}
.widget.stale .usage-card{border-color:#a98a74}.widget.stale .bar i{background:#98a59a}.widget.stale .usage-row strong{color:#c5d1c9}
.control-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0 25px}.control-label{display:block;margin-bottom:11px}.state-buttons{display:flex;gap:6px;flex-wrap:wrap}.state-buttons button,.view-controls>button{background:#f0f7f1;border:1px solid #a5c7b4;color:#315e49;font-size:11px;font-weight:750;padding:9px 11px}.state-buttons button.selected{background:var(--dark);border-color:var(--dark);color:#fff}.state-buttons button:hover,.view-controls>button:hover{border-color:#315e49}.view-controls{display:flex;align-items:center;gap:15px;white-space:nowrap}.motion-toggle{font-size:11px;color:#456b58;display:flex;align-items:center;gap:6px;cursor:pointer}.motion-toggle input{accent-color:#2b7658}
.principles{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding:75px 0 90px;align-items:start}.principles h2{font-size:43px;letter-spacing:-.06em;margin-bottom:14px}.principles p{font-size:17px;line-height:1.68;color:#547262;max-width:730px;margin:0}.principles strong{color:var(--ink)}
footer{background:var(--dark);color:#a9cbb7;display:flex;justify-content:space-between;gap:20px;padding:23px max(36px,calc((100vw - 1480px)/2));font-size:11px}footer span:first-child{font:800 11px "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.1em;color:#def7e5}
.reduce-motion *, .reduce-motion *::before,.reduce-motion *::after{animation:none!important;transition:none!important}
@media(max-width:1050px){.intro{padding-top:50px}.intro-rule{display:none}.widget{right:24px}.editor-ghost{left:23px;width:45%}.desktop-caption{left:25px}}
@media(max-width:760px){.site-header{padding:12px 18px}.header-note{display:none}.source-link{font-size:10px}.intro{padding:43px 0 33px}.intro p{font-size:15px}h1{font-size:clamp(47px,9vw,67px)}main{padding:0 15px}.demo-stage{padding:19px 14px 0}.stage-head{display:block}.stage-head h2{font-size:22px}.sample-chip{display:inline-block;margin-top:12px;font-size:8px}.desktop{height:410px}.editor-ghost{left:15px;top:80px;width:74%;height:245px;opacity:.6}.desktop-caption{display:none}.widget{right:8px;bottom:10px;transform:scale(.82);transform-origin:bottom right}.control-bar{align-items:stretch;flex-direction:column}.view-controls{justify-content:space-between}.principles{grid-template-columns:1fr;gap:12px;padding:55px 0}.principles h2{font-size:34px}.principles p{font-size:15px}footer{padding:20px 16px;display:block}footer span{display:block;margin-bottom:8px}}
@media(max-width:480px){.desktop{height:385px}.widget{transform:scale(.68)}.editor-ghost{width:84%}.usage-card{width:278px}.stage-head h2{max-width:290px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

body{font-optical-sizing:auto}h1,h2,h3,.wordmark,.brand{font-family:"Segoe UI",Arial,sans-serif}.intro p,.intro-copy>p,.principles p{font-weight:400;letter-spacing:-.012em}