/* gci.studio/pcntlogo — the PC NET TECHS logo in 3D, on a dark stage as the owner's image is (README.md, "The PC NET TECHS
   logo in 3D at /pcntlogo" and "The Signal stage"). The layout is the Radiant Windows logo page's. */
@font-face{font-family:PCManrope;src:url('/assets/fonts/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{--lg-bg:radial-gradient(120% 90% at 50% 22%,#18203a 0%,#0a0d16 58%,#040509 100%);--lg-base:#0a0d16;--lg-ink:#f2f5ff;--lg-soft:#a4afcb;--lg-blue:#007afc;--lg-focus:#5aa8ff;--lg-edge:#ffffff1f;--lg-tray:#ffffff0d;--lg-on:#ffffff1f}
/* glass is shown in a light studio, so that the page shows through it (html[data-material], from logo.js) */
html[data-material="glass"]{--lg-ink:#111624;--lg-soft:#4a5468;--lg-focus:#0062d1;--lg-edge:#0000001f;--lg-tray:#ffffff59;--lg-on:#ffffffd9}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--lg-bg) var(--lg-base);background-attachment:fixed;color:var(--lg-ink);font:15px/1.5 PCManrope,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a:focus-visible{outline:2px solid var(--lg-focus);outline-offset:3px}
/* the model fills the first screen; the page goes on below it only for the site's Privacy line */
.lg{position:relative;height:100svh;min-height:460px;overflow:hidden}
.lg::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 24%,#f7f9fc 0%,#dfe4ec 56%,#b6bfcd 100%);opacity:0;transition:opacity .6s;pointer-events:none}
html[data-material="glass"] .lg::before{opacity:1}
.lg-stage{position:absolute;left:0;right:0;top:clamp(84px,13vh,132px);bottom:96px}
.lg-stage>*{position:absolute;inset:0;width:100%;height:100%}
/* the still frame, until the splats are drawn (html.lg-ready, from logo.js), fading as they gather; without JavaScript
   or WebGL 2 it stays */
.lg-still{object-fit:contain;transition:opacity .9s,visibility 0s .9s}
html.lg-ready .lg-still{opacity:0;visibility:hidden}
/* a sideways drag turns the logo; an upward or downward one still scrolls the page on a phone */
.lg-model{display:block;touch-action:pan-y;cursor:grab}
/* the drawing fades out at the stage's top and bottom, so a zoomed logo or the glass's shadows never end in a line */
.lg-model{-webkit-mask-image:linear-gradient(transparent,#000 5%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 5%,#000 88%,transparent)}
.lg-model:active{cursor:grabbing}
/* glass filters the light: the page is multiplied by what the drawing lets through (splats.js) */
html[data-material="glass"] .lg-model{mix-blend-mode:multiply}
.lg-model:focus-visible{outline:2px solid var(--lg-focus);outline-offset:-2px}
.lg-title{position:absolute;z-index:1;left:16px;right:16px;top:max(28px,calc(env(safe-area-inset-top) + 16px));margin:0;text-align:center;font-size:clamp(24px,4vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;pointer-events:none;transition:color .6s}
.lg-title em{font-style:normal;white-space:nowrap;color:var(--lg-blue)}
.lg-hint{display:none;position:absolute;left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom));margin:0;text-align:center;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--lg-soft);pointer-events:none;transition:opacity .6s,color .6s}
/* the material: its own colours, glass, brushed aluminum, neon or the Transformer, chosen on the drawing itself, so shown
   once it is drawn (html.lg-ready); radio buttons under chips, each with a swatch, in one row where there is room and two
   on a phone */
.lg-materials{display:none;position:absolute;z-index:2;left:0;right:0;bottom:max(44px,calc(env(safe-area-inset-bottom) + 26px));width:max-content;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center;gap:2px;margin:0 auto;padding:4px;border:1px solid var(--lg-edge);border-radius:22px;background:var(--lg-tray);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.lg-ready .lg-materials{display:flex}
.lg-materials legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lg-materials label{position:relative;display:block;cursor:pointer}
.lg-materials input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lg-chip{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;color:var(--lg-soft);transition:background .2s,color .2s}
.lg-materials label:hover .lg-chip{color:var(--lg-ink)}
.lg-materials input:checked+.lg-chip{background:var(--lg-on);color:var(--lg-ink)}
.lg-materials input:focus-visible+.lg-chip{outline:2px solid var(--lg-focus);outline-offset:1px}
.lg-swatch{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff33}
.lg-swatch-original{background:linear-gradient(90deg,#007afc 50%,#fc0101 50%)}
.lg-swatch-glass{background:radial-gradient(circle at 32% 30%,#ffffffd9 0 16%,transparent 24%),linear-gradient(135deg,#3d9bffa6,#ff3b3ba6)}
.lg-swatch-aluminum{background:linear-gradient(135deg,#ffffff00 30%,#ffffff8c 48%,#ffffff00 62%),linear-gradient(90deg,#1f6fd6 50%,#d42020 50%)}
.lg-swatch-neon{background:radial-gradient(circle,#0b1020 0 32%,transparent 34%),linear-gradient(90deg,#6db4ff 50%,#ff6b6b 50%);box-shadow:0 0 7px #4da3ffb3,0 0 3px #ff5a5ab3}
/* the Transformer: the logo's blue and red with a racing stripe between them */
.lg-swatch-transformer{background:linear-gradient(120deg,#007afc 0 38%,#f2f5ff 38% 46%,#0a0d16 46% 54%,#f2f5ff 54% 62%,#fc0101 62%)}
/* Linked: the same colours as links of a chain; the Robot: a white head with a dark visor, the blue and the red below */
.lg-swatch-linked{background:repeating-linear-gradient(90deg,#007afc 0 2px,#f2f5ff 2px 3px,#fc0101 3px 5px,#0a0d16 5px 6px)}
.lg-swatch-robot{background:linear-gradient(180deg,#f2f5ff 0 28%,#0a0d16 28% 44%,#f2f5ff 44% 56%,transparent 56%),linear-gradient(90deg,#007afc 50%,#fc0101 50%)}
/* "Brushed aluminum" where there is room, "Aluminum" on a phone */
.lg-narrow{display:none}
@media(max-width:520px){.lg-wide{display:none}.lg-narrow{display:inline}}
@media(max-width:400px){.lg-chip{gap:6px;padding:8px 10px;font-size:12px}}
@media(max-width:370px){.lg-chip{gap:5px;padding:7px 7px;font-size:11.5px}}
/* the tilt, on a phone: the view follows the phone's motion once pressed (logo.js shows it where that can work) */
.lg-tilt{display:none;position:absolute;z-index:2;top:calc(clamp(84px,13vh,132px) + 8px);right:max(12px,env(safe-area-inset-right));align-items:center;gap:6px;padding:8px 13px;border:1px solid var(--lg-edge);border-radius:999px;background:var(--lg-tray);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--lg-soft);font:700 13px/1 PCManrope,"Segoe UI",Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s}
html.lg-ready .lg-tilt:not([hidden]){display:inline-flex}
.lg-tilt[aria-pressed="true"]{background:var(--lg-on);color:var(--lg-ink)}
.lg-tilt:focus-visible{outline:2px solid var(--lg-focus);outline-offset:2px}
/* the hint asks for a drag, so it shows only where the script runs (html.lg-live) */
html.lg-live .lg-hint{display:block}
.lg-hint.is-done{opacity:0}
@media(prefers-reduced-motion:reduce){.lg::before,.lg-title,.lg-hint,.lg-still,.lg-chip,.lg-tilt{transition:none}}