.page-cloning .header-inner { height:70px; }
.page-cloning main { max-width:1600px; margin:auto; padding:28px; }
.bc-demo { --bc-ink:#213335; --bc-muted:#768583; --bc-line:#d6ded9; --bc-accent:#267565; border:1px solid #c9d4ce; color:var(--bc-ink); background:#f4f6f2; font-family:var(--sans); }
.bc-demo button,.bc-demo select { font:inherit; cursor:pointer; }
.bc-demo button:focus-visible,.bc-demo select:focus-visible { outline:2px solid #267565; outline-offset:3px; }
.bc-header { padding:24px 28px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--bc-line); gap:18px; }
.bc-kicker { font:500 9px var(--sans); letter-spacing:1.6px; color:#667b73; }
.bc-header h1 { font:500 30px/1.2 var(--sans); letter-spacing:-1px; margin:7px 0; }
.bc-header p { font-size:12px; color:#6a7d76; margin:0; }
.bc-header>a { font-size:11px; white-space:nowrap; }
.bc-workspace { display:grid; grid-template-columns:minmax(0,1fr) 260px; }
.bc-viewport { position:relative; min-height:570px; height:clamp(570px,72vh,850px); overflow:hidden; background:#d8e0db; }
#bc-canvas { width:100%; height:100%; position:absolute; display:block; inset:0; cursor:grab; touch-action:none; }
#bc-canvas:active { cursor:grabbing; }
.bc-loading { position:absolute; inset:0; display:grid; place-content:center; background:#d8e0db; z-index:5; color:#54776c; font-size:12px; }
.bc-viewbar { position:absolute; top:18px; right:18px; display:flex; background:#f6f8f0e8; border:1px solid #a7bab1; border-radius:5px; padding:3px; gap:2px; }
.bc-viewbar button { background:none; color:#4f6760; padding:7px 12px; border-radius:3px; font-size:10px; }
.bc-viewbar button[aria-pressed=true] { background:#2b4a42; color:white; }
.bc-floor-label { position:absolute; top:29px; left:22px; display:flex; align-items:center; gap:8px; font:500 9px var(--sans); letter-spacing:1px; color:#3a5a4d; pointer-events:none;  background:#f4f7eee6; }
.bc-live-dot { width:6px; height:6px; border-radius:50%; background:#328468; box-shadow:0 0 0 3px #32846819; }
.bc-canvas-hint { position:absolute; bottom:19px; left:22px; font-size:8px; letter-spacing:1px; color:#516e62; pointer-events:none; }
.bc-station-label { position:absolute; pointer-events:none; bottom:38px; left:22px; background:#203e34e6; color:white; padding:8px 11px; border-radius:3px; font-size:10px; }
.bc-inspector { padding:24px 20px; border-left:1px solid var(--bc-line); background:#f4f6f2; }
.bc-stat-row { display:flex; gap:28px; padding-bottom:24px; border-bottom:1px solid var(--bc-line); margin-bottom:25px; }
.bc-stat-row b { font:400 28px var(--sans); letter-spacing:-1px; display:block; }.bc-stat-row span { display:block; font-size:9px; color:var(--bc-muted); margin-top:4px; }
.bc-selection-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:9px; letter-spacing:.7px; color:var(--bc-muted); }
.bc-status { color:#267565; font-size:9px; letter-spacing:0; }
.bc-inspector h2 { font:500 20px/1.3 var(--sans); letter-spacing:-.5px; margin:12px 0 8px; }.bc-inspector>p { font-size:11px; line-height:1.8; color:#667c70; min-height:40px; }
.bc-progress { height:3px; margin:21px 0; background:#dde4dc; overflow:hidden; }.bc-progress i { display:block; height:100%; background:#4c8b70; width:0; }
.bc-station-nav { display:flex; gap:5px; }.bc-station-nav button { border:1px solid #c9d5cc; color:#3a6452; padding:9px; background:transparent; border-radius:3px; font-size:12px; }#bc-focus { flex:1; font-size:10px; background:#e8eee5; }
.bc-task-select { display:block; margin:28px 0; font-size:8px; letter-spacing:1px; color:#78877a; }.bc-task-select select { display:block; width:100%; margin-top:10px; font-size:11px; border:1px solid #c9d5cc; padding:11px 8px; background:#f4f6f2; color:#345346; border-radius:3px; }
.bc-map-heading { display:flex; justify-content:space-between; font-size:8px; letter-spacing:.8px; color:#7d8d82; margin:24px 0 12px; }
.bc-station-map { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; }.bc-station-map button { aspect-ratio:1; background:var(--station-color); opacity:.52; border-radius:2px; border:2px solid transparent; padding:0; display:grid; place-items:center; }.bc-station-map button span { font-size:7px; color:#15342a; }.bc-station-map button:hover { opacity:.85; }.bc-station-map button[aria-pressed=true] { opacity:1; outline:2px solid #244d3b; outline-offset:1px; }
.bc-inspector .bc-inspector-note { font-size:9px; margin-top:18px; min-height:0; color:#8b978e; }
.bc-controls { padding:14px 22px; display:flex; align-items:center; gap:18px; border-top:1px solid var(--bc-line); background:#edf1ea; font-size:10px; }.bc-controls button { color:#31543f; background:none; }#bc-play { background:#2b5948; color:white; border-radius:3px; padding:10px 15px; min-width:90px; }#bc-play span { margin-left:7px; }.bc-playback-label { font-size:8px; letter-spacing:1px; color:#8b998b; }.bc-controls label { display:flex; gap:12px; align-items:center; margin-left:auto; color:#71836f; }.bc-controls select { background:none; border:1px solid #bbcbbd; padding:6px 8px; color:#365b43; border-radius:3px; }.bc-time { font-family:ui-monospace,monospace; color:#527454; }
.bc-caption { margin:0; padding:12px 22px; border-top:1px solid var(--bc-line); font-size:9px; color:#7e8e7b; }
.bc-experiment { display:grid; grid-template-columns:1fr 1.4fr; align-items:center; gap:70px; padding:68px 24px 38px; }.bc-experiment h2 { font:500 30px var(--sans); letter-spacing:-1px; margin:14px 0 22px; }.bc-experiment p { font-size:14px; color:#6b7166; line-height:1.8; margin:10px 0; }.bc-experiment a { display:inline-block; font-size:11px; margin-top:24px; color:#446f5b; border-bottom:1px solid #a3b1a4; padding-bottom:5px; }.bc-experiment figure { margin:0; }.bc-experiment video { width:100%; display:block; border-radius:3px; background:#1c2523; }.bc-experiment figcaption { font-size:9px; margin-top:12px; color:#848c7d; }
.bc-feature { margin:30px 0 50px; display:grid; grid-template-columns:1.3fr 1fr; background:#e7ede4; border:1px solid #ced9cc; }.bc-feature-image { min-height:310px; position:relative; overflow:hidden; display:block; }.bc-feature-image img { width:100%; height:100%; object-fit:cover; position:absolute; }.bc-feature-image>span { position:absolute; bottom:18px; left:20px; background:#264637eb; color:#f0f5e9; padding:8px 11px; font-size:9px; letter-spacing:1px; }.bc-feature>div { padding:35px; align-self:center; }.bc-feature h2 { font:500 26px/1.25 var(--sans); letter-spacing:-.7px; margin:14px 0; }.bc-feature p { font-size:12px; color:#687a69; line-height:1.9; }.bc-feature-link { display:flex; justify-content:space-between; gap:10px; border-top:1px solid #bcccba; padding-top:20px; margin-top:28px; font-size:11px; color:#3f694b; }
@media(max-width:1000px) { .bc-workspace { grid-template-columns:minmax(0,1fr) 230px; }.bc-inspector { padding:22px 15px; }.bc-floor-label { top:72px; font-size:8px;  color:#3a5a4d;  background:#f4f7eee6; }.bc-experiment { gap:35px; } }
@media(max-width:760px) { .page-cloning main { padding:12px; }.bc-header { padding:20px; }.bc-header h1 { font-size:25px; }.bc-header p { font-size:10px;  color:#6a7d76; }.bc-workspace { display:flex; flex-direction:column; }.bc-viewport { min-height:440px; height:58vh; max-height:600px; }.bc-floor-label { top:26px; left:15px; font-size:7px; letter-spacing:.4px;  color:#3a5a4d;  background:#f4f7eee6; }.bc-viewbar { right:12px; top:15px;  border:1px solid #a7bab1; }.bc-viewbar button { padding:7px 9px; font-size:9px;  color:#4f6760; }.bc-inspector { display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; border-left:0; border-top:1px solid var(--bc-line); padding:22px; }.bc-stat-row { display:none; }.bc-selection-heading { grid-column:1; grid-row:1; }.bc-inspector h2 { grid-column:1; grid-row:2; margin:0; font-size:17px; }.bc-inspector>p:not(.bc-inspector-note) { grid-column:1; grid-row:3; margin:0; font-size:10px; }.bc-progress { grid-column:1; grid-row:4; margin:0; }.bc-station-nav { grid-column:1/-1; grid-row:6; }.bc-task-select { grid-column:1/-1; grid-row:7; margin:5px 0 0;  color:#78877a; }.bc-map-heading { grid-column:2; grid-row:1; margin:0; font-size:7px;  color:#7d8d82; }.bc-station-map { grid-column:2; grid-row:2/5; align-self:start; gap:4px; }.bc-station-map button span { font-size:6px;  color:#15342a; }.bc-inspector .bc-inspector-note { grid-column:1/-1; grid-row:8; margin:0;  color:#8b978e; }.bc-playback-label { display:none;  color:#8b998b; }.bc-controls { padding:14px 18px; gap:15px;  background:#edf1ea; }.bc-controls label { font-size:9px; gap:7px;  color:#71836f; }.bc-caption { font-size:8px; line-height:1.7;  color:#7e8e7b; }.bc-experiment { grid-template-columns:1fr; gap:28px; padding:40px 10px 20px; }.bc-experiment h2 { font-size:26px; }.bc-feature { grid-template-columns:1fr; }.bc-feature-image { min-height:250px; }.bc-feature>div { padding:27px; } }
@media(max-width:400px) { .bc-floor-label { top:65px;  color:#3a5a4d;  background:#f4f7eee6; }.bc-inspector { gap:12px 15px; padding:18px 14px; }.bc-station-map { gap:3px; }.bc-station-map button span { display:none;  color:#15342a; }.bc-header { padding:18px 15px; }.bc-canvas-hint { font-size:6px; left:15px;  color:#516e62; } }
@media(prefers-reduced-motion:reduce) { .bc-live-dot { box-shadow:none;  background:#328468; } }

.bc-scrubber { display:block; margin:20px 0; font-size:8px; letter-spacing:1px; color:#78877a; }
.bc-scrubber input { display:block; width:100%; margin:9px 0 6px; accent-color:#397c66; cursor:ew-resize; height:14px; }
.bc-scrubber span { font-size:8px; letter-spacing:0; color:#85958a; }
.bc-scrubber input:focus-visible { outline:2px solid #267565; outline-offset:3px; }
@media(max-width:760px) { .bc-scrubber { grid-column:1; grid-row:4; margin:0;  color:#78877a; }.bc-floor-label { top:65px;  color:#3a5a4d;  background:#f4f7eee6; } }
.bc-floor-label { background:#f4f7eee6; padding:7px 9px; border-radius:3px;  color:#3a5a4d; }