/* Edge AI Pro booth kiosk: 55" portrait touch screen, 2160 x 3840.
 * Every size is in rem, and 1rem = 10 design px on a 1080 x 1920 canvas, so the page looks the
 * same at any Windows display scaling (100 %, 200 %, 300 %) and at any resolution with this shape. */
@font-face{font-family:Archivo;font-weight:700;src:url(fonts/Archivo-Bold.ttf) format("truetype")}
@font-face{font-family:Plex;font-weight:400;src:url(fonts/IBMPlexSans-Regular.ttf) format("truetype")}
@font-face{font-family:Plex;font-weight:600;src:url(fonts/IBMPlexSans-SemiBold.ttf) format("truetype")}
@font-face{font-family:Plex;font-weight:700;src:url(fonts/IBMPlexSans-Bold.ttf) format("truetype")}

:root{
  --bg:#0B1519; --panel:#122027; --ink:#EEF2EC; --grey:#A9B8B4; --dim:#6F807C;
  --green:#7BC843; --amber:#F2A541; --aws:#FF9900; --hair:rgba(238,242,236,.14);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:min(calc(100vw / 108), calc(100vh / 192));background:var(--bg)}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font-family:Plex,Arial,sans-serif;font-size:3rem;line-height:1.25;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums;cursor:default}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
img{-webkit-user-drag:none;user-select:none}

/* the stage: a 108 x 192 rem canvas centred in whatever window Chrome gives us */
.stage{position:relative;width:108rem;height:192rem;margin:0 auto;display:flex;flex-direction:column;
  padding:5rem 6rem 5rem;overflow:hidden}

/* top: brand + the two tabs */
.top{display:flex;align-items:center;justify-content:space-between;gap:3rem;padding-bottom:3rem;border-bottom:.2rem solid var(--hair)}
.top .brand{font-family:Archivo,sans-serif;font-size:3.2rem;line-height:1.1;letter-spacing:.15rem}
.brand{font-family:Archivo,sans-serif;font-size:3.4rem;letter-spacing:.1rem}
.brand b{color:var(--green)}
.tabs{display:flex;gap:1.6rem}
.tab{min-height:9rem;padding:0 3.6rem;border-radius:4.5rem;border:.3rem solid var(--hair);font-size:3rem;font-weight:600;
  display:flex;align-items:center;color:var(--grey);text-decoration:none}
.tab.on{border-color:var(--green);color:var(--ink)}

.eyebrow{font-size:2.4rem;font-weight:600;letter-spacing:.3rem;text-transform:uppercase;color:var(--green)}
.muted{color:var(--grey)}
.amber{color:var(--amber)}

/* pills: the only button style; on = solid green */
.pill{min-height:9rem;padding:0 3rem;border-radius:2rem;border:.3rem solid var(--hair);font-size:2.8rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;transition:background .12s}
.pill.on{background:var(--green);border-color:var(--green);color:var(--bg)}
.pill:disabled{opacity:.3}
.pill:active:not(:disabled){transform:scale(.97)}

/* full-screen sheet for sources / details */
.sheet{position:absolute;inset:0;background:var(--bg);padding:10rem 7rem 7rem;display:none;flex-direction:column;gap:3rem;z-index:5}
.sheet.open{display:flex}
.sheet h2{font-family:Archivo,sans-serif;font-size:5.6rem;line-height:1.1}
.sheet .body{flex:1;overflow-y:auto;touch-action:pan-y;font-size:2.8rem;line-height:1.45;color:var(--grey)}
.sheet .body p{margin-bottom:2.2rem}
.sheet .body b{color:var(--ink)}
.sheet .close{align-self:center;min-width:40rem}