/* Recording illustrations and responsive layouts. No script or capture permission needed. */
.recording-section { scroll-margin-top: 90px; }
.recording-split { display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.3fr); gap:clamp(28px,5vw,72px); align-items:center; margin-top:36px; }
.recording-copy p { color:var(--fg-dim, #b9b5ad); font-size:clamp(15px,1.45vw,20px); line-height:1.8; margin:0 0 26px; }
.recording-copy .recording-release, .recording-release { font-size:11px; letter-spacing:.15em; color:#ffd49b; }
.recording-link { display:inline-flex; align-items:center; gap:12px; color:#ffd49b; border:1px solid #ffb454; border-radius:8px; padding:16px 22px; text-decoration:none; font-size:14px; line-height:1.5; }
.recording-link:hover { color:#fff; background:#ffb45412; }
.recording-link:focus-visible { outline:3px solid #f2ede4; outline-offset:5px; }
.recording-figure { margin:0; min-width:0; }
.recording-figure figcaption { margin-top:12px; font:11px/1.7 var(--mono); color:#b9b5ad; }
.recording-stage { position:relative; aspect-ratio:1.12; border:1px solid #f2ede425; border-radius:15px; background:radial-gradient(ellipse at 90% 18%,#63452270,transparent 55%),linear-gradient(145deg,#17343b,#091215 70%); overflow:hidden; padding:8%; }
.rec-demo-window { position:relative; margin:0 0 0 4%; width:92%; height:73%; background:#101b20; border:1px solid #a2b4bc40; border-radius:9px; box-shadow:0 20px 40px #0006; }
.rec-demo-title { height:34px; display:flex; gap:22px; align-items:center; padding:0 12px; background:#1b2429; color:#c5c9ca; font:10px/1.2 var(--mono); border-radius:9px 9px 0 0; }
.rec-dots { color:#bd6957; letter-spacing:2px; white-space:nowrap; font-size:8px; }
.rec-demo-content { padding:9%; }
.rec-demo-label { display:block; font:8px/1.8 var(--mono); letter-spacing:.14em; color:#ffb454; }
.rec-demo-content strong { display:block; font:clamp(14px,2vw,28px)/1.25 var(--display); color:#e5e8e5; margin:8px 0 18px; }
.rec-demo-lines i { display:block; height:6px; width:95%; margin:8px 0; border-radius:2px; background:#82969935; }
.rec-demo-lines i:nth-child(2) { width:75%; }
.rec-demo-lines i:nth-child(3) { width:85%; }
.rec-demo-blocks { display:flex; gap:10px; margin-top:24px; }
.rec-demo-blocks i { width:30%; height:40px; border-radius:4px; background:linear-gradient(135deg,#50656b70,#38413550); }
.rec-selection { position:absolute; inset:5% 6% 28% 9%; border:2px solid #fc665e; background:#fb665805; }
.rec-selection i,.capture-bound i { position:absolute; width:7px; height:7px; background:#fff; border:1px solid #f06b5e; }
.rec-selection i:nth-child(1),.capture-bound i:nth-child(1) { top:-4px; left:-4px; }
.rec-selection i:nth-child(2),.capture-bound i:nth-child(2) { top:-4px; right:-4px; }
.rec-selection i:nth-child(3),.capture-bound i:nth-child(3) { bottom:-4px; left:-4px; }
.rec-selection i:nth-child(4),.capture-bound i:nth-child(4) { bottom:-4px; right:-4px; }
.rec-controls { color:#e9e9e5; background:linear-gradient(#282b2c,#202425); border:1px solid #9aa1a344; border-radius:10px; box-shadow:0 14px 35px #0007; padding:16px; font-family:system-ui,sans-serif; }
.recording-stage > .rec-controls { position:absolute; bottom:7%; left:14%; right:7%; }
.rec-controls-title { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:14px; }
.rec-ready { font-size:9px; color:#c9d8c9; background:#45574350; border-radius:12px; padding:4px 7px; }
.rec-modes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.rec-mode { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; font-size:10px; background:#ffffff06; padding:10px 3px; border:1px solid #ffffff1a; border-radius:7px; }
.rec-mode svg { width:24px; height:24px; }
.rec-mode.rec-selected { color:#7dbaff; border-color:#569ee288; background:#3d71b323; }
.rec-control-row { display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #ffffff18; font-size:10px; }
.rec-control-row > span { padding:5px 8px; border-radius:4px; background:#ffffff14; }
.rec-control-row > .rec-record { margin-left:auto; background:#b83b2d; color:#fff; }
.recording-page .page-shell { width:min(1400px,calc(100% - 64px)); }
.recording-page .recording-overview { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:60px; margin:65px 0 42px; }
.recording-page h1 { font-size:clamp(40px,5vw,68px); line-height:1.08; }
.recording-page .recording-overview p { color:var(--dim); max-width:62ch; }
.recording-page .recording-overview .kicker { color:var(--amber); }
.recording-page .recording-overview > .rec-controls { max-width:490px; width:100%; justify-self:end; padding:24px; }
.recording-page .recording-overview .rec-mode { font-size:13px; padding:18px 6px; }
.recording-page .recording-overview .rec-mode svg { width:30px; height:30px; }
.capture-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:32px 0 75px; }
.capture-card { display:flex; flex-direction:column; min-width:0; padding:25px 24px; border:1px solid #f2ede425; border-radius:12px; background:linear-gradient(145deg,#ffb45409,transparent 65%); }
.capture-card .capture-label { color:var(--amber); font-size:12px; letter-spacing:.22em; }
.capture-card h2 { font:clamp(21px,2vw,29px)/1.15 var(--display); margin:14px 0 16px; }
.capture-card p { color:var(--dim); font-size:14px; line-height:1.65; min-height:70px; }
.capture-art { margin-top:auto; flex-shrink:0; height:170px; padding:12px 4px; }
.capture-desktop { position:relative; height:100%; border:1px solid #516569; border-radius:8px; background:linear-gradient(155deg,#354f59,#0a171c 70%); }
.capture-window { position:absolute; border:1px solid #647175; border-radius:5px; background:#172429; padding:25px 12px 10px; }
.capture-window::before { content:'● ● ●'; position:absolute; left:10px; top:4px; font:8px/1.3 system-ui; letter-spacing:2px; color:#b6b19b; }
.capture-window-one { left:8%; top:15%; width:64%; height:60%; }
.capture-window-two { right:6%; bottom:10%; width:44%; height:48%; }
.capture-window i { display:block; height:4px; background:#81999645; width:90%; margin-bottom:7px; }
.capture-window i:nth-child(2) { width:60%; }
.capture-bound { display:none; position:absolute; inset:22% 12% 16% 25%; border:2px solid #f76a60; background:#f76a6015; }
.capture-mode-display .capture-desktop { border:2px solid #ffb454; }
.capture-mode-display .capture-window { opacity:.45; }
.capture-mode-window .capture-window-one { z-index:2; border:2px solid #ffb454; }
.capture-mode-window .capture-window-two { opacity:.4; }
.capture-mode-app .capture-window { border:2px solid #ffb454; }
.capture-mode-area .capture-bound { display:block; z-index:3; }
.recording-page .recording-note { font-size:13px; color:var(--dim); border-left:2px solid var(--amber); padding:12px 18px; margin:24px 0; }
.recording-page .recording-jump { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:13px; }
@media (max-width:1000px) {
 .recording-split { grid-template-columns:1fr 1.2fr; gap:28px; }
 .capture-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .capture-card p { min-height:46px; }
 .recording-page .recording-overview { gap:30px; }
 .recording-page .recording-overview > .rec-controls { padding:16px; }
 .recording-page .recording-overview .rec-mode { padding:12px 3px; font-size:11px; }
}
@media (max-width:700px) {
 .recording-split,.recording-page .recording-overview { grid-template-columns:1fr; gap:28px; }
 .recording-copy p { margin-bottom:18px; }
 .recording-page .page-shell { width:calc(100% - 36px); }
 .recording-page .recording-overview { margin-top:36px; }
 .recording-page .recording-overview > .rec-controls { max-width:none; }
 .rec-demo-content strong { font-size:22px; }
 .recording-stage { max-width:600px; }
 .recording-link { font-size:13px; padding:14px 17px; }
}
@media (max-width:460px) {
 .capture-grid { grid-template-columns:1fr; gap:18px; }
 .capture-card p { min-height:0; }
 .capture-art { height:185px; }
 .rec-ready { font-size:8px; }
 .rec-controls { padding:11px; }
 .recording-stage > .rec-controls { left:8%; right:5%; }
 .rec-control-row { font-size:9px; gap:5px; }
 .rec-control-row > span { padding:5px; }
}