.record-demo{max-width:1020px;margin:0 auto 64px;padding:0 40px;scroll-margin-top:24px}
.record-demo h2{margin-bottom:10px}
.record-demo>p{color:var(--muted);max-width:650px}
.record-examples{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.record-demo button{font:inherit;cursor:pointer}
.record-examples button,.record-clear{color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:9px;min-height:44px;padding:9px 13px;font-size:14px;transition:border-color .15s ease,background .15s ease}
.record-examples button:hover,.record-clear:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.record-inputs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.record-inputs label{font-size:15px;font-weight:600;display:grid;gap:8px;min-width:0}
.record-inputs textarea{display:block;width:100%;resize:vertical;min-height:142px;max-height:450px;border:1px solid var(--line);border-radius:10px;padding:14px;background:color-mix(in srgb,var(--ink) 3%,var(--canvas));color:var(--ink);font:16px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}
.record-inputs textarea[aria-invalid=true]{border-color:#ffb79d}
.record-demo :is(button,input,textarea,summary):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.record-controls{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.record-demo .record-check{color:var(--canvas);font-size:15px;justify-content:center;min-width:170px}
.record-demo .record-check:hover{color:var(--canvas)}
.record-result{border-left:3px solid var(--accent);padding:18px 0 18px 24px;margin-top:28px;overflow-wrap:anywhere}
.record-result h3{font-size:23px;font-weight:620;line-height:1.3;letter-spacing:-.4px;margin:0 0 9px}
.record-result p{font-size:15px;margin:0 0 12px;color:var(--muted)}
.record-result .record-totals{font-size:13px}
.record-differences{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.record-differences h4{font-size:15px;margin:8px 0}
.record-differences ul{list-style:none;margin:0;padding:0}
.record-differences li{font-size:15px;line-height:1.6;margin:4px 0}
.record-differences code{white-space:pre-wrap;overflow-wrap:anywhere}
.record-rules{margin-top:22px;font-size:14px;color:var(--muted)}
.record-rules summary{cursor:pointer;min-height:44px;padding-block:10px;color:var(--ink)}
.record-rules label{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ink)}
.record-rules input{width:20px;height:20px;accent-color:var(--accent)}
.record-rules p{margin:10px 0}
.record-error{color:#ffb79d;font-size:15px}
.record-demo .quiet{margin-top:16px;line-height:1.6}
.record-demo [hidden]{display:none}
@media(max-width:560px){.record-demo{padding:0 22px;margin-bottom:44px}.record-inputs{grid-template-columns:1fr;gap:16px}.record-inputs textarea{min-height:120px}.record-examples{gap:7px}.record-examples button{font-size:13px;padding-inline:10px}.record-result{padding-left:16px}.record-differences{grid-template-columns:1fr}.record-demo .record-check{flex:1}.record-demo h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){.record-demo button{transition:none}}
@media print{.record-examples,.record-controls,.record-rules{display:none}.record-demo{padding:0;margin-bottom:25px}.record-inputs textarea{max-height:none;border-color:#bbb;color:#000;background:#fff}.record-result{break-inside:avoid}}