.dc-facade { --guide-accent:#60b9e9; }
.dc-guide-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:24px 0 0; padding:30px 32px; border:1px solid #cbd9e2; border-radius:16px 16px 0 0; background:linear-gradient(115deg,#f9fcff 10%,#ecf3f8 68%,#dceaf0); }
.dc-guide-intro .dc-guide-kicker { font-size:10px; font-weight:700; letter-spacing:2.2px; color:#40627b; margin-bottom:12px; }
.dc-guide-intro h2 { font-size:29px; letter-spacing:-.8px; line-height:1.4; }
.dc-guide-intro h2 span { display:block; font-size:18px; font-weight:400; letter-spacing:.5px; color:#587285; margin:5px 0 12px; }
.dc-guide-intro p { max-width:660px; margin:0; }
.dc-guide-intro-actions { display:flex; flex-direction:column; gap:9px; flex-shrink:0; }
.dc-guide-intro-actions #dc-guide-start { background:#173d56; color:#fff; border:1px solid #254e68; border-radius:24px; padding:12px 25px; box-shadow:0 8px 22px #254e6820; }
.dc-guide-intro-actions small { font-size:11px; color:#526b7c; text-align:center; }
.dc-guide-chapters { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid #ccdbe4; border-top:0; border-radius:0 0 12px 12px; padding:8px; gap:4px; background:#fff; }
.dc-guide-chapters button { display:flex; align-items:center; justify-content:center; gap:8px; border:0; color:#547082; background:transparent; padding:10px 6px; font-size:12px; }
.dc-guide-chapters button span { font-size:10px; font-variant-numeric:tabular-nums; opacity:.8; }
.dc-guide-chapters button[aria-current="step"] { background:#183d56; color:#fff; box-shadow:0 4px 12px #183d5626; }
.dc-guide-chapters button[data-complete="true"] { color:#176b71; background:#f0f7f7; }
.dc-guide-announcement { min-height:25px; margin:9px 3px; font-size:12px!important; }
.dc-guide-stage { scroll-margin-top:14px; min-width:0; }
.dc-guide-map,.dc-guide-watermark { display:none; }
[data-guided="true"] .dc-guide-stage { display:block; border:1px solid #bacbd6; border-radius:15px; overflow:hidden; box-shadow:0 14px 40px #18374c14; }
[data-scene-controls="true"] .dc-viewer { height:min(720px,calc(100svh - 36px)); min-height:520px; background:#dce5eb; }
[data-guided="true"] :is(.dc-trip,.dc-view-label,.dc-component-tag,.dc-actions,.dc-view-tools,.dc-route,.dc-enter,.di-tools) { display:none!important; }
[data-guided="true"] .dc-guide-map { display:flex; align-items:center; justify-content:center; gap:8px; position:absolute; top:18px; right:18px; padding:8px 12px; border:1px solid #ffffffd9; border-radius:10px; background:#f9fcffe8; pointer-events:none; }
.dc-guide-map span { padding:5px 10px; border-radius:6px; font-size:12px; color:#647889; }
.dc-guide-map span[data-current="true"] { background:#1c4c66; color:#fff; }
.dc-guide-map i { color:#5c8196; font-style:normal; font-size:11px; }
.dc-guide-map p { flex-basis:100%; text-align:center; margin:2px 0 0; font-size:11px; }
[data-guided="true"] .dc-guide-watermark { display:flex; align-items:center; gap:10px; position:absolute; left:22px; top:22px; padding:8px 12px; border-radius:20px; font:600 11px ui-monospace,monospace; letter-spacing:.6px; color:#315b70; background:#f8fcffed; pointer-events:none; }
.dc-guide-watermark span { font:11px -apple-system,sans-serif; color:#526d80; }
.dc-guide-card { display:flex; flex-direction:column; background:linear-gradient(150deg,#162b3c,#101d2b 75%); color:#f3f8fc; padding:24px; min-width:0; }
.dc-guide-card-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font:10px ui-monospace,monospace; letter-spacing:.7px; color:#b6c9d6; }
.dc-guide-live { color:var(--guide-accent); border:1px solid #627986; padding:4px 6px; border-radius:4px; }
.dc-guide-card .dc-guide-place { color:var(--guide-accent); font-size:12px; margin:26px 0 8px; }
.dc-guide-card h2 { font-size:22px; font-weight:600; letter-spacing:.2px; line-height:1.55; color:#f4f9fd; margin:0; }
.dc-guide-diagram { background:#ffffff06; border:1px solid #4e667655; border-radius:9px; padding:6px 8px 12px; margin:20px 0; }
.dc-guide-diagram svg { width:100%; display:block; overflow:visible; }
.dc-guide-diagram path { stroke:#647f90; fill:none; stroke-width:1.2; stroke-dasharray:3 4; }
.dc-guide-diagram circle { fill:#152c3e; stroke:var(--guide-accent); stroke-width:1.5; }
.dc-guide-diagram #dc-guide-packet { fill:var(--guide-accent); stroke:#fff; }
.dc-guide-diagram>div { display:flex; justify-content:space-between; gap:4px; color:#d0e1ec; font-size:11px; text-align:center; }
.dc-guide-diagram span { flex:1; }
.dc-guide-explain { margin:0; }
.dc-guide-explain>div { margin-bottom:17px; }
.dc-guide-explain dt { font-size:10px; color:#9cb5c7; letter-spacing:1.5px; margin-bottom:5px; }
.dc-guide-explain dd { font-size:13px; line-height:1.85; margin:0; color:#e3edf5; }
.dc-guide-next-card { border-left:2px solid var(--guide-accent); padding-left:12px; }
.dc-guide-card .dc-guide-note { color:#adbfcc; font-size:11px; line-height:1.8; margin:0 0 20px; }
.dc-guide-stream { border:1px solid #315e5c; border-radius:8px; background:#20474250; padding:12px; margin:0 0 14px; }
.dc-guide-stream>span { color:#8bd4c0; font-size:10px; }
.dc-guide-stream p { color:#daf5ec; font-size:12px; min-height:40px; margin:8px 0 0; }
.dc-guide-playback { margin-top:auto; }
.dc-guide-progress { height:2px; background:#3a5164; margin-bottom:16px; overflow:hidden; }
.dc-guide-progress span { display:block; height:100%; background:var(--guide-accent); transform:scaleX(0); transform-origin:left; }
.dc-guide-playback>div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dc-guide-card button { background:#20394c; border:1px solid #4b6374; color:#dcecf7; font-size:12px; border-radius:7px; padding:8px; }
.dc-guide-card button:hover:enabled { background:#2c4e64; }
.dc-guide-card #dc-guide-play { background:#e8f4fb; border-color:#e8f4fb; color:#123047; }
.dc-guide-card #dc-guide-play[aria-pressed="true"] { background:#dbedf8; color:#123047; }
.dc-guide-more { margin-top:18px; border-top:1px solid #354c5d; padding-top:10px; }
.dc-guide-more summary { cursor:pointer; font-size:11px; color:#b1c9db; min-height:44px; align-content:center; }
.dc-guide-more>div { display:flex; flex-wrap:wrap; gap:6px; }
.dc-guide-card :focus-visible { outline-color:#a2dbf8!important; }
.dc-guide-details { background:#162b3c; color:#e8f4fb; }
.dc-guide-details>summary { padding:16px 24px; cursor:pointer; min-height:48px; }
.dc-guide-details .dc-guide-card { max-width:960px; margin:auto; }
.dc-scene-control { position:absolute; z-index:4; left:20px; right:20px; bottom:18px; border:1px solid #537489; border-radius:14px; padding:18px 24px 12px; color:#f6fbff; background:linear-gradient(125deg,#142b3cf7,#0c1d2af5); box-shadow:0 14px 40px #05142140; }
.dc-scene-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
#dc-scene-state { color:#9ed5f1; font-size:12px; letter-spacing:.4px; }
.dc-scene-control h2 { color:#f6fbff; font-size:24px; line-height:1.4; margin:0; }
.dc-scene-control>p { color:#bdd1de; font-size:13px; margin:6px 0 13px; line-height:1.6; }
.dc-scene-control button { min-height:44px; border:1px solid #607f94; border-radius:8px; padding:10px 16px; background:#234359; color:#eef8ff; font:inherit; font-size:13px; cursor:pointer; }
.dc-scene-control button:hover:enabled { background:#335c77; border-color:#a1d7f4; }
.dc-scene-control button:disabled { opacity:.5; cursor:default; }
.dc-scene-control button:focus-visible,.dc-scene-pin:focus-visible { outline:3px solid #f5cf7d; outline-offset:3px; }
.dc-device-choices { display:flex; gap:12px; }
.dc-device-choices button { flex:1; text-align:left; background:#e4f4ff; color:#12354d; font-size:17px; font-weight:600; padding:15px 20px; }
.dc-device-choices button span { font:11px ui-monospace,monospace; margin-right:10px; opacity:.65; }
.dc-device-choices button:hover:enabled { background:#fff; color:#12354d; }
.dc-scene-actions { display:flex; flex-wrap:wrap; gap:8px; }
#dc-scene-next { background:#bfe8ff; border-color:#cfeeff; color:#103249; font-weight:650; }
#dc-scene-next:hover:enabled { background:#e9f7ff; }
.dc-scene-footer { display:flex; justify-content:space-between; gap:8px; margin-top:4px; }
.dc-scene-heading button,.dc-scene-footer button { border:0; background:transparent; padding:6px 0; font-size:12px; color:#bed5e5; }
.dc-request-compose { border-left:2px solid #7bc2e6; padding:2px 12px; margin:0 0 12px; }
.dc-request-compose>span,.dc-request-compose small { font-size:11px; color:#aac5d7; }
.dc-request-compose p { color:#fff; margin:4px 0; font-size:14px; }
.dc-request-compose>span { display:none; }
.dc-scene-pin { position:absolute; z-index:3; max-width:calc(100% - 24px); min-height:44px; padding:10px 14px; border:2px solid #cfac55; border-radius:9px; background:#fff8e9; box-shadow:0 0 0 5px #f1c96628,0 6px 18px #112b4150; color:#51390b; font-size:12px; font-weight:600; cursor:pointer; }
.dc-scene-pin::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#ad7717; margin-right:8px; }
[data-scene-controls="true"] .dc-route { display:none; }
[data-scene-controls="true"] .dc-view-tools { top:112px; left:20px; bottom:auto; transform:none; }
[data-scene-controls="true"] .dc-enter { top:88px!important; right:20px; left:auto!important; transform:none; }
[data-scene-controls="true"] .dc-guide-map p { display:none; }
.dc-explore-tools>summary { cursor:pointer; color:#526b7c; padding:12px 4px; min-height:44px; font-size:12px; }
[data-guided="true"] .dc-explore-tools { display:none; }
@media (max-width:1100px) { [data-guided="true"] .dc-guide-stage { grid-template-columns:minmax(0,1fr) 310px; } .dc-guide-card { padding:20px; } }
@media (max-width:850px) {
  .dc-guide-intro { padding:22px; align-items:flex-start; }
  .dc-guide-intro h2 { font-size:24px; }
  [data-guided="true"] .dc-guide-stage { grid-template-columns:1fr; }
  .dc-guide-card { padding:24px; }
  .dc-guide-card .dc-guide-place { margin-top:17px; }
  .dc-guide-chapters { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:540px) {
  .dc-guide-intro { flex-direction:column; gap:18px; }
  .dc-guide-intro-actions { width:100%; }
  [data-scene-controls="true"] .dc-viewer { height:calc(100svh - 24px); min-height:600px; }
  [data-guided="true"] .dc-guide-map { left:10px; right:10px; top:48px; bottom:auto; padding:4px; gap:4px; }
  .dc-scene-control { left:10px; right:10px; bottom:10px; padding:13px 14px 8px; }
  .dc-scene-control h2 { font-size:19px; }
  .dc-scene-control>p { font-size:12px; margin-bottom:9px; }
  .dc-device-choices { flex-direction:column; gap:8px; }
  .dc-device-choices button { padding:10px 14px; font-size:15px; }
  .dc-scene-actions #dc-scene-next { order:-1; width:100%; }
  .dc-scene-actions button { flex:1; padding:8px; font-size:12px; }
  .dc-scene-heading { gap:8px; }
  #dc-scene-state { font-size:11px; }
  [data-scene-controls="true"] .dc-view-tools { top:156px; left:10px; right:10px; }
  [data-scene-controls="true"] .dc-enter { top:205px!important; right:10px; }
  .dc-guide-map span { padding:4px 8px; }
  [data-guided="true"] .dc-guide-watermark { left:10px; top:12px; font-size:10px; }
  .dc-guide-watermark span { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { .dc-guide-card,.dc-guide-progress span { animation:none!important; transition:none!important; } }