:root{color:#24392c;font-synthesis:none;--green:#557b40;--line:#d9dfd3;background:#f7f8f4;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}a{color:inherit}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{color:#24392c;cursor:pointer;background:#fff;border:1px solid #cbd4c4;border-radius:6px;padding:.65rem .8rem;font-weight:600}button:hover{background:#edf2e8}:focus-visible{outline-offset:4px;outline:3px solid #557b40}.skip-link{clip-path:inset(50%);white-space:nowrap;z-index:10;background:#fff;width:1px;height:1px;position:fixed;top:0;left:0;overflow:hidden}.skip-link:focus{clip-path:none;width:auto;height:auto;padding:1rem;overflow:visible}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1rem;max-width:1500px;margin:auto;padding:1.5rem 3rem;display:flex}.brand{letter-spacing:-.07em;font-family:Space Grotesk,system-ui,sans-serif;font-size:1.65rem;font-weight:700;text-decoration:none}.brand span{color:var(--green)}.collection-link{text-underline-offset:5px;font-size:.85rem}.site-footer{border-top:1px solid var(--line);text-align:center;color:#687264;max-width:1500px;margin:auto;padding:1.5rem 1rem;font-size:.75rem}.site-footer p{margin:.35rem 0}.site-footer a{text-underline-offset:3px}main{max-width:1500px;margin:auto;padding:0 3rem 2rem}h1,h2{font-family:Space Grotesk,system-ui,sans-serif}h1{letter-spacing:-.05em;margin:.6rem 0 1rem;font-size:clamp(2rem,4vw,3.5rem);font-weight:500;line-height:1.08}h2{font-weight:500}p{line-height:1.6}.eyebrow{letter-spacing:.15em;text-transform:uppercase;color:#64765c;font-size:.7rem;font-weight:700}.landing{padding:5rem 0 2rem}.landing h1{font-size:clamp(3.2rem,7vw,6rem)}.intro{color:#687264;max-width:38rem;font-size:1.1rem}.demo-cards{grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:3.5rem 0 2rem;display:grid}.demo-card{border:1px solid var(--line);border-radius:8px;flex-direction:column;min-height:300px;padding:1.8rem;text-decoration:none;display:flex}.demo-card.available{background:#eaf0e4;border-color:#b4c7a7;transition:background .15s}.demo-card.available:hover{background:#e0ebd7}.demo-number{text-transform:uppercase;letter-spacing:.1em;color:#687b5c;font-size:.7rem}.demo-card h2{margin:1.6rem 0 .4rem;font-size:1.5rem}.demo-card p{color:#667160;font-size:.9rem}.card-action,.card-status{margin-top:auto;padding-top:1.5rem;font-size:.8rem}.card-action{justify-content:space-between;font-weight:700;display:flex}.card-status,.landing-note{color:#727c6b;font-size:.8rem}.demo-heading{justify-content:space-between;align-items:center;gap:1rem;padding:2rem 0 1.5rem;display:flex}.demo-heading h1{margin-bottom:.4rem;font-size:2.5rem}.demo-heading p:not(.eyebrow){color:#687264;margin-bottom:0;font-size:.9rem}.demo-tag{border:1px solid var(--line);white-space:nowrap;border-radius:20px;padding:.5rem .9rem;font-size:.7rem}.demo-layout{grid-template-columns:270px minmax(0,1fr);align-items:stretch;gap:1.25rem;display:grid}.controls{border:1px solid var(--line);background:#fff;border-radius:8px;padding:1.3rem}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.9rem;display:flex}.panel-heading h2{margin:0;font-size:1rem}.parameter{margin-bottom:1.1rem}.parameter-heading{justify-content:space-between;gap:.5rem;font-size:.75rem;font-weight:600;display:flex}output{color:#557b40;white-space:nowrap;font-variant-numeric:tabular-nums}input[type=range]{accent-color:#557b40;cursor:pointer;width:100%;margin:.65rem 0 .3rem}.exact-input{color:#7a8274;justify-content:space-between;align-items:center;font-size:.65rem;display:flex}input[type=number]{color:#485b40;background:#fafbf8;border:1px solid #dce3d6;border-radius:4px;width:72px;padding:.15rem .3rem;font-size:.7rem}input[type=number]:invalid{border-color:#b9433c}.retardance{border-bottom:1px solid var(--line);color:#687264;justify-content:space-between;padding-bottom:1rem;font-size:.7rem;display:flex}.toggles{gap:.85rem;padding:.5rem 0 1.25rem;display:grid}.toggles label{cursor:pointer;align-items:center;gap:.55rem;font-size:.75rem;display:flex}input[type=checkbox]{accent-color:#557b40;width:15px;height:15px;margin:0}.actions{gap:.5rem;display:flex}.actions button{flex:1;font-size:.75rem}button.primary-button{color:#fff;background:#557b40;border-color:#557b40}button.primary-button:hover{background:#41662e}.control-note{color:#7c8575;margin:1rem 0 0;font-size:.65rem}.viewport{border:1px solid var(--line);background:#edf1e9;border-radius:8px;min-height:620px;position:relative;overflow:hidden}.viewport canvas{touch-action:none;display:block}.viewport-caption{color:#63735a;pointer-events:none;background:#f7f8f4e6;align-items:center;gap:.5rem;padding:.8rem 1rem;font-size:.65rem;display:flex;position:absolute;bottom:0;left:0;right:0}.viewport-caption>span:last-child{margin-left:auto}.status-dot{background:#557b40;border-radius:50%;width:6px;height:6px}.status-dot.paused{background:#b9433c}.canvas-message{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex;position:absolute;inset:0}.demo-notes{grid-template-columns:1fr 1fr;gap:2rem;margin-top:1rem;display:grid}.demo-notes p{color:#737d6a;font-size:.75rem}.demo-notes strong{color:#485c3e}@media (width<=1050px){.site-header{padding:1.25rem 1.5rem}main{padding:0 1.5rem 2rem}.demo-cards{grid-template-columns:1fr}.demo-card{min-height:230px}.viewport{min-height:580px}}@media (width<=700px){.site-header{padding:1rem}.collection-link{font-size:.7rem}main{padding:0 1rem 1rem}.landing{padding-top:3rem}.demo-tag{display:none}.demo-heading{padding:1.5rem 0}.demo-layout{grid-template-columns:1fr}.viewport{grid-row:1;height:420px;min-height:0}.controls{padding:1.25rem}.demo-notes{grid-template-columns:1fr;gap:0}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}
