@font-face{font-family:Canela;src:url('assets/Canela-Regular.otf') format('opentype');font-display:swap}
@font-face{font-family:Work;src:url('assets/WorkSans.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--bg:#09251f;--cream:#f1ecdf;--gold:#d0ba86;--muted:#b0c0b5;--line:#c7d5c329;font-family:Work,Arial,sans-serif;color:var(--cream);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100svh;background:radial-gradient(ellipse at 26% 54%,#193f32 0,transparent 52%),linear-gradient(130deg,#0c2a22,#071e19)}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
button,a,input{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.shell{max-width:1320px;min-height:100svh;margin:auto;padding:30px 56px 22px;display:flex;flex-direction:column}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.wordmark{width:116px;height:auto;display:block}
.site-label{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
main{margin:auto 0;padding:30px 0}
.intro{margin:0 0 30px}
h1,h2{font-family:Canela,Georgia,serif;font-weight:400;margin:0;letter-spacing:-.025em}
h1{font-size:clamp(2.6rem,4.3vw,4rem);line-height:1.1}
.intro p{font-size:1.0625rem;color:var(--muted);line-height:1.6;margin:14px 0 0}
.demo-options{display:grid;grid-template-columns:1.45fr 1fr;gap:30px;align-items:stretch}
.public-demo{border:1px solid #b9cdb437;border-radius:5px;overflow:hidden;background:#122f25;display:flex;flex-direction:column;transition:border-color .2s,background .2s}
.public-demo:hover{border-color:#d0ba86aa;background:#17372b}
.demo-image{position:relative;min-height:190px;height:clamp(220px,24vw,300px);overflow:hidden;background:radial-gradient(ellipse at 52% 85%,#335442 0,#193b2d 52%,#153327 100%)}
.demo-image img{position:absolute;display:block;width:88%;height:100%;object-fit:contain;left:6%;top:10px;filter:drop-shadow(0 15px 12px #041a1766);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.public-demo:hover .demo-image img{transform:translateY(-4px) scale(1.025)}
.image-caption{position:absolute;z-index:1;top:18px;left:22px;font-size:.75rem;color:#e1e3d4;padding:6px 9px;border:1px solid #d5d9bd30;border-radius:3px;background:#09251f99;backdrop-filter:blur(8px)}
.demo-description{padding:23px 26px 25px;display:flex;align-items:center;gap:22px;justify-content:space-between;border-top:1px solid var(--line)}
.demo-description h2{font-size:2.15rem;line-height:1.1}
.demo-description p{max-width:355px;font-size:.9375rem;line-height:1.6;color:#c2cdbf;margin:10px 0 0}
.public-action{white-space:nowrap;font-size:.875rem;color:var(--gold);padding:10px 0 9px;border-bottom:1px solid #d0ba8666;transition:border-color .2s}
.public-demo:hover .public-action{border-color:var(--gold)}
.custom-demo{padding:42px 32px 22px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line);border-radius:5px;background:#071d1829}
.eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.custom-demo h2{font-size:clamp(2rem,2.5vw,2.65rem);line-height:1.15;margin:16px 0}
.custom-heading p{max-width:295px;font-size:1rem;line-height:1.65;color:var(--muted);margin:0}
form{margin-top:30px}
label{font-size:.875rem;display:block;margin-bottom:9px;font-weight:500}
.code-controls{display:flex;gap:8px}
input{width:100%;min-width:0;height:49px;padding:0 13px;border:1px solid #9ab1986b;border-radius:3px;background:#071e1980;color:var(--cream);font-size:1rem;transition:border-color .2s}
input::placeholder{color:#95aa9e;opacity:1}
input:hover{border-color:#b0c0b5}
input:focus{border-color:var(--gold);outline:2px solid #d0ba8633;outline-offset:2px}
input[aria-invalid=true]{border-color:#e8aaa0}
button{border:1px solid var(--gold);border-radius:3px;background:var(--gold);color:#102d23;font-size:.875rem;font-weight:550;padding:0 17px;min-height:49px;cursor:pointer;transition:background .2s,border-color .2s}
button:hover{background:#e2cea1;border-color:#e2cea1}
.code-help{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:12px 0 0}
.code-error{color:#f2b9af;font-size:.875rem;line-height:1.5;margin:9px 0 0;min-height:2.625em}
footer{color:#93ab9d;font-size:.75rem;line-height:1.5;text-align:center;letter-spacing:.025em}
@media(min-width:1000px) and (max-height:780px){.shell{padding-top:22px;padding-bottom:16px}main{padding:23px 0}.intro{margin-bottom:22px}.intro p{margin-top:10px}.demo-image{height:228px}.custom-demo{padding-top:28px}.site-header{padding-bottom:18px}}
@media(max-width:1050px){.shell{padding-left:34px;padding-right:34px}.demo-options{gap:20px;grid-template-columns:1.3fr 1fr}.custom-demo{padding:30px 24px 12px}.demo-description{align-items:flex-start;flex-direction:column;gap:7px}.demo-description p{max-width:350px}.public-action{padding:7px 0}.demo-image{height:240px}.code-controls{flex-direction:column}button{width:100%}}
@media(max-width:740px){.shell{padding:24px 22px 20px}.site-header{padding-bottom:20px}.wordmark{width:100px}.site-label{font-size:.6875rem;letter-spacing:.08em}main{padding:32px 0}.intro{margin-bottom:26px}h1{font-size:2.8rem}.intro p{font-size:1rem;max-width:310px}.demo-options{grid-template-columns:1fr;gap:22px}.demo-image{height:240px}.demo-image img{width:90%;left:5%;top:7px}.demo-description{padding:22px;gap:7px}.demo-description h2{font-size:2rem}.demo-description p{max-width:360px}.custom-demo{padding:28px 22px 16px}.custom-demo h2{margin:13px 0}.custom-heading p{max-width:340px}.code-controls{flex-direction:row}button{width:auto}form{margin-top:25px}.code-error{min-height:1.5em}footer{font-size:.75rem}}
@media(max-width:350px){.code-controls{flex-direction:column}button{width:100%}.site-label{font-size:.625rem}.demo-image{height:190px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}