@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200;300;400;500&display=swap');
:root { --field:#152719; --panel:#203522; --ink:#f3f0e6; --muted:#aab89b; --accent:#bdca7b; --line:rgba(243,240,230,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--field); color:var(--ink); font:300 14px/1.55 'IBM Plex Mono',ui-monospace,monospace; text-transform:lowercase; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.demo-nav { position:sticky; top:14px; z-index:10; width:min(1280px,calc(100% - 48px)); height:60px; margin:14px auto 0; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); background:rgba(30,53,34,.96); box-shadow:0 14px 38px rgba(3,14,7,.22); }
.demo-nav > a:last-child { padding:8px 12px; border:1px solid var(--line); font-size:.68rem; }
.demo-mark { display:flex; align-items:center; gap:3px; color:var(--accent); font-weight:500; }
.demo-mark i { width:16px; height:16px; display:block; border-radius:50%; background:currentColor; }
.demo-mark span { margin-left:1px; }
main { width:min(1280px,calc(100% - 48px)); margin:0 auto; }
.demo-intro { padding:110px 0 90px; }
.demo-intro > p { margin:0 0 20px; color:var(--accent); font-size:.65rem; letter-spacing:.12em; }
.demo-intro h1 { max-width:920px; margin:0; font-size:clamp(3rem,7vw,6.5rem); font-weight:200; line-height:.96; letter-spacing:-.075em; }
.demo-intro span { display:block; margin-top:30px; color:var(--muted); font-size:.66rem; }
.screen-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding-bottom:110px; }
.screen { overflow:hidden; border:1px solid var(--line); background:var(--panel); box-shadow:0 24px 58px rgba(3,14,7,.26); }
.screen img { width:100%; aspect-ratio:1.44; display:block; object-fit:cover; object-position:left top; border-bottom:1px solid var(--line); }
.screen > div { min-height:118px; padding:21px 23px 24px; display:grid; grid-template-columns:36px 1fr; align-items:baseline; column-gap:8px; }
.screen span { color:var(--accent); font-size:.62rem; }
.screen h2 { margin:0; font-size:1.15rem; font-weight:400; }
.screen p { grid-column:2; margin:7px 0 0; color:var(--muted); font-size:.7rem; }
.demo-cta { margin-bottom:40px; padding:42px; display:flex; align-items:center; justify-content:space-between; gap:30px; border:1px solid var(--line); background:var(--panel); }
.demo-cta p { margin:0; font-size:clamp(1.2rem,2.5vw,1.9rem); }
.demo-cta a { padding:12px 15px; background:var(--accent); color:var(--field); }
@media(max-width:760px){.demo-nav,main{width:calc(100% - 24px)}.demo-nav{top:8px;height:54px;margin-top:8px}.demo-intro{padding:74px 8px 58px}.demo-intro h1{font-size:clamp(2.4rem,13vw,4rem)}.screen-grid{grid-template-columns:1fr;gap:16px;padding-bottom:64px}.screen>div{min-height:96px;padding:17px}.demo-cta{padding:28px 22px;align-items:flex-start;flex-direction:column}}