/* Slide 01 "The old way" (#s2): a labelled orbit. Six small glass app windows (a light title bar with the task's name, its
   glyph, faint content lines, a blue rim glow) orbit the villa out of step, line up into one tidy row and fly into the
   phone in a soft blue flash. White and blue only, no red. Built and driven by s01_oldway.js, hidden off this scene and
   never built in still mode, where the plain task tags stay (Jeremy 2026-10-11) */
.ow-live #s2 .tags{display:none}   /* the windows carry the six tasks; the plain tags never show twice */
#ow{position:fixed;inset:0;z-index:3;pointer-events:none;display:none;overflow:hidden;font-family:var(--body)}
#ow.on{display:block}
/* a window: dark glass with a blue rim, a light app title bar on top; as wide as its name (the script evens them up) */
.ow-w{position:absolute;left:0;top:0;width:max-content;min-width:15em;border-radius:.75em;overflow:hidden;opacity:0;visibility:hidden;transform-origin:50% 50%;
  background:linear-gradient(165deg,rgba(38,50,90,.94),rgba(14,18,34,.95) 60%,rgba(9,11,20,.96));
  border:1px solid rgba(140,175,255,.75);
  box-shadow:0 0 0 1px rgba(11,12,7,.6),0 0 1.8em rgba(47,107,255,.55),0 0 .4em rgba(90,140,255,.7),0 1.1em 2.4em rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 1.2em rgba(47,107,255,.18);
  will-change:transform,opacity,filter;backface-visibility:hidden}
.ow-w::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.1),rgba(255,255,255,0) 38%,rgba(90,140,255,0) 70%,rgba(90,140,255,.14))}
.ow-b{position:relative;display:flex;align-items:center;gap:.42em;min-height:2.25em;padding:0 .9em 0 .8em;background:#F6F4F0;color:#1b1c1e;
  font-size:1em;font-weight:600;letter-spacing:.01em;line-height:1.2;white-space:nowrap;border-bottom:1px solid rgba(47,85,212,.25)}
.ow-b i{flex:none;width:.52em;height:.52em;border-radius:50%;background:#d2cdc5}
.ow-b i:first-child{background:#c9c3ba}
.ow-t{position:relative;flex:1;min-width:0;margin-left:.35em}
.ow-t b{display:block;font-weight:600}
/* typed twice: a blue offset copy of the title, flickered by the script */
.ow-t s{position:absolute;left:0;top:0;width:100%;text-decoration:none;color:rgba(47,107,255,.9);opacity:0;pointer-events:none}
.ow-c{display:flex;align-items:center;gap:.85em;padding:.8em .95em .9em}
.ow-c svg{flex:none;width:2.4em;height:2.4em;fill:none;stroke:#A9C2FF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 .3em rgba(90,140,255,.75))}
.ow-c p{flex:1;margin:0;display:flex;flex-direction:column;gap:.5em}
.ow-c p i{display:block;height:.42em;border-radius:.21em;background:rgba(170,195,255,.34)}
.ow-c p i:nth-child(2){width:68%;background:rgba(170,195,255,.24)}
.ow-c p i:nth-child(3){width:84%;background:rgba(170,195,255,.18)}
/* a phone: a narrow window, the name on up to two lines, never under 10px */
#ow.mob .ow-w{width:9.6em;min-width:0}
#ow.mob .ow-b{min-height:3.2em;padding:.35em .6em;white-space:normal}
#ow.mob .ow-b i{display:none}
#ow.mob .ow-t{margin-left:0}
#ow.mob .ow-c{padding:.45em .6em .5em;gap:.6em}
#ow.mob .ow-c svg{width:2em;height:2em}
/* the soft blue flash in the phone */
.ow-fl{position:absolute;left:0;top:0;width:200px;height:200px;border-radius:50%;opacity:0;z-index:400;transform-origin:50% 50%;
  background:radial-gradient(circle,rgba(235,242,255,1) 0,rgba(150,185,255,.85) 12%,rgba(70,125,255,.5) 32%,rgba(47,107,255,.18) 50%,rgba(47,107,255,0) 68%);mix-blend-mode:screen}
.ow-fl::after{content:"";position:absolute;inset:22%;border-radius:50%;border:1.5px solid rgba(190,212,255,.8);box-shadow:0 0 18px rgba(90,140,255,.8),inset 0 0 14px rgba(90,140,255,.6)}

/* 2026-10-19: the time comparison. The ten apps' running clock beside the orbit, then DealCloser's 4 min.
   Without the script (still page, no script) both rows read in full. */
.otime{display:grid;grid-template-columns:auto auto;justify-content:start;gap:6px 26px;margin-top:6px;padding-left:14px;border-left:2px solid var(--blue-t)}
.otime .ot-r{margin:0;display:flex;flex-direction:column;gap:2px;transition:opacity .4s}
.otime .ot-l{font-family:var(--tech);text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;font-weight:600;color:rgba(225,229,229,.7)}
.otime .ot-v{font-family:var(--tech);font-variant-numeric:tabular-nums;font-size:clamp(26px,2.6vw,38px);line-height:1.05;font-weight:600;color:#f5f7f7;text-shadow:0 1px 12px rgba(0,0,0,.6);min-width:3.6ch}
.otime .ot-dc .ot-v{color:#9FBAFF}
.otime .ot-bars{grid-column:1/-1;width:clamp(240px,22vw,320px);display:flex;flex-direction:column;gap:5px;margin-top:3px}
.otime .ot-bar{display:flex;gap:2px;height:9px}
.otime .ot-bo i{display:block;min-width:0;background:rgba(225,229,229,.62);border-radius:1px}
.otime .ot-bo i:nth-child(even){background:rgba(225,229,229,.4)}
.otime .ot-bn{width:10%}
.otime .ot-bn i{display:block;flex:1;background:#9FBAFF;border-radius:1px;box-shadow:0 0 10px rgba(90,140,255,.7);transform-origin:0 50%}
.otime .ot-n{grid-column:1/-1;margin:2px 0 0;max-width:44ch;font-size:12.5px;line-height:1.4;color:rgba(225,229,229,.78)}
.ow-live .otime .ot-dc{opacity:0}
.ow-live .otime .ot-dc.on{opacity:1}
@media (max-width:820px){
  .otime{gap:4px 20px;padding-left:11px;margin-top:2px}
  .otime .ot-bars{width:min(220px,52vw);gap:4px}
  .otime .ot-bar{height:7px}
  .otime .ot-l{font-size:9.5px}
  .otime .ot-v{font-size:24px}
  .otime .ot-n{font-size:11.5px;line-height:1.3}
}