/* ==========================================================================
   UP2U! / DAWCAM

   One stylesheet for every page. The design is unchanged from the mockup;
   it has only been lifted out of the single file so that six pages share
   one copy of it rather than six copies drifting apart.

   Sections are in the order the page is built: the backdrop, the
   masthead, the nav, then the blocks that sit in the white sheet, then
   dark mode for all of it at the bottom.
   ========================================================================== */

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background: #e9eaec;
  position: relative;
  padding-bottom: 64px;
}

/* ===================== THE MOSAIC VOID ===================== */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none;
  background:
    repeating-conic-gradient(rgba(180,186,192,.28) 0% 25%, transparent 0% 50%)
    0 0 / 76px 76px;
}
body::after {
  content:''; position:fixed; inset:0; pointer-events:none;
  background: linear-gradient(rgba(255,255,255,0) 0%, #ffffff 34%, #ffffff 62%, rgba(255,255,255,0) 100%);
  z-index: 1;
}
.live-tile {
  position: fixed; width: 38px; height: 38px; pointer-events: none;
  z-index: 0;
  animation: tileflip var(--dur) ease-in-out var(--delay) infinite;
  background: var(--ink);
  opacity: 0;
}
@keyframes tileflip {
  0%   { opacity: 0;   transform: perspective(260px) rotateY(88deg); }
  10%  { opacity: .9;  transform: perspective(260px) rotateY(0deg); }
  20%  { opacity: .45; transform: perspective(260px) rotateY(0deg); }
  32%  { opacity: .9;  transform: perspective(260px) rotateY(0deg); }
  46%  { opacity: 0;   transform: perspective(260px) rotateY(-88deg); }
  100% { opacity: 0;   transform: perspective(260px) rotateY(-88deg); }
}
.hero .live-tile { position: absolute; width: 30px; height: 30px; z-index: 1; }

/* SOMEBODY WHO ASKED FOR LESS MOTION GETS LESS MOTION. The flipping
   tiles, the bobbing roster and the owl are decoration; a visitor with
   vestibular trouble has told their machine to stop things like this
   moving, and honouring that costs nothing here. */
@media (prefers-reduced-motion: reduce) {
  .live-tile, .tile, .owlperch { animation: none !important; }
  .live-tile { opacity: .35; }
  * { transition-duration: .01ms !important; }
}

.page { position:relative; z-index:2; width: 760px; margin: 0 auto; }

/* NARROW SCREENS. The 760px page is what the era looked like, and it is
   kept - it just stops being wider than the phone it is on. */
@media (max-width: 820px) {
  .page { width: auto; margin: 0 12px; }
  .cascade { display: none; }

  /* THE NAV WRAPS, which it has to: six tabs and a buy button want
     about 540px and a phone has 390. Left as one unwrapped row it was
     the only thing on the site making the whole page scroll sideways.

     The spacer goes - it exists to push Buy to the right end of a row,
     and there is no right end once the row folds - and Buy takes a full
     line of its own underneath, which is where a shop button wants to
     be on a phone anyway. */
  .nav { flex-wrap: wrap; border-radius: 6px 7px 0 0; }
  .nav .item { flex: 1 0 auto; justify-content: center; padding: 10px 12px; }
  .nav .item:first-child { border-radius: 6px 0 0 0; }
  .nav .spacer { display: none; }
  .nav .buy {
    flex: 1 0 100%; border-radius: 0; justify-content: center;
    padding: 11px 20px;
    border-top: 1px solid rgba(0,0,0,.25);
  }
  .intro { flex-direction: column; }
  .heroshot { width: auto; max-width: 300px; }
  .rule, .cards { margin-left: 0 !important; }
  .player-row, .funlens, .caserow { flex-direction: column; }
  /* The hero's two halves are both absolutely positioned, so on a narrow
     screen the tagline and the scene print straight through each other.
     The scene is the one that goes: it is a caption for artwork that is
     not there yet, and the title is the half doing the work. */
  .hero { height: 112px; }
  .hero .scene { display: none; }

  .fourup { flex-wrap: wrap; }
  .fu { flex: 1 1 45%; border-right: none; margin-bottom: 18px; }
  .footer { flex-direction: column; }
  .specrow { flex-direction: column; }
  .specrow .k { width: auto; border-right: none; }
}

/* ===================== MASTHEAD ===================== */
.logotype { padding: 28px 4px 14px; display:flex; align-items:baseline; gap:9px; }
.logotype a { text-decoration:none; display:flex; align-items:baseline; gap:9px; }
.logotype .word {
  font-size: 24px; font-weight: bold; letter-spacing: -1px; color:#15181a;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.logotype .word .two { color:#f07514; }
.logotype .word .bang { color:#3f9c92; }
.logotype .tm { font-size: 9px; color:#8a949a; position:relative; top:-9px; }
.logotype .by {
  font-size: 9px; color:#8a949a; letter-spacing: 2.2px; font-weight: bold;
  text-transform: uppercase;
}

/* ===================== THE ROSTER ===================== */
.cascade { position:absolute; top: 0; right: -66px; z-index: 6; }
.tile {
  position:absolute; width: 74px; height: 74px; border-radius: 6px;
  background: #fff;
  border: 3px solid #fff;
  box-shadow:
    0 5px 8px rgba(50,62,70,.28),
    0 0 0 1px #d3d9dc,
    inset 0 -10px 8px rgba(120,140,150,.10);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size: 30px; overflow:hidden;
  animation: bob var(--bobdur, 6s) ease-in-out var(--bobdelay, 0s) infinite alternate;
}
@keyframes bob { from { translate: 0 0; } to { translate: 0 -4px; } }
.tile::after {
  content:''; position:absolute; left:6%; right:40%; top:5%; height:34%;
  background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0));
  border-radius: 6px 10px 50% 50%;
  pointer-events:none;
}
.tile.teal  { background: linear-gradient(#e7f4f1, #a5cbc6); }
.tile.plum  { background: linear-gradient(#a79dbd, #665d78); }
.tile.cream { background: linear-gradient(#fdf4e0, #e8bf88); }
.tile.sm { width: 56px; height: 56px; font-size: 20px; }
.tile .cap {
  font-size: 9px; font-weight: bold; color: rgba(20,60,55,.62);
  letter-spacing: .6px; margin-top: 2px;
}
.tile.plum .cap { color: rgba(255,255,255,.8); }

/* ===================== NAV ===================== */
.nav {
  display:flex; align-items:stretch;
  background: linear-gradient(#5fb9ae 0%, #3f9c92 46%, #348c83 54%, #2b7a72 100%);
  border-radius: 6px 7px 0 0;
  border: 1px solid #237067;
  border-bottom: none;
  box-shadow: 0 3px 4px rgba(40,90,85,.32), inset 0 1px 0 rgba(255,255,255,.45);
  position:relative; z-index:3;
}
.nav .item {
  padding: 11px 15px 10px; font-size: 11px; font-weight: bold; color:#e6f7f4;
  text-shadow: 0 -1px 0 rgba(0,40,35,.35);
  border-right: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 1px 0 0 rgba(0,50,45,.12);
  cursor:pointer;
  transition: background .15s;
  text-decoration: none; display: flex; align-items: center;
}
.nav .item:first-child { border-radius: 6px 0 0 0; }
.nav .item:hover { background: rgba(255,255,255,.10); }
.nav .item.on {
  background: linear-gradient(#8fd6cc 0%, #58b3a8 48%, #47a196 52%, #3d958b 100%);
  color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -6px 8px rgba(20,80,72,.18);
}
.nav .spacer { flex:1; border-right:none; box-shadow:none; }
.nav .buy {
  background: linear-gradient(#5a5a60 0%, #38383d 46%, #29292e 54%, #1b1b1f 100%);
  color:#fff; font-size: 11px; font-weight:bold; letter-spacing:.4px;
  display:flex; align-items:center; gap:8px;
  padding: 0 20px; border-radius: 0 7px 0 0;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 1px 0 0 rgba(0,0,0,.3);
  cursor:pointer; transition: filter .15s;
  text-decoration: none; border: none; font-family: inherit;
}
.nav .buy:hover { filter: brightness(1.18); }
.nav .buy .cam-ico { font-size: 14px; }

/* ===================== HERO BAND ===================== */
.hero {
  position:relative; height: 138px; overflow:hidden;
  background:
    linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 42%),
    repeating-conic-gradient(rgba(63,156,146,.15) 0% 25%, transparent 0% 50%)
      0 0 / 60px 60px,
    linear-gradient(100deg, #dcf1ee 0%, #b6dfd9 42%, #8ec9c1 72%, #6ab3a9 100%);
  border-left: 1px solid #cfe3e0; border-right: 1px solid #cfe3e0;
  border-bottom: 1px solid #bcd8d4;
}
.hero h1 {
  position:absolute; left: 24px; top: 24px;
  font-size: 24px; color: #17453f; font-weight: bold; letter-spacing:-.3px;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.hero .kick {
  position:absolute; left: 25px; top: 54px;
  font-size: 9px; font-weight:bold; letter-spacing: 1.6px; color:#2a6d64;
}
.hero .scene {
  position:absolute; right: 0; top: 0; bottom:0; width: 46%;
  background: linear-gradient(105deg, transparent 0%, rgba(30,74,68,.28) 30%, rgba(23,60,55,.45) 100%);
  display:flex; align-items:center; justify-content:center;
  color:#eafaf7; font-size: 10px; text-align:center; line-height:1.6;
}
.hero .mark {
  position:absolute; right: 14px; bottom: 10px;
  font-size: 12px; font-weight:bold; color:#fff;
  background: rgba(23,60,55,.35);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px; padding: 2px 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ===================== THE SHEET ===================== */
.sheet {
  background:#fff; padding: 28px 24px 36px;
  border-left: 1px solid #dfe4e6; border-right: 1px solid #dfe4e6;
  box-shadow: 0 5px 8px rgba(75,88,98,.16);
}

.intro { display:flex; gap: 28px; }
/* 312px. It went 252 -> 340, which was a touch tight against the copy;
   this gives the cartridge room to breathe on both sides while staying
   well above where it started. The canvas fills the slot, so the object
   itself scales with this number. */
.heroshot { width: 312px; flex:none; }

.heroshot .plugin {
  aspect-ratio: 4/4.4; border-radius: 6px;
  background: linear-gradient(160deg, #857b99 0%, #6b6280 40%, #4c455a 100%);
  border: 4px solid #2d273a;
  display:flex; align-items:center; justify-content:center;
  color:#d4cee0; font-size: 10px; text-align:center; line-height:1.6;
  box-shadow:
    0 12px 8px rgba(55,55,85,.30),
    inset 0 1px 0 rgba(255,255,255,.45);
  position:relative; overflow:hidden;
}
.heroshot .plugin img { width:100%; height:100%; object-fit:cover; display:block; }

/* The 3D cartridge fills the slot. The placeholder's flex centring is what
   positions its text, and a canvas dropped into a centred flex row gets
   shrunk to its content rather than filling - hence the explicit size.
   position:relative keeps the ::after glare sitting over it. */
.heroshot .plugin canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border-radius: 6px;
}
/* The id is on the live slot, so these do not depend on :has() being
   supported. Without them an older browser keeps the placeholder's purple
   gradient and 4px border as a frame around the cartridge, plus the glare
   streak - cosmetic rather than broken, but easy to just not have. */
#canvas-holder.plugin {
  display: block;
  position: relative;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
#canvas-holder.plugin::after { display: none; }

.heroshot .plugin:has(canvas) {
  display: block;
  position: relative;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* The diagonal glare belongs to the flat placeholder. Over a rotating 3D
   object it reads as a smear stuck to the screen rather than light on the
   thing - the cartridge does its own highlights. */
.heroshot .plugin:has(canvas)::after { display: none; }
.heroshot .plugin::after {
  content:''; position:absolute; left:-20%; top:-55%; width:55%; height:175%;
  background: linear-gradient(105deg, rgba(255,255,255,.14), rgba(255,255,255,0) 65%);
  transform: rotate(9deg); pointer-events:none;
}
/* The reflection is gone. It was a gradient slab faking a surface under a
   FLAT placeholder image; under a cartridge that hovers, tilts and swings
   it stayed rigidly put, which read as a panel sitting below the object
   rather than as its reflection. */
/* Narrower on purpose: a shorter measure runs the paragraph further down
   the page, so it sits beside the cartridge instead of stopping short and
   leaving a hole under it. ~54 characters a line, still inside the
   comfortable 45-75 band. */
.intro .copy {
  font-size: 11px; line-height: 1.85; color:#3a4145; padding-top: 8px;
  max-width: 300px;
}
.intro .copy b { color:#17453f; }
.intro .copy a { color: #1a7fae; }
.intro .copy a:hover { color:#f07514; }

/* Full width by default. The 276px indent here was sized to clear the old
   252px hero slot; every .rule on every page now carries .wide to cancel
   it, which made the indent dead code that only waited to catch out the
   next section added without the modifier. .wide is kept so existing
   markup stays valid. */
.rule {
  margin: 30px 0 18px; margin-left: 0;
  display:flex; align-items:center; gap: 12px;
}
.rule::before, .rule::after { content:''; flex:1; height:1px; background:#e4e9eb; }
.rule span { font-size: 9px; font-weight:bold; letter-spacing: 1.8px; color:#9aa4aa; }
.rule.wide { margin-left: 0; }

/* Full width, like every other section below it. The 276px indent was
   sized to clear the OLD 252px slot and align under the copy - a
   hardcoded number that silently went wrong the moment the slot resized,
   and it left this one section inset while SEE IT IN ACTION and the rest
   ran edge to edge. */
.cards { display:flex; gap: 24px; margin-left: 0; }
.card { flex:1; }
.card .shot {
  aspect-ratio: 16/10.5; border-radius: 6px; overflow:hidden;
  border: 4px solid #fff;
  outline: 1px solid #d5dadd;
  box-shadow: 0 6px 8px rgba(75,88,98,.22);
  display:flex; align-items:center; justify-content:center;
  font-size: 10px; color:#fff; text-align:center; line-height:1.6;
  transition: transform .18s, box-shadow .18s;
  position: relative;
}
.card:hover .shot { transform: translateY(-2px); box-shadow: 0 9px 8px rgba(75,88,98,.3); }
.card.full .shot { background: linear-gradient(140deg, #63beb3, #2b7a72); }
.card.demo .shot { background: linear-gradient(140deg, #a198b8, #514963); }
.card b { display:block; font-size: 12px; color:#15181a; margin-top: 11px; }
.card b .price { color:#c25400; }
.card p { font-size: 10px; line-height: 1.7; color:#4a5257; margin-top: 4px; }
.card .learn {
  position:relative;
  display:inline-flex; align-items:center; gap:7px;
  margin-top: 10px;
  background: linear-gradient(#4a4a50 0%, #2c2c31 46%, #1e1e23 54%, #121215 100%);
  color:#fff; font-size: 10px; font-weight:bold;
  border-radius: 6px; padding: 7px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(0,0,0,.28);
  cursor:pointer; transition: filter .15s; overflow:hidden;
  text-decoration:none; border:none; font-family: inherit;
}
.card .learn::after {
  content:''; position:absolute; left:6%; right:6%; top:1px; height:44%;
  background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,0));
  border-radius: 6px 10px 45% 45%;
}
.card .learn:hover { filter: brightness(1.25); }
.card .learn .arr { color:#7accc2; }
.card.demo .learn .arr { color:#c3b7dd; }

/* A BUTTON WITH NOWHERE TO GO SAYS SO. Config leaves links empty until
   the product exists, and a dead black pill that swallows clicks is the
   worst of the three options - worse than hiding it, worse than this. */
.learn.pending, .nav .buy.pending { filter: grayscale(.75) brightness(.85); cursor: default; }
.learn.pending:hover, .nav .buy.pending:hover { filter: grayscale(.75) brightness(.85); }

/* ===================== FOUR-UP ===================== */
.fourup { display:flex; margin-top: 42px; border-top: 1px solid #eceff0; padding-top: 28px; }
.fu { flex:1; text-align:center; padding: 0 14px; border-right: 1px solid #eceff0; }
.fu:last-child { border-right:none; }
.fu .chip {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 6px;
  display:flex; align-items:center; justify-content:center; font-size: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 4px rgba(75,88,98,.22);
  position:relative; overflow:hidden;
}
.fu .chip::after {
  content:''; position:absolute; left:8%; right:38%; top:6%; height:36%;
  background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0));
  border-radius: 6px 8px 50% 50%;
}
.fu .chip.c1 { background: linear-gradient(#ffd9a8, #f0a24d); border:1px solid #d98d33; }
.fu .chip.c2 { background: linear-gradient(#9fd8d0, #4fa79c); border:1px solid #3d887e; }
.fu .chip.c3 { background: linear-gradient(#c9c0dd, #837798); border:1px solid #6b6080; }
.fu .chip.c4 { background: linear-gradient(#f7e6b9, #e0bc62); border:1px solid #c6a248; }
.fu b { display:block; font-size: 10px; color:#2c3438; margin-top: 10px; }
.fu p { font-size: 9px; color:#5a6368; line-height: 1.65; margin-top: 4px; }
.fu a { display:inline-block; font-size: 10px; font-weight:bold; color:#c25400;
        margin-top: 8px; text-decoration:none; }
.fu a:hover { text-decoration: underline; }
.fu a .arr { color:#f07514; }

/* ---- the newsletter, which is a form now ---- */
.nlform { margin-top: 8px; display:flex; gap: 5px; }
.nlform input {
  flex:1; min-width:0; font-family: inherit; font-size: 9px;
  padding: 5px 7px; border-radius: 3px;
  border: 1px solid #c2ced2; background:#fff; color:#2c3438;
  box-shadow: inset 0 1px 2px rgba(75,88,98,.14);
}
.nlform input:focus { outline:none; border-color:#3f9c92;
                      box-shadow: inset 0 1px 2px rgba(75,88,98,.14), 0 0 0 2px rgba(63,156,146,.2); }
.nlform button {
  font-family: inherit; font-size: 9px; font-weight:bold; color:#fff;
  padding: 5px 10px; border-radius: 3px; cursor:pointer;
  background: linear-gradient(#ff9d4d, #f07514 55%, #d95f00);
  border: 1px solid #a54800;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
}
.nlform button:hover { filter: brightness(1.1); }
.nlnote { font-size: 9px; color:#8a949a; margin-top: 6px; line-height:1.5; }
.nlnote.good { color:#2b7a72; font-weight:bold; }
.nlnote.bad  { color:#c25400; font-weight:bold; }

/* ===================== FOOTER ===================== */
.footer {
  background: linear-gradient(#f5f6f7 0%, #e8ebed 55%, #dde1e4 100%);
  border: 1px solid #d3d9dc; border-top: 1px solid #e6e9eb;
  border-radius: 0 0 9px 9px;
  padding: 20px 24px 26px;
  display:flex; gap: 24px; align-items:flex-start;
  box-shadow: 0 5px 8px rgba(75,88,98,.16), inset 0 1px 0 #fff;
}
.pill {
  border: 2px solid #a5afb5; border-radius: 6px; padding: 6px 16px;
  font-size: 12px; font-weight: bold; color: #79838a;
  background: linear-gradient(#ffffff, #eef1f2);
  text-shadow: 0 1px 0 #fff; flex:none;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(75,88,98,.18);
}
.footlinks { flex:1; }
.footlinks .row1 { font-size: 10px; color:#38424a; font-weight:bold; }
.footlinks .row1 span { font-weight:normal; color:#8a949a; margin: 0 4px; }
.footlinks .row1 a { color:#1a7fae; text-decoration:none; }
.footlinks .row1 a:hover { color:#f07514; }
.footlinks .legal { font-size: 9px; color:#8a949a; line-height: 1.75; margin-top: 9px; }
.footlinks .legal b { color:#6b757c; }
.badge {
  flex:none; width: 122px; text-align:center;
  border: 1px solid #aab6bc; border-radius: 3px; background:#fff; overflow:hidden;
  font-size: 9px; color:#345;
  box-shadow: 0 2px 4px rgba(75,88,98,.2);
  text-decoration: none; display:block;
}
.badge .top { background:linear-gradient(#2a6fd4,#1a4fae); color:#fff;
              font-weight:bold; font-size: 9px; padding: 4px 0; letter-spacing:.3px; }
.badge .mid { background:linear-gradient(#ffd76e,#ffb347); font-weight:bold; font-size: 10px;
              color:#5a3b00; padding: 5px 0; text-shadow:0 1px 0 rgba(255,255,255,.5); }
.badge .bot { padding: 4px 0; color:#8a949a; letter-spacing:.2px; }

/* ===================== DAY / NIGHT KEY ===================== */
.modekey {
  position: fixed; top: 14px; right: 16px; z-index: 20;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(#fdfeff, #e2e9ec 55%, #cfd8dc);
  border: 1px solid #aab6bc;
  box-shadow: inset 0 1px 0 #fff, 0 3px 4px rgba(60,70,80,.3);
  display:flex; align-items:center; justify-content:center;
  font-size: 20px; cursor: pointer; user-select:none;
  transition: filter .15s;
}
.modekey:hover { filter: brightness(1.06); }

/* ===================== THE 2010 PLAYER ===================== */
.card .shot .pb {
  position:absolute; right:8px; bottom:8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(#ffffff, #d8e2e5 55%, #c2ced2);
  border: 1px solid rgba(30,50,55,.35);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.card .shot .pb::after {
  content:''; margin-left:2px;
  border-left: 9px solid #2c3438;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

.player-row { display:flex; gap: 16px; }

.player { flex: 2.15; min-width: 0; }
.player .pscreen {
  aspect-ratio: 16/9; position: relative;
  background: radial-gradient(ellipse at 50% 40%, #2c3038, #191b20 75%);
  border: 1px solid #101216;
  border-radius: 6px 7px 0 0;
  display:flex; align-items:center; justify-content:center;
  color:#7c848e; font-size: 10px; text-align:center; line-height:1.7;
  overflow:hidden;
}
/* The still that stands in until somebody presses play. A real
   thumbnail when there is a video id, the old gradient when there is
   not. */
.player .pscreen .poster {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; border:none;
}
.player .pscreen iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.player .pscreen .bigplay {
  position:absolute;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(#6ecabf 0%, #3f9c92 48%, #33887e 52%, #256b62 100%);
  border: 2px solid rgba(255,255,255,.5);
  box-shadow: 0 4px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: transform .15s, filter .15s;
  padding:0;
}
.player .pscreen .bigplay:hover { transform: scale(1.07); filter: brightness(1.12); }
.player .pscreen .bigplay::after {
  content:''; margin-left: 5px;
  border-left: 20px solid #fff;
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.player .pscreen .titlecard {
  position:absolute; left:10px; top:10px;
  font-size: 9px; font-weight:bold; color:#cfd6dc;
  background: rgba(10,12,15,.6); border:1px solid rgba(255,255,255,.14);
  border-radius: 3px; padding: 3px 8px; letter-spacing:.4px;
  z-index: 2;
}

.player .pbar {
  display:flex; align-items:center; gap: 10px;
  height: 34px; padding: 0 10px;
  background: linear-gradient(#4b4f57 0%, #33363d 46%, #26282e 54%, #1a1c21 100%);
  border: 1px solid #101216; border-top: none;
  border-radius: 0 0 7px 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.player .pbar .p { width:0; height:0;
  border-left: 11px solid #e8ecef;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.4)); flex:none; cursor:pointer; }
.player .scrub { flex:1; height: 9px; border-radius: 3px;
  background: #101216; border: 1px solid #0a0b0e;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7); position:relative; }
.player .scrub .buf { position:absolute; left:0; top:0; bottom:0; width: 52%;
  background: #3a3e46; border-radius: 3px; }
.player .scrub .fill { position:absolute; left:0; top:0; bottom:0; width: 23%;
  background: linear-gradient(#7accc2, #3f9c92); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.player .scrub .nub { position:absolute; left: 23%; top:50%;
  width: 13px; height: 13px; border-radius:50%; translate: -50% -50%;
  background: linear-gradient(#ffffff, #cfd8dc);
  border: 1px solid #7a848a; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.player .ptime { font-size: 9px; color:#b9c0c7; flex:none;
  font-family: Verdana, monospace; }
.player .hd { font-size: 9px; font-weight:bold; color:#0e1113; flex:none;
  background: linear-gradient(#ffd76e, #ffb347); border-radius: 3px;
  padding: 2px 5px; border: 1px solid #c68a20;
  text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.player .vol { display:flex; align-items:flex-end; gap: 2px; flex:none; height: 12px; }
.player .vol i { width: 3px; background:#7accc2; border-radius: 3px; display:block; }
.player .vol i:nth-child(1){height:4px} .player .vol i:nth-child(2){height:7px}
.player .vol i:nth-child(3){height:10px} .player .vol i:nth-child(4){height:12px; background:#3a3e46;}
.player .fs { flex:none; width: 12px; height: 12px; cursor:pointer;
  border: 2px solid #b9c0c7; border-radius: 3px; position:relative; }

.rail { flex: 1; display:flex; flex-direction:column; gap: 9px; min-width:0; }
.rail .rhead { font-size: 9px; font-weight:bold; letter-spacing: 1.4px; color:#9aa4aa; }
.thumb {
  display:flex; gap: 9px; align-items:center;
  border: 1px solid #dfe4e6; border-radius: 6px;
  background: linear-gradient(#ffffff, #f4f6f7);
  padding: 6px; cursor:pointer;
  box-shadow: 0 2px 4px rgba(75,88,98,.12);
  transition: border-color .15s, background .15s;
  text-align: left; font-family: inherit; width: 100%;
}
.thumb:hover { border-color:#7db8d2; }
.thumb.on { border-color:#3f9c92;
  background: linear-gradient(#eef7f5, #ddefeb);
  box-shadow: 0 2px 4px rgba(63,156,146,.22); }
.thumb .pic {
  width: 62px; height: 36px; flex:none; border-radius: 3px; position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.thumb .pic img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb .pic::after { content:'';
  position:absolute;
  border-left: 8px solid rgba(255,255,255,.9);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.thumb .pic .len { position:absolute; right:2px; bottom:2px;
  font-size: 9px; color:#fff; background: rgba(0,0,0,.65);
  border-radius: 3px; padding: 1px 3px; z-index:2; }
.thumb .pic.v1 { background: linear-gradient(140deg, #63beb3, #2b7a72); }
.thumb .pic.v2 { background: linear-gradient(140deg, #a198b8, #514963); }
.thumb .pic.v3 { background: linear-gradient(140deg, #f0c987, #cf9440); }
.thumb .pic.v4 { background: linear-gradient(140deg, #9fb6c9, #5b7488); }
.thumb .tt { min-width: 0; }
.thumb .tt b { display:block; font-size: 9px; color:#2c3438; }
.thumb .tt span { font-size: 9px; color:#8a949a; }

/* ===================== SOYOUNG, RESIDENT ===================== */
.owlperch {
  position:absolute; top: -34px; right: 120px; z-index: 7;
  font-size: 24px; cursor: pointer; user-select:none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
  animation: perchbob 4.5s ease-in-out infinite alternate;
  background:none; border:none; padding:0;
}
@keyframes perchbob { from { translate:0 0; } to { translate:0 -3px; } }
.owlbubble {
  position:absolute; top: -78px; right: 40px; z-index: 8;
  width: 210px;
  background: linear-gradient(#f6ead2, #ead9b8);
  border: 1px solid #b89d6e; border-radius: 6px;
  padding: 8px 11px;
  font-size: 9px; color: #4a3c22; line-height: 1.55;
  box-shadow: 0 4px 8px rgba(60,50,30,.3), inset 0 1px 0 rgba(255,255,255,.45);
  display: none;
}
.owlbubble::after {
  content:''; position:absolute; right: 78px; bottom: -8px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 8px solid #ead9b8;
  filter: drop-shadow(0 1px 0 #b89d6e);
}
.owlbubble b { color:#8a5a10; }

/* ===================== THE ELEVEN ===================== */
.lensrow { display:flex; gap: 7px; justify-content:space-between; flex-wrap: wrap; }
.lenskey {
  flex:1; text-align:center; padding: 9px 2px 7px; min-width: 58px;
  background: linear-gradient(#fdfeff 0%, #eef3f5 48%, #dfe7ea 52%, #d3dde1 100%);
  border: 1px solid #b9c6cc; border-radius: 6px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(75,88,98,.16);
  cursor: pointer;
  transition: transform .14s, box-shadow .14s, border-color .14s;
  text-decoration: none; display:block;
}
.lenskey:hover {
  transform: translateY(-3px);
  border-color:#3f9c92;
  box-shadow: inset 0 1px 0 #fff, 0 5px 4px rgba(63,156,146,.28);
}
.lenskey .g { font-size: 17px; display:block; }
.lenskey .n { font-size: 9px; font-weight:bold; color:#3a4a52; letter-spacing:.2px;
              display:block; margin-top: 4px; }
.lenscap { text-align:center; font-size: 9px; color:#8a949a; margin-top: 10px; }
.lenscap b { color:#c25400; }

/* ===================== FROM THE ALBUM ===================== */
.albumrow { display:flex; justify-content:center; gap: 20px; padding: 6px 0 4px; flex-wrap:wrap; }
.polaroid {
  background:#fff; padding: 7px 7px 22px;
  border: 1px solid #d8dde0;
  box-shadow: 0 5px 8px rgba(75,88,98,.24);
  position: relative;
  transition: transform .16s, box-shadow .16s;
}
.polaroid:hover { transform: scale(1.05) rotate(0deg) !important; z-index: 4;
                  box-shadow: 0 8px 8px rgba(75,88,98,.34); }
.polaroid .ph {
  width: 128px; height: 96px;
  display:flex; align-items:center; justify-content:center;
  font-size: 9px; color:#fff; text-align:center; line-height:1.5;
}
.polaroid .cap {
  position:absolute; left:0; right:0; bottom: 5px;
  text-align:center; font-size: 9px; color:#6b757c;
  font-family: "Comic Sans MS", "Marker Felt", cursive;
}
.polaroid .tape {
  position:absolute; top: -7px; left: 50%; translate: -50% 0; rotate: -4deg;
  width: 44px; height: 14px;
  background: rgba(240,230,180,.75);
  border-left: 1px dashed rgba(150,130,60,.4);
  border-right: 1px dashed rgba(150,130,60,.4);
}
.polaroid .ph.p1 { background: linear-gradient(140deg,#63beb3,#2b7a72); }
.polaroid .ph.p2 { background: linear-gradient(140deg,#a198b8,#514963); }
.polaroid .ph.p3 { background: linear-gradient(140deg,#f0c987,#cf9440); }
.polaroid .ph.p4 { background: linear-gradient(140deg,#9fb6c9,#5b7488); }

/* ===================== BADGE CASE + NEWS ===================== */
.caserow { display:flex; gap: 18px; }
.halfmod { flex:1; min-width:0; }
.halfmod .mh {
  font-size: 10px; font-weight:bold; color:#fff; letter-spacing:.6px;
  background: linear-gradient(#6ecabf 0%, #3f9c92 48%, #33887e 52%, #256b62 100%);
  border: 1px solid #1f6e65; border-radius: 6px 7px 0 0;
  padding: 7px 11px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.halfmod .mb {
  border: 1px solid #cfd9dd; border-top: none; border-radius: 0 0 7px 7px;
  background: repeating-linear-gradient(0deg, #ffffff 0 3px, #f6fafb 3px 6px);
  padding: 12px;
}
.badgegrid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bslot {
  aspect-ratio: 1; border-radius: 6px;
  display:flex; align-items:center; justify-content:center; font-size: 20px;
  background: linear-gradient(#fdf4e0, #ecd9ae);
  border: 1px solid #cdb277;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 2px rgba(120,100,50,.18);
}
.bslot.locked {
  background: linear-gradient(#3a3e45, #26292e);
  border-color:#1c1e22;
  color:#6b7178; font-size: 14px; font-weight:bold;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
.badgenote { font-size: 9px; color:#8a949a; margin-top: 9px; text-align:center; }

.newsitem2 { display:flex; gap: 10px; align-items:baseline;
             padding: 7px 2px; border-bottom: 1px dotted #d8dde0; }
.newsitem2:last-child { border-bottom:none; }
.newsitem2 .d { font-size: 9px; color:#8a949a; flex:none; width: 52px;
                font-family: Verdana, monospace; }
.newsitem2 .t { font-size: 10px; color:#2c3438; min-width:0; }
.newsitem2 .t a { color:#1a7fae; text-decoration:none; font-weight:bold; }
.newsitem2 .t a:hover { color:#c25400; }
.newchip {
  display:inline-block; font-size: 9px; font-weight:bold; color:#fff;
  background: linear-gradient(#ff9d4d, #f07514 55%, #d95f00);
  border: 1px solid #a54800; border-radius: 3px;
  padding: 1px 4px; margin-left: 5px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  vertical-align: 1px;
}

/* ===================== TECH SPECS ===================== */
.specs { border: 1px solid #cfd9dd; border-radius: 6px; overflow:hidden; }
.specrow { display:flex; font-size: 10px; }
.specrow:nth-child(odd) { background:#f6fafb; }
.specrow:nth-child(even) { background:#fff; }
.specrow .k {
  width: 170px; flex:none; padding: 8px 12px;
  font-weight:bold; color:#20627e;
  background: rgba(63,156,146,.06);
  border-right: 1px solid #e4ebee;
}
.specrow .v { padding: 8px 12px; color:#3a4145; line-height: 1.6; }
.specrow .v b { color:#c25400; }

/* ===================== FUN WITH LENSES ===================== */
.funlens { display:flex; gap: 24px; align-items:flex-start; }
.bigwin { flex: 1.08; min-width: 0; border-radius: 6px; overflow:hidden;
          border: 4px solid #2d273a;
          box-shadow: 0 12px 8px rgba(55,55,85,.3); }
.bigwin .wtitle {
  display:flex; justify-content:space-between; align-items:center;
  background: linear-gradient(#59b3a9, #3f9c92 55%, #2b7a72);
  color:#fff; font-size: 11px; font-weight:bold;
  padding: 6px 10px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.bigwin .wtitle .wdots { font-size: 9px; letter-spacing: 3px; opacity:.6; }
.bigwin .wview {
  aspect-ratio: 16/10.5;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size: 10px; text-align:center; line-height:1.7;
  background: linear-gradient(140deg, #63beb3, #2b7a72);
  transition: background .25s;
  position: relative; overflow:hidden;
}
.bigwin .wview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bigwin .wbar {
  display:flex; gap: 6px; padding: 7px 8px;
  background: linear-gradient(#5b5370, #453e57);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.bigwin .wkey {
  font-size: 9px; font-weight:bold; color:#e8e2f2;
  background: linear-gradient(#6d6485, #514963);
  border: 1px solid #38324a; border-radius: 6px;
  padding: 4px 12px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.bigwin .wkey.main { background: linear-gradient(#6ecabf, #3f9c92 55%, #2b7a72);
                     border-color:#1f6e65; flex:1; text-align:center; }

.funside { flex: 1; min-width: 0; }
.funside > b { font-size: 14px; color:#15181a; display:block; }
.funside > p { font-size: 10px; color:#4a5257; line-height: 1.7; margin-top: 5px;
               min-height: 44px; }
.funside .flhint { display:block; font-size: 9px; color:#8a949a; margin: 8px 0 8px; }

.lgrid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.lthumb { cursor:pointer; text-align:center; padding: 4px 2px 5px; border-radius: 6px;
          border: 1px solid transparent; transition: background .14s, border-color .14s;
          background:none; font-family: inherit; }
.lthumb:hover { background: #f2f7f8; border-color:#d5e2e6; }
.lthumb .lpic {
  aspect-ratio: 16/10; border-radius: 3px;
  border: 2px solid transparent;
  box-shadow: 0 2px 4px rgba(75,88,98,.22);
  transition: border-color .14s;
}
.lthumb .ln { font-size: 9px; font-weight:bold; color:#3a4a52; margin-top: 4px; display:block; }
.lthumb.on { background: #fff; border-color:#cfd9dd;
             box-shadow: 0 2px 4px rgba(75,88,98,.18); }
.lthumb.on .lpic { border-color: #f07514; }

/* ===================== SUB-PAGE PIECES ===================== */
/* Used by lenses.html, plaza.html, tutorial.html, dev-notes.html. The
   home page is a shop window; these are the pages somebody reads. */

.prose { font-size: 11px; line-height: 1.9; color:#3a4145; }
.prose p { margin-bottom: 14px; }
.prose h2 {
  font-size: 14px; color:#17453f; margin: 26px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid #e4e9eb;
}
.prose h3 { font-size: 12px; color:#2c3438; margin: 18px 0 6px; }
.prose a { color:#1a7fae; }
.prose a:hover { color:#f07514; }
.prose b { color:#17453f; }
.prose ol, .prose ul { margin: 0 0 14px 20px; }
.prose li { margin-bottom: 7px; }
.prose code {
  font-family: Consolas, Monaco, monospace; font-size: 10px;
  background:#f2f7f8; border:1px solid #dfe9eb; border-radius:3px;
  padding: 1px 5px; color:#20627e;
}

/* A lens, written out in full. */
.lensfull { display:flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid #eceff0; }
.lensfull:last-child { border-bottom: none; }
.lensfull .lshot {
  width: 190px; flex:none; aspect-ratio: 16/10.5; border-radius: 6px;
  border: 3px solid #fff; outline: 1px solid #d5dadd;
  box-shadow: 0 5px 8px rgba(75,88,98,.2);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size: 9px; text-align:center; line-height:1.6;
  overflow:hidden; position:relative;
}
.lensfull .lshot img { width:100%; height:100%; object-fit:cover; }
.lensfull .lbody { min-width:0; }
.lensfull .lbody h3 {
  font-size: 14px; color:#15181a; display:flex; align-items:center; gap:8px;
}
.lensfull .lbody .num {
  font-size: 9px; font-weight:bold; color:#8a949a;
  border:1px solid #d5dadd; border-radius: 6px; padding: 1px 7px;
}
.lensfull .lbody .say {
  font-size: 10px; color:#4a5257; line-height:1.75; margin-top: 7px;
}
.lensfull .lbody .hint {
  font-size: 9px; color:#2a6d64; line-height:1.6; margin-top: 8px;
  background:#f2f9f8; border-left: 3px solid #7accc2;
  padding: 6px 10px; border-radius: 0 5px 5px 0;
}
.lensfull .lbody .hint b { color:#17453f; }
.lensfull .lbody .ko {
  font-size: 9px; color:#8a949a; margin-top: 6px; line-height:1.6;
}

@media (max-width: 820px) {
  .lensfull { flex-direction: column; }
  .lensfull .lshot { width: 100%; }
}

/* A plain callout, used on the sub-pages. */
.note {
  border: 1px solid #cfd9dd; border-left: 4px solid #3f9c92;
  border-radius: 0 7px 7px 0; background:#f6fafb;
  padding: 12px 14px; font-size: 10px; line-height:1.75; color:#3a4145;
  margin: 16px 0;
}
.note b { color:#17453f; }
.note.warn { border-left-color:#f07514; background:#fff8f2; }
.note.warn b { color:#c25400; }

/* ===================== DARK MODE ===================== */
body.dark { background: #17181c; }
body.dark::before {
  background:
    repeating-conic-gradient(rgba(150,160,172,.10) 0% 25%, transparent 0% 50%)
    0 0 / 76px 76px;
}
body.dark::after {
  background: linear-gradient(rgba(29,31,36,0) 0%, #1d1f24 34%, #1d1f24 62%, rgba(29,31,36,0) 100%);
}
body.dark .logotype .word { color:#f2f3f5; text-shadow:none; }
body.dark .logotype .word .two { color:#ff8a3c; }
body.dark .logotype .word .bang { color:#5cb8ae; }
body.dark .logotype .tm, body.dark .logotype .by { color:#767c85; }

body.dark .tile { border-color:#2b2e34;
                  box-shadow: 0 5px 8px rgba(0,0,0,.55), 0 0 0 1px #3a3e45,
                              inset 0 -10px 8px rgba(0,0,0,.15); }

body.dark .hero {
  background:
    linear-gradient(115deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%),
    repeating-conic-gradient(rgba(92,184,174,.10) 0% 25%, transparent 0% 50%)
      0 0 / 60px 60px,
    linear-gradient(100deg, #23433f 0%, #1d3a36 42%, #16302d 72%, #112724 100%);
  border-color:#0e1f1d;
}
body.dark .hero h1 { color:#bfe4de; text-shadow:none; }
body.dark .hero .kick { color:#5a9a90; }

body.dark .sheet { background:#212328; border-color:#2c2f35;
                   box-shadow: 0 5px 8px rgba(0,0,0,.5); }
body.dark .intro .copy { color:#b4b9c0; }
body.dark .intro .copy b { color:#8fd0c6; }
body.dark .intro .copy a { color:#6db7dd; }

body.dark .rule::before, body.dark .rule::after { background:#31343a; }
body.dark .rule span { color:#6b7178; }

body.dark .card .shot { border-color:#2c2f35; outline-color:#3a3e45; }
body.dark .card b { color:#eceef0; }
body.dark .card b .price { color:#ff8a3c; }
body.dark .card p { color:#969da5; }

body.dark .fourup, body.dark .fu { border-color:#31343a; }
body.dark .fu b { color:#d6d9dd; }
body.dark .fu p { color:#878e96; }

body.dark .nlform input { background:#2a2d33; border-color:#42474f; color:#d6d9dd; }
body.dark .nlnote { color:#767c85; }
body.dark .nlnote.good { color:#7accc2; }
body.dark .nlnote.bad  { color:#ff8a3c; }

body.dark .footer { background: linear-gradient(#2a2d32, #212429);
                    border-color:#383c42; box-shadow: 0 5px 8px rgba(0,0,0,.5); }
body.dark .pill { background:#2e3136; border-color:#565c63; color:#aeb4ba; text-shadow:none; }
body.dark .footlinks .row1 { color:#c3c7cc; }
body.dark .footlinks .row1 span { color:#767c85; }
body.dark .footlinks .legal { color:#767c83; }
body.dark .badge { border-color:#565c63; }

body.dark .modekey {
  background: linear-gradient(#3a3e45, #24272c 55%, #1b1d21);
  border-color:#4a4f57;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 4px rgba(0,0,0,.5);
}

body.dark .thumb { background: linear-gradient(#2a2d33, #24272c); border-color:#383c42; }
body.dark .thumb.on { border-color:#5cb8ae;
  background: linear-gradient(#22332f, #1c2b28); }
body.dark .thumb .tt b { color:#d6d9dd; }
body.dark .thumb .tt span { color:#878e96; }
body.dark .rail .rhead { color:#6b7178; }

body.dark .lenskey { background: linear-gradient(#3a3e45, #2b2e34 48%, #24272c 52%, #1e2126 100%);
                     border-color:#42474f; }
body.dark .lenskey .n { color:#aeb4ba; }
body.dark .lenscap { color:#767c85; }

body.dark .polaroid { background:#2e3136; border-color:#3a3e45; }
body.dark .polaroid .cap { color:#9aa0a8; }

body.dark .halfmod .mb { background: repeating-linear-gradient(0deg, #24272c 0 3px, #22252a 3px 6px);
                         border-color:#383c42; }
body.dark .badgenote { color:#767c85; }
body.dark .newsitem2 { border-bottom-color:#383c42; }
body.dark .newsitem2 .t { color:#c3c7cc; }
body.dark .newsitem2 .d { color:#6b7178; }

body.dark .specs { border-color:#383c42; }
body.dark .specrow:nth-child(odd) { background:#24272c; }
body.dark .specrow:nth-child(even) { background:#212328; }
body.dark .specrow .k { color:#8fd0c6; background: rgba(92,184,174,.06);
                        border-right-color:#2c2f35; }
body.dark .specrow .v { color:#aab0b8; }

body.dark .owlbubble { background: linear-gradient(#3a352a, #2e2a20);
                       border-color:#5a4d30; color:#d8ccb0; }
body.dark .owlbubble::after { border-top-color:#2e2a20; }
body.dark .owlbubble b { color:#e0a94f; }

body.dark .funside > b { color:#eceef0; }
body.dark .funside > p { color:#9aa0a8; }
body.dark .funside .flhint { color:#767c85; }
body.dark .lthumb:hover { background:#282b31; border-color:#383c42; }
body.dark .lthumb.on { background:#2e3136; border-color:#42474f; }
body.dark .lthumb .ln { color:#aeb4ba; }
body.dark .lthumb.on .lpic { border-color:#ff8a3c; }

body.dark .prose { color:#b4b9c0; }
body.dark .prose h2 { color:#8fd0c6; border-bottom-color:#31343a; }
body.dark .prose h3 { color:#d6d9dd; }
body.dark .prose a { color:#6db7dd; }
body.dark .prose b { color:#8fd0c6; }
body.dark .prose code { background:#2a2d33; border-color:#3a3e45; color:#8fd0c6; }

body.dark .lensfull { border-bottom-color:#31343a; }
body.dark .lensfull .lshot { border-color:#2c2f35; outline-color:#3a3e45; }
body.dark .lensfull .lbody h3 { color:#eceef0; }
body.dark .lensfull .lbody .num { color:#767c85; border-color:#42474f; }
body.dark .lensfull .lbody .say { color:#9aa0a8; }
body.dark .lensfull .lbody .hint { background:#1e2b29; border-left-color:#3f9c92; color:#9fd0c8; }
body.dark .lensfull .lbody .hint b { color:#bfe4de; }
body.dark .lensfull .lbody .ko { color:#767c85; }

body.dark .note { background:#22262b; border-color:#383c42; border-left-color:#3f9c92; color:#aab0b8; }
body.dark .note b { color:#8fd0c6; }
body.dark .note.warn { background:#2b2620; border-left-color:#f07514; }
body.dark .note.warn b { color:#ff8a3c; }

/* =====================================================================
   PRODUCT BAND + TABS
   The shape borrowed from the era's product microsites: a coloured band
   carrying the product name, with the section tabs sitting ON the band's
   bottom edge so they read as folder tabs into the white sheet below.
   The colours are UP2U!'s own - teal ground, orange for the live tab -
   rather than the reference's red and blue.
   ===================================================================== */
.pband {
  position:relative; overflow:hidden;
  padding: 18px 24px 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 44%),
    repeating-conic-gradient(rgba(63,156,146,.14) 0% 25%, transparent 0% 50%)
      0 0 / 60px 60px,
    linear-gradient(100deg, #dcf1ee 0%, #b6dfd9 42%, #8ec9c1 72%, #6ab3a9 100%);
  border-left: 1px solid #cfe3e0; border-right: 1px solid #cfe3e0;
}
.pband h1 {
  margin: 0 0 12px; font-size: 20px; font-weight:bold;
  color:#17453f; letter-spacing:-.3px;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.pband .kick {
  position:absolute; left: 25px; top: 46px;
  font-size: 9px; font-weight:bold; letter-spacing: 1.6px; color:#2a6d64;
}

/* The tabs. margin-bottom:-1px drops them onto the sheet's top border so
   the live one joins the white below it, which is the whole visual trick
   of a tab: it is part of the page it opens, not a button above it. */
.tabs { display:flex; gap: 5px; margin-bottom: -1px; }
.tabs a {
  display:block; padding: 9px 17px 10px;
  font-size: 11px; font-weight:bold; text-decoration:none;
  color:#3a4145;
  background: linear-gradient(#f4f6f6, #d9e0e1);
  border: 1px solid #b9c4c5; border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.tabs a:hover { background: linear-gradient(#fff, #e7eced); color:#17453f; }
.tabs a.on {
  color:#fff;
  background: linear-gradient(#f79238, #e06a10);
  border-color:#c25400;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.tabs a.on:hover { color:#fff; }

/* =====================================================================
   FEATURE STRIP
   The row of thumbnails under the fold. Horizontal scroll rather than
   the reference's paging arrows: the arrows existed because 2011 could
   not scroll a row on touch, and faking them now would be costume.
   ===================================================================== */
.fstrip {
  display:flex; gap: 14px; overflow-x:auto; padding: 14px 16px;
  background:#eef1f2; border:1px solid #dfe4e6; border-top:none;
}
.fstrip .f { flex:none; width: 92px; text-align:center; text-decoration:none; }
.fstrip .f .thumb {
  height: 58px; border-radius: 6px; margin-bottom: 6px;
  border:2px solid #fff; outline:1px solid #d5dadd;
  box-shadow: 0 2px 4px rgba(75,88,98,.22);
  display:flex; align-items:center; justify-content:center; font-size: 24px;
}
.fstrip .f span {
  display:block; font-size: 9px; line-height:1.35; color:#3a4145;
}
.fstrip .f:hover span { color:#c25400; }

/* =====================================================================
   PROMO ROW - the four boxes at the foot of the reference page
   ===================================================================== */
.promo { display:flex; background:#fff; border:1px solid #dfe4e6; border-top:none; }
.promo .p {
  flex:1; padding: 18px 14px 16px; text-align:center;
  border-right:1px solid #eceff0;
}
.promo .p:last-child { border-right:none; }
.promo .p .ico { font-size: 28px; line-height:1; margin-bottom: 9px; }
.promo .p p { margin: 0 0 9px; font-size: 9px; line-height:1.55; color:#5c666b; }
.promo .p a {
  font-size: 9px; font-weight:bold; color:#c25400; text-decoration:none;
}
.promo .p a:hover { color:#f07514; text-decoration:underline; }

@media (max-width: 820px) {
  .promo { flex-wrap:wrap; }
  .promo .p { flex: 1 1 50%; border-bottom:1px solid #eceff0; }
  .tabs { flex-wrap:wrap; gap:4px; }
  .tabs a { padding: 8px 12px 9px; font-size: 10px; }
}

/* =====================================================================
   PRODUCTS GRID - the company page's shelf, with room to grow
   ===================================================================== */
.shelf { display:flex; gap: 20px; flex-wrap:wrap; }
.prod {
  flex: 1 1 210px; text-decoration:none; display:block;
  border:1px solid #dfe4e6; border-radius: 6px; overflow:hidden;
  background:#fff; box-shadow: 0 2px 4px rgba(75,88,98,.14);
}
.prod:hover { border-color:#8fd0c6; box-shadow: 0 4px 8px rgba(75,88,98,.20); }
.prod .cap { padding: 12px 14px 14px; }
.prod .cap b { display:block; font-size: 12px; color:#17453f; margin-bottom: 4px; }
.prod .cap p { margin:0; font-size: 9px; line-height:1.6; color:#5c666b; }
.prod .shotbox {
  height: 120px; display:flex; align-items:center; justify-content:center;
  font-size: 34px;
  background: linear-gradient(160deg, #dcf1ee, #8ec9c1);
  border-bottom:1px solid #dfe4e6;
}
.prod.soon .shotbox { background: linear-gradient(160deg, #eef1f2, #cfd7d9); }
.prod.soon .cap b { color:#767c85; }
.prod .tagpill {
  display:inline-block; margin-top: 8px; padding: 2px 7px; border-radius: 3px;
  font-size: 8px; font-weight:bold; letter-spacing:.08em;
  background:#f07514; color:#fff;
}
.prod.soon .tagpill { background:#a4adb1; }

/* The intro on a page with no hero shot beside it: the 300px cap exists to
   keep the paragraph off the cartridge, and with nothing there it just
   makes a narrow ribbon of text in a wide sheet. */
.intro.solo .copy { max-width: none; }

/* =====================================================================
   DISABLED TAB - a section that exists but is not ready yet.
   A span, not an anchor: nothing to click, nothing for the keyboard to
   land on, and no href for a crawler to follow into a page that is not
   there. Styling alone would leave all three of those wrong.
   ===================================================================== */
.tabs span.off {
  display:block; padding: 9px 17px 10px;
  font-size: 11px; font-weight:bold;
  color:#9aa4aa;
  background: linear-gradient(#eef0f0, #dfe4e5);
  border: 1px solid #c9d1d2; border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: default;
}
.tabs span.off .soonchip {
  display:inline-block; margin-left: 7px; padding: 1px 5px;
  border-radius: 3px; background:#b6bfc3; color:#fff;
  font-size: 8px; letter-spacing:.06em; vertical-align: 1px;
}

/* =====================================================================
   ENDLESS CAROUSEL
   The track holds the items twice and slides exactly one copy's width
   before snapping back, so the seam lands on an identical frame and the
   loop is invisible. Pure CSS: no timer to drift, and it costs nothing
   when the tab is in the background.
   ===================================================================== */
.carousel {
  position:relative; overflow:hidden;
  background:#eef1f2; border:1px solid #dfe4e6; border-top:none;
  padding: 14px 0;
}
/* Fade the ends so items enter and leave instead of being chopped off. */
.carousel::before, .carousel::after {
  content:''; position:absolute; top:0; bottom:0; width: 46px; z-index:2;
  pointer-events:none;
}
.carousel::before { left:0;  background: linear-gradient(90deg, #eef1f2, rgba(238,241,242,0)); }
.carousel::after  { right:0; background: linear-gradient(270deg, #eef1f2, rgba(238,241,242,0)); }

/* SEAM MATH, and it is worth stating because -50% is the obvious answer
   and the wrong one. A flex row puts a gap BETWEEN children, so a track
   holding two copies of n items has 2n-1 gaps, not 2n. Half that width
   therefore lands half a gap short of the second copy's first item and
   the loop jumps by that much - 7px here - on every pass.
   The margin-right below gives the track its 2n-th gap, which makes the
   two halves genuinely identical and -50% exactly right. */
.ctrack {
  display:flex; gap: 14px; width: max-content;
  margin-right: 14px;
  animation: creep 58s linear infinite;
}
.carousel:hover .ctrack { animation-play-state: paused; }
@keyframes creep {
  from { transform: translateX(0); }
  /* -50% is exactly one copy of the list, because the track holds two. */
  to   { transform: translateX(-50%); }
}
.ctrack .f {
  flex:none; width: 116px; text-align:center; text-decoration:none;
  padding-bottom: 2px;
}
.ctrack .f .thumb {
  height: 66px; border-radius: 6px; margin-bottom: 7px;
  border:2px solid #fff; outline:1px solid #d5dadd;
  box-shadow: 0 2px 4px rgba(75,88,98,.22);
  display:flex; align-items:center; justify-content:center; font-size: 27px;
  transition: transform .14s, box-shadow .14s;
}
/* The card lifts rather than the label merely recolouring: on a row that
   is already sliding, a colour change alone is easy to miss. */
.ctrack .f:hover .thumb {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(75,88,98,.30);
  outline-color:#8fd0c6;
}
.ctrack .f .fl {
  display:block; font-size: 10px; font-weight:bold; line-height:1.3;
  color:#17453f; margin-bottom: 2px;
}
.ctrack .f .fs {
  display:block; font-size: 8px; line-height:1.4; color:#767c85;
}
.ctrack .f:hover .fl { color:#c25400; }

/* Keyboard users get the same affordance, and focus must not be invisible
   on a moving row - so focusing anything inside stops the slide. */
.ctrack .f:focus-visible { outline: 2px solid #f07514; outline-offset: 3px; }
.carousel:focus-within .ctrack { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ctrack { animation: none; }
  .carousel { overflow-x: auto; }
}

/* The company line. One sentence carrying the whole pitch, so it is set
   as a statement rather than as a stray line of body copy. */
.intro.solo .copy.tagline {
  font-size: 17px; line-height: 1.5; color:#17453f; font-weight:bold;
  letter-spacing:-.2px; padding-top: 4px;
}