@import url('/office/src/tokens.css');
@font-face{font-family:Saira;src:url('/office/assets/production/saira.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:Hanken;src:url('/office/assets/production/hanken.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--obsidian);color:var(--ink);font-family:var(--font-body)}button,a{-webkit-tap-highlight-color:var(--clear)}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:var(--clear);border-radius:5px;padding:11px 16px;min-height:44px;touch-action:manipulation;transition:background .18s,color .18s}button:hover{background:var(--surface)}button:focus-visible,a:focus-visible{outline:2px solid var(--steel);outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.mast{height:66px;position:fixed;inset:0 0 auto;z-index:30;background:var(--obsidian);display:flex;align-items:center;justify-content:space-between;padding:0 26px;gap:16px}.brand{display:flex;gap:12px;align-items:center;font:500 18px var(--font-display)}.brand svg{width:23px;height:26px;fill:var(--steel)}.utilities{display:flex;gap:20px;align-items:center;font-size:11px;color:var(--muted)}#motion{padding:6px 12px;font-size:11px;min-height:36px}#motion[aria-pressed=true]{background:var(--ink);color:var(--obsidian)}
#stage{position:fixed;inset:66px 0 78px;overflow:hidden;touch-action:none;outline:none;background:var(--onyx);perspective-origin:50% 50%}#world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform;pointer-events:none}#room{position:absolute;width:1254px;height:1254px;transform-style:preserve-3d}.photograph{position:absolute;inset:0;width:100%;height:100%;display:block}.capture{position:absolute;overflow:hidden;background:var(--surface);transform:translateZ(.15px)}.capture img{display:block;width:100%;height:auto}.capture.phone{border-radius:9px}.camera-dot{position:absolute;left:231.5px;top:652px;width:4px;height:4px;border-radius:50%;background:var(--obsidian);transform:translateZ(.3px)}
#ceiling{position:absolute;left:-6000px;top:0;width:12000px;height:8000px;transform-origin:0 0;transform:translateZ(8000px) rotateX(-90deg);background:var(--onyx);backface-visibility:visible}.ceiling-joint{position:absolute;bottom:0;width:100%;height:7px;background:var(--obsidian)}#ceiling-brand{position:absolute;left:6491px;top:6090px;width:600px;height:220px;display:flex;align-items:center;justify-content:center;gap:32px;color:var(--steel);text-shadow:0 3px 3px var(--shadow);font-family:var(--font-display)}#ceiling-brand>svg{width:135px;height:150px;filter:drop-shadow(0 3px 2px var(--shadow))}#ceiling-brand>div{display:flex;flex-direction:column}.wordmark{font-size:60px;font-weight:500;letter-spacing:.035em;line-height:1.2}.studio-word{font-size:22px;font-weight:400;letter-spacing:.52em;margin-top:8px;margin-left:3px}#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--onyx);font-size:14px;color:var(--muted)}
footer{position:fixed;inset:auto 0 0;height:78px;background:var(--obsidian);z-index:40}#journey-controls,#inside-controls{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 26px}.station-copy{display:flex;flex-direction:column;gap:3px}#station-title{font:500 17px var(--font-display)}#hint{color:var(--muted);font-size:12px}nav{display:flex;gap:8px;align-items:center}nav button{border-color:var(--clear);color:var(--muted)}nav button[aria-current=step]{border-color:var(--line);color:var(--ink)}.route-line{display:block;width:56px;height:2px;background:var(--line)}.route-line i{display:block;height:100%;background:var(--steel);transform-origin:left;transform:scaleX(0)}.primary{background:var(--ink);color:var(--obsidian);border-color:var(--ink);font-weight:600}.primary:hover{background:var(--steel)}
.portal{position:fixed;overflow:hidden;z-index:15;background:var(--surface);visibility:hidden;pointer-events:none;touch-action:none;transform-origin:0 0}.portal iframe{display:block;border:0;transform-origin:0 0;background:var(--surface);pointer-events:none}.portal .activate{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--clear);border-radius:0;padding:0}.portal .activate:focus-visible{outline-offset:-4px}.portal-dot{position:absolute;top:1.6%;left:calc(50% - 1.2%);width:2.4%;aspect-ratio:1;background:var(--obsidian);border-radius:50%;pointer-events:none}body[data-mode=inside] .portal.active{touch-action:auto}body[data-mode=inside] .portal.active iframe{pointer-events:auto}.portal.expanded{border-radius:0!important}.portal.expanded .portal-dot{display:none}.noscript{position:fixed;bottom:0;padding:24px;background:var(--obsidian);z-index:50}.noscript a{text-decoration:underline}
@media(max-width:700px){.mast{padding:0 14px}.utilities{gap:10px}.brand span{font-size:15px}.brand{gap:8px}#offline{max-width:72px;text-align:right;line-height:1.3}#journey-controls,#inside-controls{padding:10px 14px;gap:10px}.route-line{width:24px}nav{gap:0}nav button{padding:10px 12px}#station-title{font-size:14px}#hint{font-size:11px}#inside-controls button{font-size:12px;padding:10px 12px}}
@media(max-width:440px){.brand span{display:none}.route-line{display:none}.station-copy{max-width:130px}nav button{padding:10px}#offline{max-width:110px}#station-title{font-size:13px}}
@supports(padding:env(safe-area-inset-top)){.mast{top:env(safe-area-inset-top)}#stage{top:calc(66px + env(safe-area-inset-top));bottom:calc(78px + env(safe-area-inset-bottom))}footer{bottom:env(safe-area-inset-bottom)}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
#room{transform-style:flat;transform:translateZ(0)}
#world{left:0;top:0;width:100%;height:100%;transform-style:flat;will-change:auto}#room,#ceiling{left:0;top:0;transform-origin:0 0;will-change:transform}#ceiling{width:2600px;height:3200px}#ceiling-brand{left:991px;top:1290px}
.phone-detail{position:absolute;left:0;top:0;width:1024px;height:1536px;transform-origin:0 0;will-change:transform}
#phone-capture{transform-origin:0 0;will-change:transform}#phone-capture::after{content:'';position:absolute;top:1.6%;left:48.8%;width:2.4%;aspect-ratio:1;border-radius:50%;background:var(--obsidian)}

.portal iframe{pointer-events:auto}.portal{touch-action:auto}.portal .activate{inset:auto;right:8px;bottom:8px;width:auto;height:auto;padding:8px 12px;background:var(--obsidian);color:var(--ink);opacity:0;pointer-events:none}.portal .activate:focus-visible{opacity:1;pointer-events:auto}

#station-title{border:0;padding:0;min-height:0;border-radius:0;text-align:left;line-height:1.4}#station-title:disabled{cursor:default}#station-title:disabled:hover{background:var(--clear)}.station-copy{min-width:0}

.desk-props{pointer-events:none}.business-card-face{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;transform:matrix3d(0.06499051233396584,0.0,0,-0.0,-0.056069563503793475,-0.058151870463428255,0,-0.00010510066673235458,0,0,1,0,450,803.75,0,1)}

.selector{position:fixed;z-index:20;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--obsidian);border:1px solid var(--line);border-radius:7px;box-shadow:0 12px 26px var(--shadow)}.selector-heading{margin:0 2px;font:500 11px var(--font-display);color:var(--muted)}.selector-list{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:6px}.selector-list button{display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 9px;border-radius:5px;border-color:var(--line);color:var(--muted);font:400 12.5px var(--font-body);line-height:1.25;text-align:left}.selector-list button:hover{background:var(--surface);color:var(--ink)}.selector-list button:focus-visible{outline-offset:2px}.selector-list button[aria-pressed=true]{background:var(--ink);color:var(--obsidian);border-color:var(--ink)}.selector-name{min-width:0}
.selector[data-layout=band] .selector-list button{justify-content:center;text-align:center;padding:6px 6px}.selector[data-compact=true] .selector-list button{font-size:11.5px;padding:6px 5px;gap:4px}body[data-calm=true] .selector-list button{transition:none}

/* Installed-app mode. Both bars are browser-tab furniture: the app runs edge to
   edge without them, and Back and Expand ride in one small onyx pill instead. */
body[data-app=true] .mast,body[data-app=true] footer{display:none}
body[data-app=true] #stage{inset:0}
@supports(padding:env(safe-area-inset-top)){body[data-app=true] #stage{top:env(safe-area-inset-top);right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left)}}
body[data-app=true] .portal .activate{opacity:1;pointer-events:auto}
.app-pill{position:fixed;z-index:25;display:flex;gap:6px;padding:6px;background:var(--obsidian);border:1px solid var(--line);border-radius:7px;box-shadow:0 12px 26px var(--shadow)}
.app-pill button{min-height:44px;min-width:44px;padding:8px 14px;border-radius:5px;border-color:var(--line);color:var(--muted);font:400 12.5px var(--font-body);line-height:1.25}
.app-pill button:hover{background:var(--surface);color:var(--ink)}
.app-pill .primary{background:var(--ink);color:var(--obsidian);border-color:var(--ink);font-weight:600}
.app-pill .primary:hover{background:var(--steel)}
body[data-calm=true] .app-pill button{transition:none}

/* Selector options. ?selector= chooses one. Fold is the default from round 6;
   column is the earlier reviewed build and stays reachable, as do rail and
   slate. */

/* fold: a module hinged to the display, in the bezel's own near-black material.
   Square where it attaches, rounded on the free edge, a dark seam along the
   hinge and a catchlight on the top edge, so it reads as a flap swung out of the
   hardware rather than a card floating over the room. It travels folded flat and
   opens when the station settles; calm motion opens it directly. */
.selector[data-layout^=fold]{border:0;background:var(--onyx);box-shadow:inset 0 1px 0 var(--shine),0 10px 22px -14px var(--shadow);transform-origin:var(--hinge-origin,100% 50%);transform:var(--hinge-open);transition:transform .44s cubic-bezier(.22,.72,.2,1)}
.selector[data-layout^=fold] .selector-heading{color:var(--muted);opacity:.75;letter-spacing:.06em}
.selector[data-layout^=fold] .selector-list button{border-color:var(--clear);background:var(--clear);color:var(--steel)}
.selector[data-layout^=fold] .selector-list button:hover{background:var(--shine);color:var(--ink)}
.selector[data-layout^=fold] .selector-list button[aria-pressed=true]{background:rgba(244,244,241,.12);border-color:var(--clear);color:var(--ink)}
.selector[data-layout^=fold][data-open=false]{transform:var(--hinge-shut)}
.selector[data-layout^=fold]::before{content:'';position:absolute;background:var(--panel);pointer-events:none}
.selector[data-layout^=fold][data-hinge=left]{--hinge-origin:100% 50%;--hinge-open:none;--hinge-shut:perspective(900px) rotateY(-90deg);border-radius:6px 0 0 6px}
.selector[data-layout^=fold][data-hinge=left]::before{top:0;bottom:0;right:0;width:3px}
.selector[data-layout^=fold][data-hinge=right]{--hinge-origin:0 50%;--hinge-open:none;--hinge-shut:perspective(900px) rotateY(90deg);border-radius:0 6px 6px 0}
.selector[data-layout^=fold][data-hinge=right]::before{top:0;bottom:0;left:0;width:3px}
.selector[data-layout^=fold][data-hinge=bottom]{--hinge-origin:50% 0;--hinge-open:none;--hinge-shut:perspective(900px) rotateX(88deg);border-radius:0 0 6px 6px}
.selector[data-layout^=fold][data-hinge=bottom]::before{left:0;right:0;top:0;height:3px}
.selector[data-layout^=fold][data-hinge=top]{--hinge-origin:50% 100%;--hinge-open:none;--hinge-shut:perspective(900px) rotateX(-88deg);border-radius:6px 6px 0 0}
.selector[data-layout^=fold][data-hinge=top]::before{left:0;right:0;bottom:0;height:3px}
.selector[data-layout=fold]{padding:9px 10px 10px}
.selector[data-layout=fold-band]{padding:6px 7px 7px}
.selector[data-layout=fold-band] .selector-list button{justify-content:center;text-align:center;padding:6px}
body[data-calm=true] .selector[data-layout^=fold]{transition:none}

/* rail: the names set into the hardware, on the monitor's chin and on the dock
   face under the phone. No panel and no box. The type sits in the band and the
   rest of each 44px target hangs below it over the stand, so the row starts
   where the live screen ends. */
.selector[data-layout=rail]{background:var(--clear);border:0;border-radius:0;box-shadow:none;padding:0;gap:0}
.selector[data-layout=rail] .selector-list{gap:0}
.selector[data-layout=rail] .selector-list button{border:0;background:var(--clear);border-radius:0;align-items:flex-start;justify-content:center;text-align:center;padding:var(--rail-pad,5px) 5px 0;font:400 12px var(--font-display);letter-spacing:.07em;color:var(--muted);text-shadow:0 1px 0 rgba(0,0,0,.85),0 -1px 0 var(--shine)}
.selector[data-layout=rail] .selector-list button:hover{background:var(--clear);color:var(--steel)}
.selector[data-layout=rail] .selector-list button[aria-pressed=true]{background:var(--clear);border-color:var(--clear);color:var(--ink);text-shadow:0 0 10px rgba(207,212,218,.35),0 1px 0 rgba(0,0,0,.85)}
.selector[data-layout=rail][data-rail=desk] .selector-list button{color:var(--steel);text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 9px rgba(0,0,0,.6)}
.selector[data-layout=rail][data-rail=desk] .selector-list button[aria-pressed=true]{color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 9px rgba(0,0,0,.7)}
.selector[data-layout=rail][data-compact=true] .selector-list button{font-size:11px;letter-spacing:.04em;padding-left:2px;padding-right:2px}

/* slate: a slim onyx slate lying on open desk, the list printed on it like a
   menu card, the chosen row lit. It leans with the desk rather than facing the
   camera square on, and it is fitted into desk the camera can actually see. */
.selector[data-layout=slate]{background:var(--onyx);border:1px solid var(--line);border-radius:3px;padding:7px;box-shadow:inset 0 1px 0 var(--shine),0 14px 22px -12px var(--shadow);transform-origin:50% 100%;transform:perspective(760px) rotateX(15deg)}
.selector[data-layout=slate]{padding:6px}
.selector[data-layout=slate] .selector-list button{border-color:var(--clear);background:var(--clear);justify-content:center;text-align:center;color:var(--steel);letter-spacing:.01em;min-height:49px}
.selector[data-layout=slate] .selector-list button:hover{background:var(--shine);color:var(--ink)}
.selector[data-layout=slate] .selector-list button[aria-pressed=true]{background:rgba(244,244,241,.11);border-color:var(--clear);color:var(--ink)}

/* Round 6. The fold is the default selector, the five entries carry the
   businesses' own logos taken from their approved local copies, ?labels=text
   puts the names back, and a search field sits on the fold face above the list
   so it folds with it. The per-site "ready offline" dot is gone: the offline
   check still runs, it just no longer draws a mark. */
.selector-logo{display:none;flex:0 1 auto;min-width:0;height:var(--logo-h,24px);width:auto;max-width:100%;object-fit:contain;object-position:left center}
.selector[data-logos=on] .selector-list button[data-show=logo] .selector-logo{display:block}
.selector[data-logos=on] .selector-list button[data-show=logo] .selector-name{display:none}
/* A mark too dark to read on onyx is lit here, never by editing the artwork. */
.selector-logo[data-treatment=silver]{filter:brightness(0) invert(1);opacity:.94}
.selector-list button[hidden]{display:none}
/* A swipe that starts on the fold face belongs to the room, so the browser is
   not allowed to claim it as a pan. The field keeps ordinary touch behaviour so
   a tap still puts the caret in it. */
.selector{touch-action:none}
.selector-search{touch-action:auto}
.selector[data-layout=fold-band]{--logo-h:20px}
.selector[data-compact=true]{--logo-h:18px}
body[data-labels=logo] .selector[data-layout=fold-band] .selector-list button{justify-content:flex-start;text-align:left}
/* Round 11. The five logos were different heights, weights, colours and shapes,
   so the row never read as one set. The default is now a typographic wordmark
   per site: the app's own display face, one size, one weight, one tracking, one
   colour, uppercase, one line each, in the row the logos used, with the 44px
   target and the filled active row of round 6 untouched. No new font, no new
   hex, no per-brand treatment, no sublines. ?labels=logo keeps the round 6 row. */
body[data-labels=wordmark] .selector-name{font-family:var(--font-display);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selector-search{display:none;width:100%;min-height:30px;padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:var(--obsidian);color:var(--ink);font:400 12.5px var(--font-body);appearance:none}
.selector-search::placeholder{color:var(--muted);opacity:1}
.selector-search::-webkit-search-cancel-button{display:none}
.selector-search:focus-visible{outline:2px solid var(--steel);outline-offset:1px}
.selector-empty{display:none;margin:2px 3px 3px;color:var(--muted);font:400 12px var(--font-body)}
body[data-selector-mode=fold] .selector-search{display:block}
.selector[data-field=off] .selector-search{display:none}
body[data-selector-mode=fold] .selector-empty:not([hidden]){display:block}