@font-face{font-family:Manrope;src:url('assets/manrope.ttf')}*{box-sizing:border-box}body{margin:0;background:linear-gradient(140deg,#eef1ed,#dce4df);color:#1e2c27;font-family:Manrope,sans-serif}main{max-width:1400px;margin:auto;padding:28px 36px 32px}header{display:flex;align-items:end;justify-content:space-between;gap:20px}h1{font-size:clamp(27px,3vw,40px);line-height:1.1;margin:5px 0 8px}p{margin:0;color:#566b61;font-size:14px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700}a,button{font:inherit;font-weight:700}a{color:#255d4c;text-decoration:none;border-bottom:1px solid #80a496;padding-bottom:4px}nav{display:flex;gap:8px;margin:24px 0 12px}button{cursor:pointer;border:1px solid #b9c9bf;border-radius:8px;background:#f8faf7;color:#31483e;padding:10px 15px}button[aria-pressed=true]{background:#245f4d;color:white;border-color:#245f4d}.frame{background:#f7f8f5;border:1px solid #cbd6ce;border-radius:12px;overflow:hidden}#view{height:min(67vh,720px);min-height:400px}canvas{display:block}.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;font-size:13px;color:#53695e}.bar button{font-size:12px;padding:8px 12px}.hint{margin-top:12px;font-size:12px;line-height:1.5}@media(max-width:650px){main{padding:20px 16px}header{align-items:start;flex-direction:column}nav{display:grid;grid-template-columns:1fr;gap:6px;margin-top:18px}nav button{text-align:left}#view{height:52vh;min-height:320px}.bar{align-items:flex-start}.bar button{white-space:nowrap}}