/* ============================================================
   keyquest.tech · KQ-01 — the device page (/)
   All geometry lifted verbatim from design/source/KQ-01
   Wireframes.dc.html: shell 360×640 at 50%/46%, radius 18,
   chamfer inset 7px r12, screen 378px r11 in a 4px bezel r15,
   controls row 200px `74px 1fr 74px`, D-pad 160 (mobile 220).
   ============================================================ */

html,body{height:100%}
body.kq-page{overflow:hidden}

/* -- the stage: full-viewport paper studio sweep --------------- */
.kq-stage{
  position:fixed;
  inset:0;
  background-color:var(--paper);
  background-image:var(--paper-sweep);
}

/* ============================================================
   THE SHELL
   .kq-body positions · .kq-body-inner is the metal (tilt layer)
   .kq-drop-shadow carries the soft drop for tilt parallax (D8 §4)
   ============================================================ */
.kq-body{
  position:absolute;
  left:50%;
  top:46%;
  width:360px;
  height:640px;
  transform:translate(-50%,-50%);
  perspective:1000px;             /* D8 body layer */
}

.kq-drop-shadow{
  position:absolute;
  inset:0;
  border-radius:18px;
  box-shadow:var(--shadow-device-drop);
  pointer-events:none;
}

.kq-body-inner{
  position:absolute;
  inset:0;
  background:var(--body-face);
  border-radius:18px;
  box-shadow:var(--shadow-device-step);
  padding:14px 16px 0;
  transform-style:preserve-3d;
  will-change:transform;
}

.kq-chamfer{
  position:absolute;
  inset:7px;
  border:1px solid var(--hair-chamfer);
  border-radius:12px;
  pointer-events:none;
}

/* warm start (returning to an on device): no idle flash before JS renders */
.kq-warm .scr-idle{display:none}

/* the device shows focus through its selection fill and press states —
   the site-wide orange focus ring would double it */
#kq-screen :focus-visible,
.kq-controls :focus-visible{outline:none}

/* -- recessed screen bezel ------------------------------------- */
.kq-bezel{
  margin-top:25px;   /* absorbs the removed LED row so the face keeps its balance */
  background:var(--body-step);
  border:1px solid var(--hair-recess);
  border-radius:15px;
  padding:4px;
}
.kq-screen{
  height:378px;
  background-color:var(--screen);
  border-radius:11px;
  position:relative;
  overflow:hidden;
  font-variant-numeric:tabular-nums;
}

/* -- controls row: BACK · D-pad · INDEX ------------------------ */
.kq-controls{
  height:200px;
  display:grid;
  grid-template-columns:74px 1fr 74px;
  align-items:center;
  padding:0 4px;
}
.kq-key{
  position:relative;
  width:64px;height:24px;
  background:var(--body-step);
  border:1px solid var(--hair);
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:500;letter-spacing:0.12em;color:var(--grey-1);
  text-decoration:none;   /* BACK (button) and INDEX (link) read identically */
  cursor:pointer;
}
.kq-key:hover{text-decoration:none;color:var(--grey-1)}
.kq-key--back{justify-self:start}
.kq-key--index{justify-self:end}

/* -- hardware button states: shade on hover, press on click ---- */
.kq-key::after,.kq-centre::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:transparent;pointer-events:none;
}
/* hover shades only where hover exists — on touch, :hover sticks after
   the tap and buttons would look permanently pressed */
@media (hover:hover){
  .kq-key:hover::after{background:rgba(var(--ink-rgb),0.07)}
  .kq-centre:hover::after{background:rgba(var(--ink-rgb),0.08)}
}
.kq-key:active::after{background:rgba(var(--ink-rgb),0.14)}
.kq-key:active{transform:translateY(1px)}
.kq-centre{cursor:pointer;transition:transform .08s ease}
.kq-centre:active::after{background:rgba(var(--ink-rgb),0.16)}
.kq-centre:active{transform:scale(0.94)}

/* navigation cluster: recessed plate + 4 keys + OK centre */
.kq-dial{
  position:relative;
  width:160px;height:160px;
  margin:0 auto;
  perspective:620px;              /* D8 dial layer */
}
.kq-dial-inner{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.kq-dial-plate{
  position:absolute;inset:0;
  background:var(--body-step);
  border:1px solid var(--hair-recess);
  border-radius:30px;
}
/* engraved marks are exempt from tilt: counter-rotated by tilt.js */
.kq-mark{display:inline-block;will-change:transform}
/* SVG arrows: block display kills the inline baseline gap */
.kq-nav svg,.scr-pager .pg-arrow svg{display:block;margin:0 auto}
.kq-centre{
  position:absolute;left:58px;top:58px;width:44px;height:44px;
  border-radius:50%;
  background:var(--accent);
  border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;
}
/* engraved OK — ink on the accent (4.7:1); tilt counter-rotates it like every mark */
.kq-centre .kq-mark{font-size:8px;font-weight:500;letter-spacing:0.12em;color:var(--ink)}
.kq-dial--mobile{display:none}

/* -- navigation-key variant (replaces the cross) --------------- */
.kq-nav{
  position:absolute;
  background:var(--body-face);
  border:1px solid var(--hair);
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;color:var(--grey-1);
  cursor:pointer;
}
.kq-nav::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:transparent;pointer-events:none;
}
/* engraved collar ring around every button (as on the original centre).
   pointer-events stays on: the ring is part of the button's hit area,
   so clicks on it are never dead. */
.kq-nav::before{
  content:"";position:absolute;inset:-4px;
  border:1px solid var(--hair);border-radius:11px;
}
.kq-centre::before{
  content:"";position:absolute;inset:-6px;
  border:1px solid var(--hair);border-radius:50%;
}
@media (hover:hover){
  .kq-nav:hover::after{background:rgba(var(--ink-rgb),0.07)}
}
.kq-nav:active::after{background:rgba(var(--ink-rgb),0.14)}
.kq-nav:active{transform:translateY(1px)}
.kq-nav--up{left:58px;top:14px;width:44px;height:34px}
.kq-nav--down{left:58px;top:112px;width:44px;height:34px}
.kq-nav--left{left:14px;top:58px;width:34px;height:44px}
.kq-nav--right{left:112px;top:58px;width:34px;height:44px}

/* ============================================================
   ON-SCREEN UI (shared bits)
   ============================================================ */
.scr{position:absolute;inset:0;display:flex;flex-direction:column;padding:16px}
.scr--flush{padding:0}

.scr-status{
  font-size:9.5px;font-weight:500;letter-spacing:0.12em;
  color:rgba(var(--screen-text-rgb),0.65);
  padding-bottom:10px;
  border-bottom:1px solid rgba(var(--screen-text-rgb),0.14);
  flex:none;
}

/* D1 idle */
.scr-idle{align-items:center;justify-content:center}
.scr-idle-caption{
  font-size:11px;font-weight:500;letter-spacing:0.22em;
  color:rgba(var(--screen-text-rgb),0.5);
}

/* D2 boot */
.scr-boot{align-items:center;justify-content:center;gap:20px}
.scr-boot-bar{display:flex}
.scr-boot-on{
  height:9px;
  background:repeating-linear-gradient(90deg, var(--screen-hi) 0, var(--screen-hi) 3px, transparent 3px, transparent 9px);
}
.scr-boot-off{
  height:9px;
  background:repeating-linear-gradient(90deg, rgba(var(--screen-text-rgb),0.22) 0, rgba(var(--screen-text-rgb),0.22) 3px, transparent 3px, transparent 9px);
}
.scr-boot-line{
  font-size:8.5px;font-weight:500;letter-spacing:0.18em;
  color:rgba(var(--screen-text-rgb),0.4);
}

/* D3 home channels */
.scr-list{margin-top:12px}
.scr-ch{
  width:100%;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 10px;
  border-bottom:1px solid rgba(var(--screen-text-rgb),0.08);
  text-align:left;
}
.scr-ch:last-child{border-bottom:0}
.scr-ch .ch-name{
  font-size:13px;font-weight:400;letter-spacing:0.06em;
  color:var(--screen-text);
}
.scr-ch .ch-sub{
  font-size:8.5px;font-weight:400;letter-spacing:0.1em;
  color:rgba(var(--screen-text-rgb),0.45);
}
.scr-ch.is-sel{background:var(--screen-hi);border-bottom-color:transparent}
.scr-ch.is-sel .ch-name,
.scr-ch.is-sel .ch-sub{color:var(--screen);font-weight:500}

/* D4 work list */
.scr-hint{
  font-size:10.5px;color:rgba(var(--screen-text-rgb),0.6);
  margin-top:10px;flex:none;
}
.scr-hint--home{margin-top:auto;text-align:center;line-height:1.7}
.scr-work{margin-top:8px}
.scr-row{
  width:100%;
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;
  padding:8.5px 10px;   /* text starts/ends where the home rows' text does */
  border-bottom:1px solid rgba(var(--screen-text-rgb),0.09);
  text-align:left;
}
.scr-row:last-child{border-bottom:0}
.scr-row .row-num{font-size:11px;font-weight:500;color:var(--screen-hi)}
.scr-row .row-name{font-size:13px;font-weight:400;color:var(--screen-text)}
.scr-row .row-year{font-size:11px;color:rgba(var(--screen-text-rgb),0.45)}
.scr-row.is-sel{background:var(--screen-hi);border-bottom-color:transparent}
.scr-row.is-sel .row-num,
.scr-row.is-sel .row-name,
.scr-row.is-sel .row-year{color:var(--screen);font-weight:500}

.scr-scrollbar{
  position:absolute;right:6px;top:92px;height:180px;width:2px;
  background:rgba(var(--screen-text-rgb),0.1);
}
.scr-scrollbar > div{
  position:absolute;left:0;width:2px;
  background:rgba(var(--screen-text-rgb),0.4);
}

/* D5 preview (full-bleed) */
.scr-crumb{
  font-size:9.5px;font-weight:500;letter-spacing:0.12em;
  color:rgba(var(--screen-text-rgb),0.65);
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(var(--screen-text-rgb),0.12);
  flex:none;
}
.scr-photo{
  flex:1;position:relative;overflow:hidden;
  background-color:var(--body-step);
  min-height:0;
}
.scr-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.scr-caption{
  padding:10px 14px 8px;font-size:11px;
  color:rgba(var(--screen-text-rgb),0.75);flex:none;
}
.scr-caption b{font-weight:700;color:var(--screen-text)}
.scr-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;flex:none}
.scr-chip{
  border:1px solid rgba(var(--screen-text-rgb),0.28);
  border-radius:3px;padding:3px 7px;
  white-space:nowrap;flex:none;   /* a chip never squashes or wraps inside */
  font-size:8px;font-weight:500;letter-spacing:0.1em;
  color:rgba(var(--screen-text-rgb),0.8);
}
.scr-open{
  padding:0 14px 8px;font-size:10.5px;
  color:rgba(var(--screen-text-rgb),0.55);flex:none;
}
.scr-pager{
  display:flex;justify-content:center;align-items:baseline;gap:12px;
  padding:0 14px 12px;font-size:11px;flex:none;
}
.scr-pager .pg-arrow{
  color:rgba(var(--screen-text-rgb),0.65);background:none;border:0;
  font-size:14px;padding:6px 14px;border-radius:4px;cursor:pointer;
}
@media (hover:hover){
  .scr-pager .pg-arrow:hover{color:rgba(var(--screen-text-rgb),0.95);background:rgba(var(--screen-text-rgb),0.08)}
}
.scr-pager .pg-count{color:rgba(var(--screen-text-rgb),0.85)}

/* About / CV / Contact / Experiments (text channels) */
.scr-bio{
  margin-top:12px;overflow-y:auto;min-height:0;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--screen-text-rgb),0.3) rgba(var(--screen-text-rgb),0.08);
  /* scroll the text by hand on touch screens */
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.scr-bio p{
  font-size:11px;line-height:1.6;
  color:rgba(var(--screen-text-rgb),0.75);
  margin:0 0 12px;
}

.scr-link{
  width:100%;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 10px;
  border-bottom:1px solid rgba(var(--screen-text-rgb),0.08);
  text-align:left;text-decoration:none;
}
.scr-link:hover{text-decoration:none}
.scr-link .lk-label{
  font-size:10px;font-weight:500;letter-spacing:0.12em;
  color:var(--screen-hi);
}
.scr-link .lk-value{font-size:11px;color:rgba(var(--screen-text-rgb),0.75)}
.scr-link.is-sel{background:var(--screen-hi)}
.scr-link.is-sel .lk-label,
.scr-link.is-sel .lk-value{color:var(--screen);font-weight:500}

.scr-note{
  margin-top:12px;font-size:10.5px;letter-spacing:0.1em;
  color:rgba(var(--screen-text-rgb),0.45);
}

/* contact: summary + rows in one scrollable pane (small screens) */
.scr-scroll{
  flex:1;min-height:0;overflow-y:auto;
  touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--screen-text-rgb),0.3) rgba(var(--screen-text-rgb),0.08);
}
.scr-bio--brief{flex:none;overflow:visible;margin-top:12px;padding-right:0}
/* RECOGNITION block at the end of About */
.scr-recog{
  margin-top:14px;padding-top:10px;
  border-top:1px solid rgba(var(--screen-text-rgb),0.12);
}
.scr-recog-head{
  font-size:9.5px;font-weight:500;letter-spacing:0.12em;
  color:rgba(var(--screen-text-rgb),0.65);
  margin-bottom:6px;
}
.scr-recog-row{
  font-size:11px;line-height:1.6;
  color:rgba(var(--screen-text-rgb),0.85);
}

/* D9 snake */
.scr-field{
  flex:1;margin-top:12px;min-height:0;
  border:1px solid rgba(var(--screen-text-rgb),0.14);
  position:relative;overflow:hidden;
}
.scr-field canvas{position:absolute;left:0;top:0}
.scr-dead{
  position:absolute;inset:0;background:var(--screen);
  display:flex;align-items:center;justify-content:center;
}
.scr-dead-inner{width:204px}
.scr-dead-title{
  font-size:15px;font-weight:700;letter-spacing:0.2em;
  color:var(--screen-text);text-align:center;
}
.scr-dead-score{
  margin-top:6px;font-size:9px;font-weight:500;letter-spacing:0.14em;
  color:rgba(var(--screen-text-rgb),0.6);text-align:center;
}
.scr-dead-actions{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.scr-dead-share{
  background:var(--screen-hi);color:var(--screen);
  font-size:9.5px;font-weight:700;letter-spacing:0.12em;
  text-align:center;padding:9px 0;width:100%;
}
.scr-dead-restart{
  border:1px solid rgba(var(--screen-text-rgb),0.28);
  color:rgba(var(--screen-text-rgb),0.8);
  font-size:9.5px;font-weight:500;letter-spacing:0.12em;
  text-align:center;padding:8px 0;width:100%;
}
.scr-dead-note{
  margin-top:10px;font-size:8px;font-weight:500;letter-spacing:0.1em;
  color:rgba(var(--screen-text-rgb),0.45);text-align:center;
}

/* ============================================================
   CORNER FURNITURE (paper, D1–D5/D9; desktop only)
   ============================================================ */
.kq-changelog{position:absolute;left:26px;bottom:22px}
.kq-fur-head{
  font-size:8.5px;font-weight:700;letter-spacing:0.14em;
  color:var(--grey-2);margin-bottom:6px;
}
.kq-changelog-list{
  font-size:9px;letter-spacing:0.1em;color:var(--grey-2);line-height:1.9;
}
.kq-legend{
  position:absolute;right:26px;top:50%;
  transform:translateY(-50%);text-align:right;
}
.kq-legend .kq-fur-head{margin-bottom:8px;font-size:11px}
.kq-legend-rows{
  font-size:11px;letter-spacing:0.12em;color:var(--grey-2);line-height:2;
}
.kq-copyright{
  position:absolute;left:30%;right:30%;bottom:22px;text-align:center;
  font-size:9px;letter-spacing:0.14em;color:var(--grey-2);
}
@media (max-width:980px){
  .kq-changelog,.kq-legend{display:none}
}

/* -- the projector: pages open in an overlay frame, the URL never
      changes and the device stays alive underneath ---------------- */
.kq-projector{
  position:fixed;inset:0;z-index:20;
  opacity:0;transition:opacity .18s ease;
  overflow:auto;                       /* iOS expands iframes to content height — wrapper scrolls */
  -webkit-overflow-scrolling:touch;
  background:var(--card);
}
.kq-projector.is-open{opacity:1}
.kq-projector iframe{
  width:100%;height:100%;border:0;display:block;
  background:var(--card);
}

/* -- no-JS escape hatch --------------------------------------- */
.kq-noscript{
  position:absolute;
  left:50%;top:22px;transform:translateX(-50%);
  z-index:9;
  background:var(--card);
  border:1px solid var(--hair);
  padding:10px 16px;
  font-size:11px;font-weight:500;letter-spacing:0.12em;color:var(--grey-1);
  white-space:nowrap;
}

/* ============================================================
   FIT & MOBILE (M1 — the phone IS the device)
   ============================================================ */
/* big screens: the work leads — same scale machinery, upward */
@media (min-width:1200px) and (min-height:860px){
  .kq-body{transform:translate(-50%,-50%) scale(1.15)}
}
@media (min-width:1500px) and (min-height:1000px){
  .kq-body{transform:translate(-50%,-50%) scale(1.3)}
}
@media (max-height:740px) and (min-width:701px){
  .kq-body{transform:translate(-50%,-50%) scale(.85)}
}
@media (max-height:620px) and (min-width:701px){
  .kq-body{transform:translate(-50%,-50%) scale(.72)}
}
@media (max-height:520px) and (min-width:701px){
  .kq-body{transform:translate(-50%,-50%) scale(.58)}
}

@media (max-width:700px){
  .kq-body{
    left:0;top:0;width:100%;height:100%;
    transform:none;perspective:none;
  }
  .kq-drop-shadow{display:none}
  .kq-body-inner{
    border-radius:0;box-shadow:none;
    display:flex;flex-direction:column;
    /* no tilt on touch — a 3D rendering context here breaks native
       scrolling of the on-screen text in some mobile browsers */
    transform-style:flat;will-change:auto;
  }
  .kq-dial-inner{transform-style:flat;will-change:auto}
  .kq-mark{will-change:auto}
  .kq-chamfer{border-radius:14px;z-index:5}

  .kq-bezel{border-radius:17px;flex:none}
  .kq-screen{height:52dvh;border-radius:13px}

  .scr-status{font-size:10px}
  .scr-list{margin-top:8px}
  .scr-ch{min-height:44px;padding:0 12px}
  .scr-ch .ch-name{font-size:14px}
  .scr-ch .ch-sub{font-size:9.5px}
  .scr-row{min-height:44px;padding:0 12px}   /* highlight inset matches the home rows */
  .scr-scrollbar{top:96px;height:264px}      /* track spans the 6 × 44px rows */
  .scr-row .row-name{font-size:14px}
  .scr-link{min-height:44px}
  /* preview: pager arrows are primary controls on touch — 44px targets */
  .scr-pager{padding:0 14px 6px;align-items:center}
  .scr-pager .pg-arrow{min-width:44px;min-height:44px;font-size:13px}
  .scr-open{padding:8px 14px}
  .scr-bio p{font-size:12px}

  /* controls: dial row above a pill row (BACK left · INDEX right) — no overlap,
     pills inset from the device edge */
  .kq-controls{
    flex:1;height:auto;padding:6px 10px 22px;
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;
    row-gap:10px;
  }
  .kq-dial-slot{
    grid-column:1/3;grid-row:1;min-height:0;
    display:flex;align-items:center;justify-content:center;
  }
  .kq-key--back,.kq-key--index{
    grid-row:2;position:static;display:flex;
    width:auto;height:44px;padding:0 22px;border-radius:12px;
    font-size:10px;letter-spacing:0.14em;color:var(--ink);
  }
  .kq-key--back{grid-column:1;justify-self:start}
  .kq-key--index{grid-column:2;justify-self:end}
  .kq-dial--desktop{display:none}
  .kq-dial--mobile{
    display:block;position:relative;left:auto;top:auto;transform:none;
    width:220px;height:220px;margin:0;perspective:none;flex:none;
  }
  .kq-dial--mobile .kq-dial-plate{border-radius:40px}
  .kq-dial--mobile .kq-centre{left:80px;top:80px;width:60px;height:60px}
  .kq-dial--mobile .kq-centre .kq-mark{font-size:10px;letter-spacing:0.14em}
  .kq-dial--mobile .kq-nav{font-size:9px;border-radius:9px}
  .kq-dial--mobile .kq-nav::before{inset:-5px;border-radius:14px}
  .kq-dial--mobile .kq-nav--up{left:80px;top:18px;width:60px;height:48px}
  .kq-dial--mobile .kq-nav--down{left:80px;top:154px;width:60px;height:48px}
  .kq-dial--mobile .kq-nav--left{left:18px;top:80px;width:48px;height:60px}
  .kq-dial--mobile .kq-nav--right{left:154px;top:80px;width:48px;height:60px}

  /* short phones: keep the dial clear of the screen and pills */
  @media (max-height:730px){
    .kq-dial--mobile{transform:scale(.82)}
  }

  .kq-changelog,.kq-legend,.kq-copyright{display:none}
  .kq-noscript{white-space:normal;width:calc(100% - 48px);text-align:center}
}