/* Shared frame, header and light for all six pages. */
/* Neither screen reserves a scrollbar gutter: their horizontal centers match. */
html{scrollbar-gutter:auto}
:root{--tablet-width:92%;--tablet-max-width:1520px;--tablet-margin:clamp(85px,17vh,190px) auto 35px;--tablet-radius:22px;--tablet-header-height:78px;--tablet-scene-height:clamp(550px,65vh,760px)}
body[data-section=home] .tablet,body:not([data-section=home]) .tablet{width:var(--tablet-width);max-width:var(--tablet-max-width);margin:var(--tablet-margin);border:9px solid #020304;border-radius:var(--tablet-radius)}
body[data-section=home] .tablet{--header-height:var(--tablet-header-height);--scene-height:var(--tablet-scene-height)}
body:not([data-section=home]) .tablet{height:calc(var(--tablet-header-height) + var(--tablet-scene-height) + 18px);min-height:0}
body:not([data-section=home]) .header{position:absolute;top:0;left:0;right:0;z-index:5;height:var(--tablet-header-height);min-height:var(--tablet-header-height);padding-top:15px;padding-bottom:15px;background:transparent;border-bottom:0}
body[data-section=data] .data-hero{height:calc(var(--tablet-scene-height) + var(--tablet-header-height));min-height:0;box-sizing:border-box;padding-top:calc(var(--tablet-header-height) + 24px);border-radius:15px}
body:not([data-section=home]){--ambient-background:#061222;--ambient-warm:#ff9b1900;--ambient-cool:#1487ff4d;background-color:var(--ambient-background);background-image:radial-gradient(ellipse at 22% 50%,var(--ambient-warm) 0%,transparent 72%),radial-gradient(ellipse at 78% 50%,var(--ambient-cool) 0%,transparent 72%);background-attachment:fixed;background-size:cover}
html[data-theme=human] body:not([data-section=home]){--ambient-background:#1d1009;--ambient-warm:#ff9b194d;--ambient-cool:#1487ff00;background-color:var(--ambient-background);background-image:radial-gradient(ellipse at 22% 50%,var(--ambient-warm) 0%,transparent 72%),radial-gradient(ellipse at 78% 50%,var(--ambient-cool) 0%,transparent 72%)}
body:not([data-section=home]){--frame-color:#48acff;--frame-glow:#48acff26}
html[data-theme=human] body:not([data-section=home]){--frame-color:#ffc169;--frame-glow:#ffc16926}
body:not([data-section=home]) .tablet{outline:1px solid var(--frame-color);outline-offset:0;box-shadow:0 0 8px var(--frame-glow),-15px 0 60px var(--ambient-warm),15px 0 60px var(--ambient-cool),0 24px 45px #0007}
@media(prefers-reduced-motion:no-preference){body:not([data-section=home]) .tablet{transition:outline-color .25s ease,box-shadow .25s ease}}
body:not([data-section=home]) .header{padding-left:4.2%;padding-right:4.2%}
body[data-section=home] .brand,body:not([data-section=home]) .brand{gap:9px;letter-spacing:0}
body[data-section=home] .brand-stencil,body:not([data-section=home]) .brand-stencil{width:76px;height:25px;flex-shrink:0;color:#f2f4f6}
body:not([data-section=home]) .brand-slash{width:6px;height:6px;margin-left:0}
/* Short screens (laptops 1366x768, projectors 1280x720): lift the frame so all of it fits on screen.
   The frame is 646px tall at its minimum scene height; above about 810px of height nothing changes. */
@media(min-width:768px){:root{--tablet-margin:clamp(48px,min(17vh,calc(100vh - 670px)),190px) auto 35px}}
/* Desktops and tablets: the frame with its gaps fills exactly one window height, so there is no page scrollbar and
   no empty scroll under the frame. The bottom gap takes what is left, up to 35px (19px = frame borders + 1px body
   padding); the 70px page padding below is kept for phones only. */
@media(min-width:768px){
 :root{--tablet-top:clamp(48px,min(17vh,calc(100vh - 670px)),190px);--tablet-margin:var(--tablet-top) auto clamp(0px,calc(100vh - var(--tablet-top) - var(--tablet-header-height) - var(--tablet-scene-height) - 19px),35px)}
 html body[data-section]{padding-bottom:0}
}
@media(max-width:767px){
 :root{--tablet-width:calc(100% - 24px);--tablet-margin:80px auto 25px;--tablet-radius:17px;--tablet-header-height:74px;--tablet-scene-height:790px}
 body:not([data-section=home]) .header{height:118px;min-height:118px;padding:16px 16px 60px}
 body[data-section=data] .data-hero{height:calc(var(--tablet-header-height) + var(--tablet-scene-height));grid-template-columns:1fr;margin:0;padding:142px 20px 20px;gap:20px;align-content:center}
 body[data-section=data] .data-globe{width:min(100%,340px);max-width:340px}
 body[data-section=home] .brand-stencil,body:not([data-section=home]) .brand-stencil{width:68px;height:23px}
 body:not([data-section=home]) .brand{position:absolute;left:15px;top:25.5px}
}

/* Long workspaces scroll inside the same-sized tablet. */
body:not([data-section=home]){padding:1px 0 70px;min-height:100vh}
body:not([data-section=home]) .tablet{background:radial-gradient(ellipse at 0% 50%,var(--ambient-warm),transparent 70%),radial-gradient(ellipse at 100% 50%,var(--ambient-cool),transparent 70%),#030608}
body:not([data-section=home]) .tablet:before,body:not([data-section=home]) .tablet:after,body:not([data-section=home]) footer{display:none}
body:not([data-section=home]):not([data-section=data]) #main{height:var(--tablet-scene-height);margin-top:var(--tablet-header-height);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;overscroll-behavior:contain}
body:not([data-section=home]) .header-controls{margin-left:auto}
@media(min-width:1440px){
 body:not([data-section=home]) .header #navigation{position:absolute;left:14%;right:calc(50% + 18px);top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;gap:8px;min-width:0;width:auto;max-width:none;padding:0;border:0;background:transparent;box-shadow:none}
 body:not([data-section=home]) .header #navigation a{font-size:10px;letter-spacing:.06em;padding:0;min-height:0;white-space:nowrap}
 body:not([data-section=home]) .header .mobile-menu{display:none}
}
@media(max-width:1439px){
 body:not([data-section=home]) .header .mobile-menu{display:grid;min-width:40px;min-height:44px}
 body:not([data-section=home]) .header #navigation{display:none;position:absolute;left:auto;right:4.2%;top:calc(100% - 2px);transform:none;width:145px;max-width:calc(100% - 32px);padding:5px;grid-template-columns:1fr;gap:2px;background:#09111a;border:1px solid #87b8e42c;border-radius:14px;box-shadow:0 14px 35px #0008}
 body:not([data-section=home]) .header #navigation.open{display:grid}
 body:not([data-section=home]) .header #navigation a{padding:10px 7px;min-height:42px;border-radius:7px;font-size:12px;letter-spacing:0;white-space:normal}
 body:not([data-section=home]) .header #navigation a[aria-current]{background:var(--halo)}
 body:not([data-section=home]) .header #navigation a[aria-current]:after{display:none}
}
@media(max-width:767px){
 body:not([data-section=home]){padding-bottom:25px}
 body:not([data-section=home]):not([data-section=data]) #main{margin-top:118px;height:calc(var(--tablet-header-height) + var(--tablet-scene-height) - 118px)}
 body:not([data-section=home]) .header #navigation{right:12px}
}

/* Larger, equally aligned navigation on every page. */
@media(min-width:1440px){
 body[data-section=home] .header #navigation a,body:not([data-section=home]) .header #navigation a{font-size:13px;letter-spacing:.025em}
}
@media(max-width:1439px){
 body[data-section=home] .header #navigation a,body:not([data-section=home]) .header #navigation a{font-size:14px;line-height:1.5;min-height:44px}
 body[data-section=home] .header #navigation,body:not([data-section=home]) .header #navigation{width:180px;max-width:calc(100% - 32px)}
}

/* The home split-colour stroke follows the same outer edge as internal outlines. */
body[data-section=home] .world-frame{inset:-10px;border-radius:calc(var(--tablet-radius) + 1px)}
/* One ring avoids overlapping antialiased gold/blue strokes at the outer edge. */
body[data-section=home] .world-frame{
 padding:1px;
 background:linear-gradient(90deg,#ffc169 0%,#ffc169 calc(var(--reveal,50%) + var(--frame-clip-offset,0px)),#48acff calc(var(--reveal,50%) + var(--frame-clip-offset,0px)),#48acff 100%);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 mask-composite:exclude;
}
body[data-section=home] .world-frame>span{display:none}