:root{--ink:#1c1814;--paper:#f7f3ec;--bar:#241e19;--muted:#a99c8b;--line:rgba(255,255,255,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#ebe6de;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.demo-bar{position:sticky;top:0;z-index:50;background:rgba(36,30,25,.97);color:#fff;border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.demo-inner{max-width:1500px;margin:auto;display:flex;align-items:center;gap:22px;padding:12px 20px}.brand{font-family:Georgia,serif;letter-spacing:.12em;font-size:18px;white-space:nowrap}.label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#d8cec1;white-space:nowrap}.nav{margin-left:auto;display:flex;gap:4px;overflow:auto}.nav a{color:#eee7de;text-decoration:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:9px 11px;border-radius:2px;white-space:nowrap}.nav a:hover,.nav a.active{background:#fff;color:#201b17}
.stage{max-width:1600px;margin:0 auto;padding:18px}.frame{background:#fff;box-shadow:0 12px 45px rgba(30,25,20,.12);overflow:hidden}.frame img{display:block;width:100%;height:auto}.note{max-width:1600px;margin:10px auto 0;padding:0 18px 18px;font-size:11px;color:#6f665c;text-align:center}.flow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0 0}.flow a{font-size:11px;text-decoration:none;color:#fff;background:#29231e;padding:10px 16px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:850px){.demo-inner{align-items:flex-start;flex-wrap:wrap;gap:8px}.nav{width:100%;margin-left:0}.stage{padding:8px}.label{display:none}}