* { box-sizing: border-box; }
:root { --wine:#59070a; --wine-dark:#390407; --ivory:#fbf7ef; --ink:#281d1e; --muted:#78696a; --line:rgba(89,7,10,.14); }
html, body { margin:0; min-height:100%; }
body { color:var(--ink); background:radial-gradient(ellipse at 8% 0%,rgba(160,75,67,.14),transparent 38%),linear-gradient(145deg,#fffdf9,var(--ivory)); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.topbar { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px clamp(14px,4vw,52px);background:rgba(255,253,248,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(14px); }
.brand { display:flex;align-items:center;gap:12px;min-width:0; }
.brand-mark { display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:16px;color:#fff8ee;background:linear-gradient(145deg,#7b171b,var(--wine-dark));font-weight:900;letter-spacing:-.07em;box-shadow:0 8px 20px #59070a24; }
.eyebrow { margin:0 0 6px;color:var(--wine);font-size:10px;font-weight:850;letter-spacing:.19em; }
.brand-title { font-size:15px;font-weight:750; }
.open-direct { padding:11px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--wine);font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap; }
.open-direct:hover { background:#fff4f0; }
.main { width:min(1600px,100%);margin:0 auto;padding:26px clamp(12px,3vw,38px) 18px; }
.heading { display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:0 0 18px; }
h1 { margin:0;font-size:clamp(23px,3vw,34px);letter-spacing:-.045em; }
.intro-copy { max-width:750px;margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.6; }
.status { display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#fff9;white-space:nowrap;color:#655457;font-size:12px;font-weight:700; }
.status span,.live-dot { width:8px;height:8px;border-radius:50%;background:#3b8c65;display:inline-block; }
.frame-card { overflow:hidden;border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:0 18px 50px rgba(55,18,20,.09); }
.frame-toolbar { display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 15px;border-bottom:1px solid var(--line);background:#fffdfa;color:var(--muted);font-size:12px;font-weight:650; }
.frame-toolbar a { margin-left:auto;color:var(--wine);text-decoration:none;font-weight:750; }
iframe { display:block;width:100%;height:calc(100dvh - 185px);min-height:620px;border:0;background:#fff; }
.notice { margin-top:15px;padding:15px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.68);font-size:13px;line-height:1.55; }
.notice strong { color:var(--wine); }
.notice p { margin:5px 0 0;color:var(--muted); }
footer { padding:15px 20px 22px;text-align:center;color:var(--muted);font-size:11px;letter-spacing:.08em; }
@media (max-width:650px) {
  .topbar { padding:12px; }
  .brand-mark { width:42px;height:42px;flex-basis:42px;border-radius:14px; }
  .eyebrow { font-size:9px; }
  .brand-title { font-size:13px; }
  .open-direct { padding:10px 11px;font-size:12px; }
  .main { padding:20px 10px 12px; }
  .heading { display:block; }
  .status { margin-top:13px; }
  .frame-card { border-radius:18px; }
  iframe { height:calc(100dvh - 245px);min-height:540px; }
}