/* Not Wavelength: the dial, the spectrum cards and the table, shared by the TV and the
   phones. The device looks the same in light and dark (it is a thing on the table);
   the table around it changes. */
:root {
  --wl-font: "Futura", "Avenir Next", "Century Gothic", "Josefin Sans", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  --wl-body: #10506c; --wl-body-2: #0b3b52; --wl-navy: #151b47;
  --wl-west: #0f9b8e; --wl-west-2: #0a6b63; --wl-east: #7a4fd6; --wl-east-2: #5431a3;
  --wl-gold: #ffb800;
}

/* ---- the dial ---- */
.wl-dial { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; }
.wl-dial .wl-knurl { fill: #efe2c6; stroke: #cdb98f; stroke-width: 3; }
.wl-dial .wl-knurl-in { fill: none; stroke: rgba(120,95,50,.25); stroke-width: 4; }
.wl-dial .wl-stars { fill: #f4ecd9; }
.wl-dial .wl-ticks { stroke: rgba(244,236,217,.55); stroke-linecap: round; }
.wl-dial .wl-bnum { font: 800 38px var(--wl-font); fill: rgba(25,20,30,.78); text-anchor: middle; dominant-baseline: central; }
.wl-dial .wl-plate { fill: var(--wl-body); }
.wl-dial .wl-screen, .wl-dial .wl-wheel { transform-box: view-box; transform-origin: 600px 600px; }
.wl-dial .wl-screen { transition: transform 1.3s cubic-bezier(.62,.04,.24,1); }
.wl-dial .wl-screen.open { transform: rotate(-180deg); }
.wl-dial .wl-screen.instant { transition: none; }
.wl-dial .wl-screen.peek { transform: rotate(-12deg); transition-duration: .35s; }
.wl-dial .wl-wheel.spin { animation: wl-spin 1.7s cubic-bezier(.15,.7,.25,1) both; }
@keyframes wl-spin { from { transform: rotate(0deg); } to { transform: rotate(612deg); } }
.wl-dial .wl-lock { display: none; }
.wl-dial.locked .wl-lock { display: inline; }
.wl-dial.noneedle .wl-needle { display: none; }
.wl-dial .wl-target { transition: opacity .3s; }

/* ---- spectrum cards: two colours, an arrow to each end ---- */
.wlcard { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; aspect-ratio: 3.4 / 1; border-radius: 10px; overflow: hidden; container-type: inline-size; font-family: var(--wl-font); color: #1c1a20; box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.06); user-select: none; -webkit-user-select: none; }
.wlcard .wlc-half { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw; padding: 2cqw 3.4cqw; text-align: center; min-width: 0; position: relative; }
.wlcard .wlc-l { background: linear-gradient(170deg, color-mix(in srgb, var(--l) 88%, #fff), var(--l)); }
.wlcard .wlc-r { background: linear-gradient(170deg, color-mix(in srgb, var(--r) 88%, #fff), var(--r)); }
.wlcard .wlc-half::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px); pointer-events: none; }
.wlcard .wlc-arrow { font-size: 6.5cqw; line-height: .6; font-weight: 400; opacity: .8; }
.wlcard b { font-weight: 700; line-height: 1.08; font-size: clamp(9px, min(6.4cqw, calc(120cqw / var(--len, 10))), 200px); letter-spacing: -.005em; overflow-wrap: break-word; }
.wlcard.back { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 60%), repeating-linear-gradient(90deg, #e9a63a 0 8%, #e4643f 8% 16%, #6fc0b4 16% 24%, #9a8bb5 24% 32%, #f1e6cf 32% 40%); display: flex; align-items: center; justify-content: center; }
.wlcard .wlc-back { display: flex; gap: 3cqw; }
.wlcard .wlc-back i { width: 7cqw; height: 7cqw; border-radius: 50%; background: rgba(21,27,71,.85); box-shadow: 0 0 0 1.2cqw rgba(255,255,255,.7); }

/* ---- the table: a living room at night, or a sunny afternoon ---- */
.tbl-psychic {
  --tbl-edge: #080b1f; --tbl-rim: #2b3466; --tbl-glow: rgba(255,230,180,.08);
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 9%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 33% 71%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 91% 63%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 56% 88%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 6% 84%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(ellipse 55% 50% at 50% 46%, rgba(255,214,160,.10), transparent 70%),
    radial-gradient(ellipse 40% 70% at 0% 60%, rgba(15,155,142,.20), transparent 70%),
    radial-gradient(ellipse 40% 70% at 100% 60%, rgba(122,79,214,.24), transparent 70%),
    linear-gradient(180deg, #161b3f 0%, #10142f 60%, #0b0e22 100%);
}
[data-theme="light"] .tbl-psychic {
  --tbl-edge: #ffffff; --tbl-rim: #d8d2c4; --tbl-glow: rgba(255,255,255,.3);
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(ellipse 40% 70% at 0% 60%, rgba(15,155,142,.13), transparent 70%),
    radial-gradient(ellipse 40% 70% at 100% 60%, rgba(122,79,214,.13), transparent 70%),
    repeating-linear-gradient(0deg, rgba(90,70,40,.025) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #ece8df 0%, #e2ddd2 100%);
}