/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 */
@import url("../tokens.css?v=20261006-round-6");
html,body{overflow-x:clip}body{background:var(--color-paper);background-image:none;font-family:var(--font-body);color:var(--color-ink)}
#gate{width:min(1080px,100%);margin:auto;padding:48px 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:72px;align-items:center}
.monitor-kicker{color:var(--color-forest);font-size:14px;margin:0 0 16px}.monitor-welcome h2{font-family:var(--font-display);font-weight:900;font-size:48px;line-height:1.35;color:var(--color-forest);margin:0 0 20px}.monitor-welcome>p:not(.monitor-kicker){color:var(--color-ink-2);line-height:1.8;font-size:17px}.monitor-helpers{display:flex;gap:12px;margin:22px 0 8px}.monitor-helpers .character{width:46%;max-width:190px;height:auto}.monitor-features{display:flex;gap:10px;flex-wrap:wrap}.monitor-features span{color:var(--color-forest);background:var(--color-mint);padding:7px 12px;border-radius:12px;font-size:13px}
.card{width:100%;padding:32px 30px;border-radius:28px;border:1px solid var(--color-rule);border-top:4px solid var(--color-forest);background:var(--color-surface);box-shadow:0 12px 32px var(--color-shadow)}.card h1{font-family:var(--font-display);font-weight:900;font-size:26px;color:var(--color-forest);line-height:1.5}.eyebrow{font-family:var(--font-body);letter-spacing:0;font-size:12px;color:var(--color-muted)}.access-label{display:block;text-align:left;font-size:14px;font-weight:600;color:var(--color-forest);margin:18px 0 8px}.card input{border-radius:14px;background:var(--color-paper);border-color:var(--color-rule);letter-spacing:0;min-height:50px}.card button{border-radius:14px;background:var(--color-cta);color:var(--color-accent-ink);min-height:48px}.card button:hover{background:var(--color-cta-hover)}.card button:disabled{opacity:.55}.card input:focus{border-color:var(--color-forest)}:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.back{min-height:44px;display:inline-flex;align-items:center;color:var(--color-forest)}
#topbar{background:var(--color-surface);color:var(--color-forest);border-bottom:1px solid var(--color-rule);padding:12px 24px;gap:12px;flex-wrap:wrap}#topbar .brand .brand-logo{width:180px}#topbar .dot{background:var(--color-green);animation:none}#topbar .live{padding:6px 10px;border-radius:12px;background:var(--color-mint);opacity:1}#topbar button{color:var(--color-forest);background:var(--color-paper);border-color:var(--color-rule);border-radius:12px;min-height:44px}#topbar button:hover{background:var(--color-mint)}#frame{background:var(--color-paper)}
@media(max-width:767px){#gate{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 20px;max-width:460px}.monitor-welcome{text-align:center}.monitor-welcome h2{font-size:32px;margin-bottom:12px}.monitor-welcome h2 br{display:none}.monitor-welcome>p:not(.monitor-kicker){font-size:14px}.monitor-helpers{justify-content:center;margin:12px 0}.monitor-helpers .character{max-width:96px}.monitor-features{justify-content:center}.card{padding:26px 24px}.card h1{font-size:23px}#topbar{padding:10px 16px;gap:8px}#topbar .brand .brand-logo{width:152px}#topbar .actions{margin-left:auto}.monitor-kicker{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.character { display: block; stroke-width: 3.5; overflow: visible; }
.character-hero { width: 100%; max-width: 256px; height: auto; margin-inline: auto; }
.fill-forest { fill: var(--color-forest); }
.fill-terra { fill: var(--color-cta); }
.fill-gold { fill: var(--color-gold); }
.fill-paper { fill: var(--color-surface); }
.fill-mint { fill: var(--color-mint); }
.fill-blush { fill: var(--color-blush); }
.outline { stroke: var(--color-forest); stroke-width: 3.5; }
.limb, .shoe, .smile, .receipt-line, .signal-line { stroke: var(--color-forest); fill: none; }
.limb, .shoe { stroke-width: 4.5; }
.smile, .smile-light { stroke-width: 3.5; }
.smile-light, .soft-line { stroke: var(--color-paper); fill: none; }
.soft-line { opacity: .7; }
.receipt-line { stroke-width: 3; }
.route { stroke: var(--color-cta); stroke-width: 4; stroke-dasharray: 5 9; fill: none; }
.spark-line { stroke: var(--color-gold); stroke-width: 4; fill: none; }
.character-shadow { fill: var(--color-rule); opacity: .65; }