/* The composition is authored on a 1536 x 1024 plate (reset-09 Ca). #frame is that plate, scaled to cover the
   viewport with the same transform the canvas uses, so text and orbits stay registered at every size. */
:root { --ink: #0f1d2a; --muted: #4c5a66; --ground: #dae4e9; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); overflow: hidden; }
#sky { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#frame, #ui { position: fixed; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; pointer-events: none;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
#frame a, #ui a { pointer-events: auto; color: inherit; text-decoration: none; }
header .name { position: absolute; left: 34px; top: 25px; font-size: 23.5px; font-weight: 500; letter-spacing: -0.06em; }
header nav { position: absolute; right: 44px; top: 28px; font-size: 17px; font-weight: 340; letter-spacing: -0.012em; display: flex; gap: 17px; }
header nav span { opacity: 0.85; }
/* the line under the name: what he does (his answer of 20 October, "focus on what I do"); a region's breadcrumb takes its place */
header .role { position: absolute; left: 34px; top: 60px; margin: 0; font-size: 14px; font-weight: 400; line-height: 1.35; letter-spacing: -0.01em; opacity: 0.82; white-space: nowrap; }   /* three phrase lines set by hand under the name (his pick of 21 October: "Zero to one, again & again." / "With AI, for people" / "& agents alike.", a pixel under the old size so the first line keeps to the open ground left of the teal); a wrap would split "again & again" */
/* on the pale ground the line crosses from the open ground into the deep teal: a tight glow round the letters only (both judges,
   20 October: a lift under the line read as a smudge) */
html:not([data-ground="dark"]):not(.portrait) header .role { opacity: 1; color: #22303b; text-shadow: 0 0 2px rgba(238, 244, 246, 0.95), 0 0 6px rgba(238, 244, 246, 0.75); }
/* where the cropped picture brings a deep field under it (a 4:3 screen, 21 October): a frosted lift of the ground behind the line, so its ink reads */
html.role-on-field:not(.portrait):not([data-ground="dark"]) header .role::before { content: ''; position: absolute; inset: -10px -14px; z-index: -1; pointer-events: none; background: rgba(226, 236, 240, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
/* the tagline sits about half as far above the bottom as before (his note of 19 October: it floated too high) */
#tagline { position: absolute; left: 27px; top: 763px; margin: 0; font-weight: 360; font-size: 111px; line-height: 103px; letter-spacing: -0.06em; }
#tagline .ka { letter-spacing: -0.1em; }   /* the "a" of Because sets a wide gap before the "u" at this weight and tracking (the stranger walk saw "Beca use") */
html:not([data-ready]) #ui { visibility: hidden; }   /* until the first frame: the tagline's size and place come from the screen (the stranger walk saw it huge and cut off on a phone) */

/* star-chart indicators and record points, drawn in plate coordinates inside #frame */
#marks { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; overflow: visible; pointer-events: none; }
#marks .indicator text { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 17px; font-weight: 300; letter-spacing: -0.035em; }
#marks .indicator.hover text { fill: #0f1d2a; font-size: 15px; font-weight: 400; letter-spacing: -0.02em; }
#marks .indicator.hover .card { fill: rgba(236, 242, 245, 0.92); stroke: rgba(15, 29, 42, 0.25); stroke-width: 0.6; }
#marks .indicator.hover .t2 { font-size: 12.5px; font-weight: 300; fill: #4c5a66; }
#marks .indicator.hover .leader { stroke: #f4f8fa; stroke-width: 1; }
#marks .indicator.hover .ring { fill: none; stroke: #f4f8fa; stroke-width: 1.2; }
#marks .indicator.hover.onDark text { fill: #fbf6f4; stroke: rgba(40, 10, 8, 0.55); }
#marks .indicator.hover.onDark .t2 { fill: #f3d9d4; }
#marks .indicator.hover.onDark .leader, #marks .indicator.hover.onDark .ring { stroke: #fbf2f0; }
/* the dark landing (&ground=dark): the tag on a deep card, light type */
html[data-ground="dark"] #marks .indicator.hover .card { fill: rgba(6, 18, 25, 0.88); stroke: rgba(244, 247, 248, 0.28); }
html[data-ground="dark"] #marks .indicator.hover text { fill: #f4f7f8; stroke: none; }
html[data-ground="dark"] #marks .indicator.hover .t2 { fill: #a9c0c8; }
/* v4: the lines run on under the type; a soft blur behind each line of type keeps it readable instead of cutting the
   lines. ?blur=none|line|block, ?blurpx= sets the radius; ?text=0 hides the type to inspect what runs under it. */
html.notext #ui { visibility: hidden; }
html { --br: 3px; --bf: 16px; }
html.blur-line #tagline .ln { position: relative; display: inline-block; }
html.blur-line #tagline .ln::before, html.blur-line header .name::before, html.blur-line header nav::before,
html.blur-block #tagline::before {
  content: ''; position: absolute; inset: -12px -20px; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(var(--br)); backdrop-filter: blur(var(--br));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--bf), #000 calc(100% - var(--bf)), transparent), linear-gradient(180deg, transparent, #000 var(--bf), #000 calc(100% - var(--bf)), transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 var(--bf), #000 calc(100% - var(--bf)), transparent), linear-gradient(180deg, transparent, #000 var(--bf), #000 calc(100% - var(--bf)), transparent); mask-composite: intersect;
}
html.blur-line header .name::before, html.blur-line header nav::before { inset: -8px -14px; --br: calc(var(--brh, 2px)); --bf: 10px; }
html.blur-block #tagline::before { inset: -30px -40px; --bf: 40px; }
#records-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a hint for readers that never see the picture (his note of 21 October: agents' fetch tools differ, and some read the accessibility tree): in the tree and the HTML, not on screen, out of the Tab order */
#for-agents { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
#records-list a { pointer-events: auto; }
html.pointing #sky { cursor: pointer; }

/* landscape screens that are not 3:2: the plate covers (cropping top and bottom or the sides), the type is laid out
   in screen space at the plate's proportions so nothing is cut off */
html.free #ui { transform: none !important; width: 100vw; height: 100svh; }
html.free header .name { left: calc(34px * var(--k)); top: calc(25px * var(--k)); font-size: max(14px, calc(23.5px * var(--k))); }
html.free header nav { right: calc(44px * var(--k)); top: calc(28px * var(--k)); font-size: max(12px, calc(17px * var(--k))); gap: calc(17px * var(--k)); }
html.free header .role { left: calc(34px * var(--k)); top: max(46px, calc(60px * var(--k))); font-size: calc(max(12px, calc(15px * var(--k))) - 1px); }
html.free #tagline { left: calc(27px * var(--k)); top: auto; bottom: calc(54px * var(--k)); font-size: calc(111px * var(--k)); line-height: calc(103px * var(--k)); }
/* portrait (phones): the plate still covers the screen, framed on the gateways and the disk; the type is laid out in
   screen space instead of plate space so it stays whole and readable */
html.portrait #ui { transform: none !important; width: 100vw; height: 100svh; }
html.portrait header .name { left: 18px; top: 16px; font-size: 19px; }
html.portrait header { color: #f4f8fa; text-shadow: 0 0 6px rgba(8, 30, 40, 0.55), 0 0 2px rgba(8, 30, 40, 0.5); }
html.portrait header nav { right: 18px; top: 19px; font-size: 14px; gap: 9px; }
html.portrait header .role { left: 18px; top: 44px; font-size: 12px; line-height: 1.3; }   /* two lines on a phone, clear of the nav (the Opus judge) */
/* two other places for the line, to judge (&role=tagline, &role=corner) */
html.role-tagline header .role { top: 718px; }
html.free.role-tagline header .role { top: auto; bottom: calc(268px * var(--k)); }
html.portrait.role-tagline header .role { top: auto; bottom: calc(44px + 1.86 * clamp(38px, 10.5vw, 76px)); }   /* 12 px over the tagline's two lines */
html.role-corner header .role { left: auto; right: 44px; top: auto; bottom: 60px; text-align: right; }
html.free.role-corner header .role { right: calc(44px * var(--k)); bottom: calc(60px * var(--k)); }
html.portrait.role-corner header .role { right: 18px; bottom: 16px; left: auto; }
html.portrait #tagline { left: 16px; top: auto; bottom: 32px; font-size: clamp(38px, 10.5vw, 76px); line-height: 0.93; }   /* smaller on a phone (a note of 21 October: it covered too much of the picture), as before on a portrait tablet; was clamp(52px, 15.5vw, 76px) */