/* Full first-screen composition; client colors and existing scene drawing stay scoped. */
#directions .ap-first-screen.dm-scene{position:relative;isolation:isolate;display:block;height:100%;min-height:0;padding:0;border-radius:18px;overflow:hidden;container-type:inline-size}
#directions .ap-first-screen .ap-screen-header{position:absolute;z-index:4;inset:0 0 auto;display:flex;align-items:center;gap:24px;height:70px;padding:0 34px;border:0;color:var(--dm-ink)}
#directions .ap-first-screen .ap-screen-brand{display:flex;flex-direction:column;gap:5px;white-space:nowrap;margin-right:auto}
.ap-screen-brand strong{font-size:15px;font-weight:650;letter-spacing:.07em}.ap-screen-brand small{font-size:6px;letter-spacing:.22em}
#directions .ap-first-screen .ap-screen-header nav{display:flex;gap:25px;align-items:center}.ap-screen-header nav button{font-size:11px;background:transparent;padding:10px 0;color:inherit}
#directions .ap-first-screen .dm-pause{position:static;width:30px;height:30px;flex:none;opacity:.9}
#directions .ap-first-screen .ap-screen-header-cta,#directions .ap-first-screen .ap-screen-primary{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:11px 20px;border-radius:30px;font-size:12px;background:#a6f5d8;color:#102a26}
#directions .ap-first-screen .ap-screen-header-cta svg,#directions .ap-first-screen .ap-screen-primary svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#directions .ap-first-screen .ap-screen-story{position:absolute;z-index:3;left:5%;top:99px;width:60%;pointer-events:none}#directions .ap-first-screen .ap-screen-story>*{pointer-events:auto}
#directions .ap-first-screen .ap-screen-title{font:450 clamp(45px,5.1cqw,68px)/1.035 Onest,Arial,sans-serif;letter-spacing:-.04em;margin:0 0 20px;max-width:100%;color:var(--dm-ink);text-wrap:initial}
#directions .ap-first-screen .ap-screen-lead{font:400 clamp(15px,1.55cqw,19px)/1.55 Onest,Arial,sans-serif;color:var(--dm-ink);margin:0 0 22px;max-width:43ch}
#directions .ap-first-screen .ap-screen-note{font-size:11px;line-height:1.6;color:var(--dm-hint);margin:25px 0 0;padding-left:12px;border-left:1px solid #a6f5d866}
#directions .ap-first-screen .dm-stage{position:absolute;right:-3%;bottom:62px;width:70%;height:420px;margin:0;aspect-ratio:auto;z-index:1;overflow:hidden}
#directions .ap-first-screen .dm-stage>.dm-svg{width:100%;height:100%}
#directions .ap-first-screen .ap-screen-services{position:absolute;left:3.5%;right:3.5%;bottom:0;height:66px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:11px 0 12px;border-top:1px solid #ffffff25;z-index:4;background:transparent}
#directions .ap-first-screen .ap-screen-services button{display:flex;align-items:center;gap:16px;padding:3px 8px;min-height:0;height:43px;border:0;border-radius:0;background:transparent;color:var(--dm-hint);position:relative;text-align:left;font-size:12px;line-height:1.3}
.ap-screen-services button>svg{width:25px;height:25px;flex:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.ap-screen-services button>span{display:grid;gap:4px}.ap-screen-services strong{font-weight:450;font-size:12px}.ap-screen-services small{font-size:10px;line-height:1.3}
#directions .ap-first-screen .ap-screen-services button[aria-pressed=true]{color:#d6fff0;background:transparent}
.ap-screen-services button>i{position:absolute;left:8px;right:8px;bottom:-2px;height:1px;background:currentColor;opacity:0;transform:scaleX(.5);transition:opacity .3s,transform .3s}
.ap-screen-services button[aria-pressed=true]>i{opacity:.7;transform:scaleX(1)}
#directions .ap-first-screen .dm-state{display:none}
#directions .ap-first-screen button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
#directions .ap-first-screen.ap-first-a{background:radial-gradient(ellipse at 70% 60%,#133446,#081923 75%);--dm-ink:#f1f6fa;--dm-hint:#bdcdd5}
.ap-first-a .dm-architecture{filter:drop-shadow(0 14px 12px #0004)}

/* B: paper/map composition. Existing registered route, nib and camera remain intact. */
#directions .ap-first-b{--dm-ink:#272720;--dm-hint:#656054;background:#f6f2e9}
#directions .ap-first-b .ap-screen-header{border-bottom:1px solid #27272019}
#directions .ap-first-b .ap-screen-header-cta,#directions .ap-first-b .ap-screen-primary{background:#97242c;color:#fff7e9}
#directions .ap-first-b .ap-screen-story{top:102px;width:43%}
#directions .ap-first-b .ap-screen-title{font-size:59px;font-weight:650;line-height:.97;letter-spacing:-.055em;margin-bottom:18px}
#directions .ap-first-b .ap-screen-lead{max-width:26ch;font-size:16px;line-height:1.45;margin-bottom:18px}
#directions .ap-first-b .ap-screen-note{display:none}
#directions .ap-first-b .dm-stage{width:64%;right:-1%;bottom:68px;height:343px;background:transparent;border:0;border-radius:0}
#directions .ap-first-b .ap-screen-services{border-color:#27272032;height:64px;gap:32px}
#directions .ap-first-b .ap-screen-services button{color:#656054;padding:0;gap:14px}
#directions .ap-first-b .ap-screen-services button[aria-pressed=true]{color:#97242c}
#directions .ap-first-b .ap-screen-services em{font:italic 24px Georgia,serif}
#directions .ap-first-b .ap-screen-services button>i{bottom:0}
/* C: high contrast graphic route with its own black action and large three. */
#directions .ap-first-c{--dm-ink:#11140b;--dm-hint:#354715;background:#c9f93d}
#directions .ap-first-c .ap-screen-brand strong{font-weight:800;letter-spacing:-.04em}
#directions .ap-first-c .ap-screen-header-cta,#directions .ap-first-c .ap-screen-primary{background:#11140b;color:#d2ff55}
#directions .ap-first-c .ap-screen-story{top:141px;width:56%}
#directions .ap-first-c .ap-screen-title{font-size:58px;font-weight:750;letter-spacing:-.055em;line-height:1.02}
#directions .ap-first-c .ap-screen-lead{font-size:17px;max-width:31ch}
#directions .ap-first-c .ap-screen-note{border-color:#11140b55;font-size:10px;margin-top:22px}
#directions .ap-first-c .dm-stage{right:-4%;bottom:58px;width:49%;height:412px;border-radius:0}
#directions .ap-first-c .ap-screen-services{border-color:#11140b40;height:60px;padding-block:8px}
#directions .ap-first-c .ap-screen-services button{color:#354715;padding-inline:14px}
#directions .ap-first-c .ap-screen-services button[aria-pressed=true]{background:#11140b;color:#d2ff55}
#directions .ap-first-c .ap-screen-services button>i{display:none}
/* D: quiet glass, light space and a coral next step. */
#directions .ap-first-d{--dm-ink:#242534;--dm-hint:#646779;background:radial-gradient(ellipse at 70% 70%,#d9ddec,#f7f7fc 70%);border-color:#ffffffa0}
#directions .ap-first-d .ap-screen-header-cta,#directions .ap-first-d .ap-screen-primary{background:#f07863;color:#281b19}
#directions .ap-first-d .ap-screen-story{top:126px;width:54%}
#directions .ap-first-d .ap-screen-title{font-size:62px;font-weight:450;letter-spacing:-.055em}
#directions .ap-first-d .ap-screen-lead{font-size:17px;max-width:29ch}
#directions .ap-first-d .ap-screen-note{border-color:#7b829d50;margin-top:22px}
#directions .ap-first-d .dm-stage{right:-6%;bottom:70px;width:61%;height:340px;background:transparent;border:0;overflow:hidden}
#directions .ap-first-d .dm-pane{padding:22px 18px}.ap-first-d .dm-pane>strong{font-size:25px}.ap-first-d .dm-browser-art{height:80px}
#directions .ap-first-d .ap-screen-services{border-color:#777e9b30;background:#ffffff30;height:66px}
#directions .ap-first-d .ap-screen-services button{color:#646779}
#directions .ap-first-d .ap-screen-services button[aria-pressed=true]{color:#9c3f2f}
/* E: metal on black, thin editorial type and the original magenta accent. */
#directions .ap-first-e{--dm-ink:#f1f0f3;--dm-hint:#b3b0b8;background:radial-gradient(ellipse at 72% 70%,#27272b,#08090a 70%)}
#directions .ap-first-e .ap-screen-header{border-bottom:1px solid #ffffff20}
#directions .ap-first-e .ap-screen-brand strong{font-weight:500;letter-spacing:.2em}
#directions .ap-first-e .ap-screen-header-cta,#directions .ap-first-e .ap-screen-primary{background:#ad155e;color:#fff}
#directions .ap-first-e .ap-screen-story{top:145px;width:61%}
#directions .ap-first-e .ap-screen-title{font-size:54px;font-weight:300;letter-spacing:-.045em}
#directions .ap-first-e .ap-screen-lead{font-size:17px;max-width:26ch;line-height:1.45}
#directions .ap-first-e .ap-screen-note{display:none}
#directions .ap-first-e .dm-stage{right:-8%;bottom:68px;width:60%;height:391px;background:transparent}
#directions .ap-first-e .ap-screen-services{height:66px;border-color:#ffffff30}
#directions .ap-first-e .ap-screen-services button{color:#b3b0b8}
#directions .ap-first-e .ap-screen-services button[aria-pressed=true]{color:#ff87bf}
/* F: poster-like headline, three full columns and live paper objects. */
#directions .ap-first-f{--dm-ink:#111207;--dm-hint:#4d4b1a;background:#ffe432}
#directions .ap-first-f .ap-screen-brand strong{font-weight:800;letter-spacing:-.05em}
#directions .ap-first-f .ap-screen-header-cta{background:#111207;color:#ffe432}
#directions .ap-first-f .ap-screen-story{top:78px;left:4%;width:92%;pointer-events:none}
#directions .ap-first-f .ap-screen-title{font-size:77px;font-weight:800;line-height:.93;letter-spacing:-.065em;margin-bottom:15px}
#directions .ap-first-f .ap-screen-lead{font-size:17px;line-height:1.4;max-width:none}
#directions .ap-first-f .ap-screen-primary,#directions .ap-first-f .ap-screen-note{display:none}
#directions .ap-first-f .dm-stage{left:0;right:0;top:285px;bottom:42px;width:100%;height:auto;border-inline:0;border-bottom:0}
#directions .ap-first-f .dm-yellow-col{padding:17px 22px 18px}
#directions .ap-first-f .dm-yellow-col>strong{font-size:28px;margin-top:10px}
#directions .ap-first-f .dm-paper-object{height:117px;width:64%;position:absolute;right:3%;bottom:6px;margin:0}
#directions .ap-first-f .dm-yellow-col>i{font-size:12px;max-width:12ch;white-space:normal;margin-top:14px}
#directions .ap-first-f .dm-yellow-col>b{display:none}
#directions .ap-first-f .ap-screen-services{height:42px;left:0;right:0;padding:0;gap:0;border-color:#11120755}
#directions .ap-first-f .ap-screen-services button{height:41px;padding:0 24px;justify-content:space-between;color:#4d4b1a;border-right:1px solid #11120755;gap:10px}
#directions .ap-first-f .ap-screen-services button>svg,#directions .ap-first-f .ap-screen-services button small{display:none}
#directions .ap-first-f .ap-screen-services button[aria-pressed=true]{color:#111207;background:#fff4}
#directions .ap-first-f .ap-screen-services button>i{width:20px;left:auto;right:20px;bottom:12px;transform:scaleX(1)}
#directions .ap-first-screen:not(.ap-first-a) .ap-screen-services strong{font-size:13px}

#directions .ap-first-c .ap-screen-story{top:125px}#directions .ap-first-c .ap-screen-title{font-size:54px}#directions .ap-first-d .ap-screen-note{margin-top:14px;font-size:10px}

/* Keep the full moving art inside its first-screen stage at every selected pose. */
#directions .ap-first-d .dm-stage{right:1%;width:57%}
#directions .ap-first-e .dm-stage{right:1%;width:55%;height:340px;bottom:70px}
#directions .ap-first-f .ap-screen-title{font-size:86px}
#directions .ap-first-f .dm-stage{top:290px;bottom:auto;height:168px;align-self:stretch}
#directions .ap-first-f .dm-paper-object{width:48%;height:112px;bottom:8px}
#directions .ap-first-f .dm-yellow-col>i{max-width:11ch;font-size:11px}

#directions .ap-first-d .dm-pane{top:12%;height:68%}

/* A reserves the header throughout the existing lifted-roof motion. */
#directions .ap-first-a .dm-stage{top:80px;bottom:62px;height:358px}

/* R4: larger authored canvas, native lower controls remain clear of the Dock. */
#directions .ap-first-screen .ap-screen-header-cta{background:transparent;color:var(--dm-ink);border:1px solid color-mix(in srgb,var(--dm-ink) 32%,transparent)}
#directions .ap-first-screen .ap-screen-header-cta:hover{background:color-mix(in srgb,var(--dm-ink) 8%,transparent);border-color:var(--dm-ink)}
#directions .ap-first-a .dm-stage{top:112px;bottom:auto;height:358px;right:1%;width:64%}
#directions .ap-first-b .dm-stage{height:calc(100% - 94px)}
#directions .ap-first-c .dm-stage{height:calc(100% - 100px)}
#directions .ap-first-d .dm-stage{height:calc(100% - 160px)}
#directions .ap-first-e .dm-stage{height:calc(100% - 146px)}
#directions .ap-first-f .ap-screen-title{font-size:94px}
#directions .ap-first-f .dm-stage{top:290px;bottom:42px;height:auto}

/* Keep native lower-control keyboard focus inside its authored clipping plane. */
#directions .ap-first-screen .ap-screen-services button:focus-visible{outline:2px solid currentColor;outline-offset:-3px;border-radius:6px}

/* R7: the preview is the window surface itself; a single outer frame owns its
   radius/border. Native controls keep their own authored keyboard focus. */
#directions .ap-first-screen.dm-scene{border:0;border-radius:0}
#directions .ap-first-screen .ap-screen-header{padding-inline:34px;gap:28px}
/* First whole representative A: original scene enlarged, full assembly visible;
   its three useful roles live beside the floating Dock, never underneath it. */
#directions .ap-first-a .ap-screen-story{top:140px;width:48%}
#directions .ap-first-a .ap-screen-lead{max-width:28ch}
#directions .ap-first-a .dm-stage{top:100px;bottom:auto;right:2%;width:62%;height:560px}
#directions .ap-first-a .ap-screen-services{left:32px;right:auto;bottom:28px;width:192px;height:180px;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);gap:4px;padding:0;border-top:0;background:transparent}
#directions .ap-first-a .ap-screen-services button{height:56px;min-height:0;gap:12px;padding:5px 8px}
#directions .ap-first-a .ap-screen-services button>i{width:auto;bottom:1px}

/* R7: remaining five authored compositions. Floating Dock shares each native
   surface; semantic controls and moving objects keep their own useful regions. */
#directions .ap-first-screen:is(.ap-first-b,.ap-first-c,.ap-first-e) .ap-screen-services{left:32px;right:auto;bottom:28px;width:192px;height:180px;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);gap:4px;padding:0;border-top:0;background:transparent}
#directions .ap-first-screen:is(.ap-first-b,.ap-first-c,.ap-first-e) .ap-screen-services button{height:56px;min-height:0;gap:12px;padding:5px 8px}
#directions .ap-first-screen:is(.ap-first-b,.ap-first-c,.ap-first-e) .ap-screen-services button>i{width:auto;bottom:1px}
#directions .ap-first-b .dm-stage{top:88px;bottom:auto;right:0;width:72%;height:620px}
#directions .ap-first-b .ap-screen-story{top:115px}
#directions .ap-first-c .dm-stage{top:80px;bottom:auto;right:2%;width:60%;height:640px}
#directions .ap-first-d .dm-stage{top:150px;bottom:auto;right:1%;width:60%;height:480px}
#directions .ap-first-d .ap-screen-services{bottom:220px}
#directions .ap-first-e .ap-screen-story{top:100px;width:43%}
#directions .ap-first-e .dm-stage{top:160px;bottom:auto;right:0;width:80%;height:540px}
#directions .ap-first-f .ap-screen-services{top:307px;bottom:auto}
#directions .ap-first-f .dm-stage{top:350px;bottom:0;height:auto}
#directions .ap-first-f .dm-paper-object{top:145px;bottom:auto;height:180px;width:48%}