/* ============================================================================
   AETHER — the landing film.
   The page is a lens on one object. Everything here is either the object, the
   glass the copy sits on, or the light between them. Two appearances, one set
   of tokens: nothing below the token blocks ever names a colour.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; overflow-x:clip }
body{ margin:0; overflow-x:clip; background:var(--ink0); color:var(--label);
      font-family:var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:-.011em; }
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none; margin:0; padding:0 }

/* ------------------------------------------------------------------ tokens */
:root{
  --sans:"Mona Sans","Mona Sans Fallback",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --disp:"Hubot Sans","Hubot Sans Fallback",-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  --mono:"Geist Mono","SF Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wide:"wdth" 112;
  --sp:cubic-bezier(.32,.72,0,1);
  --gut:clamp(20px, 5.2vw, 96px);
  --r:22px; --r-s:13px; --pill:980px;
  --on-act:#fff;
}
/* The tint is a typed colour, so when the dial re-paints the page every consumer of
   it — the key, the readout, the wordmark — glides to the new colour together. */
@property --tint{ syntax:'<color>'; inherits:true; initial-value:#0A84FF; }
html{ transition:--tint .7s var(--sp) }

/* LIGHT — warm paper, the app's own original scheme */
:root, html.light{
  --ink0:#E8E0CD; --ink1:#F1ECE2;
  --blue:#0062CC; --purple:#8E30C9; --green:#1E7F38; --orange:#B85C00; --pink:#C4103B; --cyan:#0A7EA4;
  --tint:#D2542A;
  --label:#33241A; --label2:rgba(51,36,26,.66); --label3:rgba(51,36,26,.40); --label4:rgba(51,36,26,.20);
  --glass:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.52)), rgba(250,246,239,.46);
  --glass-2:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.72)), rgba(253,251,247,.62);
  --glass-solid:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.30)), rgba(240,234,222,.92);
  --hair:rgba(74,54,34,.16); --hair-2:rgba(74,54,34,.27);
  --fill1:rgba(74,54,34,.05); --fill2:rgba(74,54,34,.09);
  --spec:inset 0 1px 0 rgba(255,255,255,.9);
  --lift:0 1px 1px rgba(74,54,34,.10), 0 8px 28px rgba(74,54,34,.15);
  --lift-2:0 2px 4px rgba(74,54,34,.10), 0 22px 64px rgba(74,54,34,.20);
  --scrim:radial-gradient(120% 86% at 50% 40%, transparent 48%, rgba(214,201,175,.40) 100%),
          linear-gradient(180deg, rgba(228,219,201,.58) 0%, transparent 16%, transparent 84%, rgba(220,209,188,.62) 100%);
  --grain:.030;
  /* the reader pool is the ground itself, so it has no edge — only the object dims behind it */
  --veil-a:rgba(232,224,205,.975); --veil-b:rgba(232,224,205,.6);
  color-scheme: light;
}
/* DARK — deep ink */
html.dark{
  --ink0:#05060A; --ink1:#0A0C13;
  --blue:#0A84FF; --purple:#BF5AF2; --green:#30D158; --orange:#FF9F0A; --pink:#FF375F; --cyan:#64D2FF;
  --tint:#0A84FF;
  --label:#FFFFFF; --label2:rgba(235,235,245,.62); --label3:rgba(235,235,245,.35); --label4:rgba(235,235,245,.20);
  --glass:linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.022)), rgba(15,18,26,.50);
  --glass-2:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)), rgba(19,23,32,.58);
  --glass-solid:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)), rgba(9,11,17,.90);
  --hair:rgba(255,255,255,.09); --hair-2:rgba(255,255,255,.15);
  --fill1:rgba(255,255,255,.06); --fill2:rgba(255,255,255,.10);
  --spec:inset 0 1px 0 rgba(255,255,255,.14);
  --lift:0 1px 1px rgba(0,0,0,.28), 0 8px 28px rgba(0,0,0,.34);
  --lift-2:0 2px 4px rgba(0,0,0,.3), 0 22px 64px rgba(0,0,0,.5);
  --scrim:radial-gradient(120% 86% at 50% 40%, transparent 38%, rgba(4,5,9,.60) 100%),
          linear-gradient(180deg, rgba(5,6,10,.62) 0%, transparent 17%, transparent 82%, rgba(5,6,10,.72) 100%);
  --grain:.055;
  --veil-a:rgba(5,6,10,.978); --veil-b:rgba(5,6,10,.66);
  color-scheme: dark;
}

/* ------------------------------------------------------------- the object */
#gl{ position:fixed; inset:0; width:100vw; height:100svh; z-index:0; display:block;
     opacity:0; transition:opacity 1.6s ease; background:var(--ink0) }
html.lit #gl{ opacity:1 }
#scrim{ position:fixed; inset:0; z-index:1; pointer-events:none; background:var(--scrim);
        transition:background .7s var(--sp) }
/* a whisper of grain so the gradients never band on a wide screen */
#grain{ position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gr 8s steps(6) infinite }
@keyframes gr{ 0%{transform:translate(0,0)} 20%{transform:translate(-2%,1%)} 40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,-1%)} 80%{transform:translate(2%,1%)} 100%{transform:translate(0,0)} }
/* integrated graphics: a still grain and no blur over a live canvas — the look survives */
html.tier-low #grain{ display:none }

/* the appearance flips as one dissolve, and so does the walk into the app */
@view-transition{ navigation:auto }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.55s; animation-timing-function:var(--sp) }
html.theming *{ transition:none!important }

/* --------------------------------------------------------------- the bar */
#bar{ position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:14px var(--gut) 14px;
  padding-top:calc(14px + env(safe-area-inset-top));
  transition:background .6s var(--sp), box-shadow .6s var(--sp) }
#bar.solid{ background:var(--glass); box-shadow:0 1px 0 var(--hair);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%) }
html.tier-low #bar.solid{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--glass-solid) }
.wm{ display:flex; align-items:baseline; gap:9px; font-family:var(--disp); font-variation-settings:var(--wide) }
.wm svg{ width:19px; height:19px; align-self:center; fill:none; stroke:var(--tint); stroke-width:1.4 }
.wm b{ font-weight:800; font-size:15px; letter-spacing:.16em }
.wm i{ font-style:normal; font-size:10px; letter-spacing:.14em; color:var(--label3); font-family:var(--mono) }
#bar nav{ display:flex; align-items:center; gap:10px }
#theme{ position:relative; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  background:var(--fill1); border:1px solid var(--hair); color:var(--label2); padding:0;
  transition:background .28s var(--sp), color .28s var(--sp), transform .28s var(--sp) }
#theme:hover{ background:var(--fill2); color:var(--label) } #theme:active{ transform:scale(.92) }
/* the sun and the moon trade places on a turn, not a cut */
#theme svg{ position:absolute; width:17px; height:17px; transition:opacity .45s var(--sp), transform .6s var(--sp) }
#theme .su{ opacity:0; transform:rotate(-80deg) scale(.4) }
html.light #theme .su{ opacity:1; transform:none }
html.light #theme .mo{ opacity:0; transform:rotate(80deg) scale(.4) }

.cta{ display:inline-flex; border-radius:var(--pill); overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb,var(--tint) 86%,white), var(--tint));
  box-shadow:0 1px 1px rgba(0,0,0,.18), 0 8px 26px color-mix(in srgb,var(--tint) 34%,transparent), inset 0 1px 0 rgba(255,255,255,.28);
  transition:box-shadow .6s var(--sp), transform .18s var(--sp) }
.cta span{ display:inline-flex; align-items:center; gap:8px; padding:9px 17px; color:var(--on-act);
  font-size:13.5px; font-weight:600; letter-spacing:-.005em; will-change:transform }
.cta svg{ width:12px; height:12px; transition:transform .6s var(--sp) }
.cta:hover{ box-shadow:0 1px 1px rgba(0,0,0,.18), 0 14px 40px color-mix(in srgb,var(--tint) 48%,transparent), inset 0 1px 0 rgba(255,255,255,.3) }
.cta:hover svg{ transform:translate(1.5px,-1.5px) }
.cta:active{ transform:scale(.97) }
.cta.big span{ padding:15px 26px; font-size:15.5px }
.ghost{ display:inline-flex; border-radius:var(--pill); border:1px solid var(--hair-2); background:var(--fill1);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  transition:background .6s var(--sp), border-color .6s var(--sp), transform .18s var(--sp) }
html.tier-low .ghost{ -webkit-backdrop-filter:none; backdrop-filter:none }
.ghost span{ padding:14px 24px; font-size:14.5px; font-weight:560; color:var(--label2); will-change:transform;
  transition:color .6s var(--sp) }
.ghost:hover{ background:var(--fill2); border-color:var(--hair-2) } .ghost:hover span{ color:var(--label) }
.ghost:active{ transform:scale(.97) }

/* ------------------------------------------------------------ the readout */
#readout{ position:fixed; right:var(--gut); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:20;
  display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--label3); opacity:0; transition:opacity .8s ease; pointer-events:none }
html.lit #readout{ opacity:1 }
#readout span{ font-variant-numeric:tabular-nums }
#readout i{ width:6px; height:6px; border-radius:50%; background:var(--tint); box-shadow:0 0 10px var(--tint) }

/* ==================================================================== acts
   Without the film (no JS, reduced motion) this is a plain document: one
   act per screen, copy in the middle. With it, every act is a long spacer whose
   column is pinned for the first stretch and then slid over by the next act. The
   copy holds still while the lens travels; the next sentence arrives over it.
   ========================================================================= */
main{ position:relative; z-index:3 }
.act{ position:relative; min-height:100svh; display:flex; align-items:center; padding:16svh var(--gut) }
.act .col{ position:relative; width:min(680px, 47vw) }
.act .col.wide{ width:min(1080px, 64vw) }
.act .col.mid{ width:min(760px, 92vw); margin-inline:auto; text-align:center }
.act.wide .col{ width:min(560px, 40vw) }
.hero .col{ width:min(800px, 50vw) }

html.js .act{ height:260svh; min-height:0; margin-top:-100svh; padding:0 var(--gut); display:block }
html.js .act:first-child, html.js .act.flow + .act{ margin-top:0 }
html.js .act.end{ height:200svh }
html.js .act:not(.flow) .col{
  position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:3svh; will-change:transform;
}
/* the list acts are taller than a screen, so they scroll instead of holding */
html.js .act.flow{ height:auto; min-height:100svh; display:flex; align-items:center; padding:15svh var(--gut) 22svh }

/* the reader pool: the ground gathered behind the copy so it reads over a live field.
   Eased on both axes — a straight ramp shows as an edge, a curve does not. */
.act .col::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-6svh -26vw -6svh -22vw;
  background:var(--veil-a);
  will-change:transform;   /* its own static layer, so a fading paragraph never re-rasters the pool */
  /* solid until 64px past the column's right edge, then an eased feather across the rest */
  --f:calc(100% - 26vw + 64px);
  --mx:linear-gradient(90deg,#000 0,#000 var(--f),rgba(0,0,0,.93) calc(var(--f) + 40px),rgba(0,0,0,.76) calc(var(--f) + 95px),rgba(0,0,0,.52) calc(var(--f) + 150px),rgba(0,0,0,.28) calc(var(--f) + 205px),rgba(0,0,0,.10) calc(var(--f) + 255px),transparent 100%);
  --my:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 6%,rgba(0,0,0,.75) 14%,#000 24%,#000 76%,rgba(0,0,0,.75) 86%,rgba(0,0,0,.3) 94%,transparent 100%);
  -webkit-mask-image:var(--mx),var(--my); -webkit-mask-composite:source-in;
  mask-image:var(--mx),var(--my); mask-composite:intersect;
}
/* a list act is wider, so its pool holds nearly to the last column */
.act .col.wide::before{
  inset:-9svh -30vw -9svh -22vw;
  --f:calc(100% - 30vw + 64px);
}
.act .col.mid::before{
  inset:-12svh -26vw;
  background:radial-gradient(74% 68% at 50% 50%, var(--veil-a) 0%, var(--veil-a) 44%, var(--veil-b) 68%, transparent 100%);
  -webkit-mask-image:none; mask-image:none;
}
/* the lattice softens behind the words on anything that can afford it */
html.tier-mid .act .col::before, html.tier-high .act .col::before{
  -webkit-backdrop-filter:blur(13px) saturate(125%); backdrop-filter:blur(13px) saturate(125%);
}

.lab{ display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--label3); margin-bottom:18px }
.dsp{ margin:0 0 22px; font-family:var(--disp); font-variation-settings:var(--wide); font-weight:700;
  font-size:clamp(40px, 6.6vw, 108px); line-height:.88; letter-spacing:-.045em; color:var(--label) }
.dsp.sm{ font-size:clamp(33px, 4.5vw, 70px); letter-spacing:-.038em; line-height:.90 }
.dsp .li, .lede, .sub{ text-shadow:0 1px 2px var(--ink0), 0 2px 20px var(--ink0) }
.ln{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em }
.li{ display:block; will-change:transform }
.lede{ margin:0 0 30px; font-size:clamp(16px,1.32vw,20px); line-height:1.5; color:var(--label2); max-width:52ch }
.sub{ margin:0; font-size:clamp(15px,1.16vw,17.5px); line-height:1.6; color:var(--label2); max-width:56ch }
.mid .lede{ margin-inline:auto }
.row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px }
.mid .row{ justify-content:center }

/* the per-character scrub: a dim floor, never nothing */
.sub .w{ display:inline-block; white-space:nowrap }
.sub .ch{ opacity:.15; transition:opacity .5s ease }
.sub .ch.on{ opacity:1 }

.cue{ position:absolute; left:0; bottom:5.5svh; display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--label3) }
.cue i{ display:block; width:30px; height:1px; background:currentColor; transform-origin:left;
  animation:cue 2.4s var(--sp) infinite }
@keyframes cue{ 0%{transform:scaleX(0);opacity:0} 30%{opacity:1} 100%{transform:scaleX(1);opacity:0} }

/* the counted facts */
.spec{ display:flex; gap:34px; margin-top:32px; padding-top:22px; border-top:1px solid var(--hair) }
.spec li{ display:flex; flex-direction:column; gap:3px }
/* Mona, not Hubot: Hubot Sans has no alternate zero and its own is slashed, so "80" read as "8Ø" */
.spec b{ font-family:var(--sans); font-variation-settings:"wdth" 106; font-weight:700; font-size:30px;
  letter-spacing:-.03em; color:var(--label) }
.spec span{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--label3) }

/* ------------------------------------------------------------- the modes */
.modes{ margin-top:30px; border-top:1px solid var(--hair) }
.modes li{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:0 20px; padding:18px 6px 18px 2px; border-bottom:1px solid var(--hair);
  transition:padding-left .6s var(--sp) }
.modes li::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .6s var(--sp);
  background:linear-gradient(90deg, color-mix(in srgb,var(--m) 13%,transparent), transparent 46%) }
.modes li.on{ padding-left:16px } .modes li.on::before{ opacity:1 }
.modes i{ width:9px; height:9px; border-radius:50%; background:var(--fill2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.35); transition:background .6s var(--sp), box-shadow .6s var(--sp) }
.modes li.on i{ background:var(--m); box-shadow:0 0 10px var(--m), 0 0 26px color-mix(in srgb,var(--m) 60%,transparent) }
.modes b{ grid-column:2; font-family:var(--disp); font-variation-settings:var(--wide); font-weight:650;
  font-size:clamp(19px,1.9vw,26px); letter-spacing:-.022em; color:var(--label2); transition:color .6s var(--sp) }
.modes li.on b{ color:var(--label) }
.modes em{ grid-column:3; grid-row:1; font-family:var(--mono); font-style:normal; font-size:12px;
  letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--label3); transition:color .6s var(--sp) }
.modes li.on em{ color:var(--m) }
.modes span{ grid-column:2/4; font-size:14px; line-height:1.5; color:var(--label3); margin-top:5px;
  transition:color .6s var(--sp) }
.modes li.on span{ color:var(--label2) }

/* ------------------------------------------------------------ the bay */
.bay{ margin-top:28px; border-top:1px solid var(--hair) }
.bay li{ border-bottom:1px solid var(--hair) }
.bay a{ position:relative; display:grid; grid-template-columns:auto 46px minmax(0,1fr) minmax(0,1.15fr) auto;
  align-items:center; gap:0 26px; padding:20px 8px 20px 2px; transition:padding-left .6s var(--sp) }
.bay a::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s var(--sp);
  background:linear-gradient(90deg, color-mix(in srgb,var(--m) 11%,transparent), transparent 44%) }
.bay a:hover{ padding-left:16px } .bay a:hover::before{ opacity:1 }
.bay i{ width:8px; height:8px; border-radius:50%; background:var(--fill2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.35); transition:background .6s var(--sp), box-shadow .6s var(--sp) }
.bay a:hover i{ background:var(--m); box-shadow:0 0 9px var(--m), 0 0 22px color-mix(in srgb,var(--m) 60%,transparent) }
.bay .n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--label4); font-variant-numeric:tabular-nums }
.bay b{ font-family:var(--disp); font-variation-settings:var(--wide); font-weight:620; font-size:clamp(17px,1.5vw,22px);
  letter-spacing:-.02em; line-height:1.15 }
.bay p{ margin:0; font-size:14px; line-height:1.5; color:var(--label3) }
.bay em{ font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--label4); white-space:nowrap; transition:color .6s var(--sp), transform .6s var(--sp) }
.bay a:hover em{ color:var(--label); transform:translateX(-4px) }

/* ------------------------------------------------------------- the close */
.where{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:40px }
.where a{ display:inline-block; padding:9px 15px; border-radius:var(--pill); border:1px solid var(--hair);
  background:var(--fill1); font-size:13px; color:var(--label2);
  transition:background .6s var(--sp), color .6s var(--sp), border-color .6s var(--sp), transform .18s var(--sp) }
.where a:hover{ background:var(--fill2); color:var(--label); border-color:var(--hair-2) }
.where a:active{ transform:scale(.96) }
.fine{ margin:34px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--label4) }

/* ------------------------------------------------------------- entrances */
.js .li{ transform:translateY(110%) }
.js .lab, .js .lede, .js .sub, .js .row, .js .spec, .js .modes, .js .bay, .js .where, .js .fine, .js .cue{ opacity:0 }

/* ==================================================================== phone
   The copy takes the bottom of the screen and the object rides the top third,
   so nothing is ever printed over the instrument.
   ======================================================================== */
@media (max-width: 900px){
  .act{ align-items:flex-end; padding:14svh var(--gut) 13svh }
  html.js .act:not(.flow) .col{ justify-content:flex-end; padding:0 0 11svh }
  html.js .act.flow{ padding:12svh var(--gut) 20svh }
  .act .col::before, .act .col.wide::before, .act .col.mid::before{
    inset:-4svh -12vw -12svh -12vw;
    background:linear-gradient(180deg, transparent 0%, var(--veil-b) 30%, var(--veil-a) 52%, var(--veil-a) 100%);
    -webkit-mask-image:none; mask-image:none;
  }
  .act .col, .act .col.wide, .act.wide .col, .hero .col, .act .col.mid{ width:100% }
  .dsp{ font-size:clamp(36px,10.4vw,60px); letter-spacing:-.038em }
  .dsp.sm{ font-size:clamp(29px,8.2vw,46px); letter-spacing:-.032em }
  .lede,.sub{ font-size:16px; max-width:none }
  .row{ gap:10px } .cta.big span{ padding:14px 22px; font-size:15px }
  .ghost span{ padding:13px 20px; font-size:14px }
  .spec{ gap:26px; margin-top:24px; padding-top:18px } .spec b{ font-size:25px }
  .cue{ bottom:4svh }
  .modes li{ grid-template-columns:auto 1fr; padding:17px 2px }
  .modes em{ grid-column:2; grid-row:2; margin-top:2px }
  .modes span{ grid-column:2; grid-row:3; margin-top:4px; font-size:13.5px }
  .bay a{ grid-template-columns:auto minmax(0,1fr); gap:0 14px; padding:19px 0 }
  .bay .n{ display:none }
  .bay p{ grid-column:2; grid-row:2; margin-top:6px; font-size:13.5px }
  .bay em{ grid-column:2; grid-row:3; margin-top:10px }
  .bay a:hover{ padding-left:0 }
  #readout{ font-size:9.5px; letter-spacing:.12em }
  #bar{ padding:10px var(--gut); padding-top:calc(10px + env(safe-area-inset-top)) }
  .cta span{ padding:8px 14px; font-size:13px }
}
@media (max-width: 520px){
  .wm i{ display:none }
  #readout{ right:auto; left:50%; transform:translateX(-50%) }
}
@media (prefers-reduced-motion: reduce){
  #grain{ animation:none }
  .cue i{ animation:none; transform:scaleX(1) }
  html{ transition:none }
  .js .li{ transform:none } .js .lab, .js .lede, .js .sub, .js .row, .js .spec, .js .modes, .js .bay, .js .where, .js .fine, .js .cue{ opacity:1 }
}