/* Titan demos page (V6). Only demo.html loads this file. */
.demo-page{padding-block:56px 88px}
.demo-page .wrap{max-width:900px}
.demo-page h1{font-size:clamp(2rem,3.6vw,2.75rem);font-weight:600;margin-block:10px 8px}
.demo-page .lede{color:var(--ink-2);max-width:62ch;margin-bottom:28px}
.demo-card{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:28px 32px}
.demo-card h2{font-size:var(--s2);font-weight:600;margin:0 0 18px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.demo-grid label{display:grid;gap:6px;font-size:.875rem;font-weight:500}
.demo-grid input{font:inherit;font-weight:400;padding:.65rem .75rem;border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--ink);min-width:0}
.demo-grid input:focus{outline:2px solid var(--gold);outline-offset:1px;background:var(--sheet)}
.demo-checks{display:grid;gap:12px;margin:22px 0 18px}
.chk{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:.9375rem;color:var(--ink-2);cursor:pointer}
.chk input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--ink)}
.chk a{color:var(--ink)}
#viewBtn[disabled]{opacity:.6;cursor:progress}
.field-err{display:block;color:#9B1C1C;font-size:.8125rem;font-weight:500;line-height:1.35}
.field-err[hidden]{display:none}
.chk-err{margin:4px 0 0 30px}
.demo-grid input[aria-invalid="true"],.chk input[aria-invalid="true"]{border-color:#9B1C1C;outline-color:#9B1C1C}
.demo-err{color:#9B1C1C;background:#FDECEC;border:1px solid #F3C2C2;border-radius:6px;padding:10px 12px;margin:0 0 14px;font-size:.9375rem}
.demo-note{font-size:.8125rem;color:var(--ink-2);margin-top:14px}
.demo-note a{color:var(--ink)}
.demo-tabs{display:flex;gap:8px;margin-bottom:16px}
.demo-tabs button{font:inherit;font-weight:600;padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
.demo-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.demo-player{position:relative;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;-webkit-user-select:none;user-select:none}
.demo-player video{display:block;width:100%;height:100%;background:#000}
.demo-player:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh}
.demo-mark{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);align-items:center;justify-items:center;overflow:hidden}
.demo-mark span{transform:rotate(-24deg);font-family:var(--f-mono);font-size:clamp(.625rem,1.4vw,.875rem);color:#fff;opacity:.16;white-space:nowrap;text-shadow:0 0 2px #000}
.demo-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.demo-bar .demo-note{margin-top:0}
@media (max-width:640px){
  .demo-page{padding-block:36px 64px}
  .demo-card{padding:20px 16px}
  .demo-grid{grid-template-columns:1fr}
  #viewBtn{width:100%;justify-content:center}
  .demo-mark span{font-size:.5625rem}
}