/* =========================================================
   LA EQUIS OS — the LA EQUIS desktop
   ========================================================= */

@font-face{
  font-family:'CasualHuman';
  src:url('../assets/fonts/CasualHuman.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'CasualHuman';
  src:url('../assets/fonts/CasualHuman-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --ink:#12141c;
  --ink-2:#4a4e5c;
  --paper:#f5f3ee;
  --chrome:#e9e6de;
  --chrome-2:#dbd7cd;
  --line:#bdb9ae;
  --line-2:#d5d1c7;

  --acento:#2F86D8;
  --acento-d:#1C63A8;
  --acento-rgb:47,134,216;   /* for the rgba() with alpha */
  --red:#8e0a19;
  --navy:#012168;
  --sky:#00aafd;
  --gold:#f2c230;

  --menubar-h:30px;
  --dock-h:74px;
  --radius:12px;
  --shadow-win:0 24px 60px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.35) inset;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --hand:'CasualHuman',var(--ui);
  --ease:cubic-bezier(.2,.8,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--ink);
  background:#04070f;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* The desktop fades up on arrival. Deliberately an animation and not a
   JS class: if the JS ever failed, it would still end up visible. */
.desktop,.menubar,.dock{animation:encender .5s var(--ease) both}
@keyframes encender{from{opacity:0}to{opacity:1}}

/* =========================================================
   MENU BAR
   ========================================================= */
.menubar{
  position:fixed;top:0;left:0;right:0;height:var(--menubar-h);z-index:800;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 8px 0 4px;
  /* glass: the background shows through, with a light edge on top and
     a soft fall-off below. Not an opaque bar stuck on top. */
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.10) 55%,rgba(255,255,255,.04));
  -webkit-backdrop-filter:saturate(170%) blur(26px) brightness(1.08);
  backdrop-filter:saturate(170%) blur(26px) brightness(1.08);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,
             0 -12px 26px -14px rgba(0,0,0,.6),
             0 10px 30px -18px rgba(0,0,0,.75);
  color:rgba(255,255,255,.92);
  font-size:13px;
  padding-top:env(safe-area-inset-top);
  height:calc(var(--menubar-h) + env(safe-area-inset-top));
}
.menus{display:flex;align-items:center;gap:1px}
.menu-btn{padding:3px 10px;border-radius:5px;line-height:1.3;white-space:nowrap}
.menu-btn:hover{background:rgba(255,255,255,.16)}
.menu-btn[aria-expanded="true"]{background:var(--acento);color:#fff}
.logo-btn{padding:3px 9px}
.mb-star{width:15px;height:15px;fill:currentColor;display:block}
.menu-btn[aria-expanded="true"] .mb-star{fill:#fff}

.menubar-right{display:flex;align-items:center;gap:10px}
.mb-now{display:flex;align-items:center;gap:7px;max-width:32vw;font-size:11.5px;color:rgba(255,255,255,.72)}
.mb-now-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);letter-spacing:-.01em}
.mb-eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.mb-eq i{width:2px;background:var(--acento);height:4px;border-radius:1px;animation:eq .9s ease-in-out infinite}
.mb-eq i:nth-child(2){animation-delay:.15s}
.mb-eq i:nth-child(3){animation-delay:.3s}
.mb-eq i:nth-child(4){animation-delay:.45s}
body.paused-song .mb-eq i{animation-play-state:paused;height:3px}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.mb-audio{display:flex;align-items:center;gap:6px}
.mb-chip{min-width:26px;height:22px;padding:0 6px;border-radius:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;font-weight:700;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);
  transition:background .2s,border-color .2s,transform .2s var(--ease)}
.mb-chip:hover{background:var(--acento);border-color:var(--acento-d);color:#fff;transform:translateY(-1px)}
.mb-theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.mb-theme .ic-sun circle{fill:currentColor;stroke:none}
.mb-theme .ic-moon{fill:currentColor;stroke:none;display:none}
body.light .mb-theme .ic-sun{display:none}
body.light .mb-theme .ic-moon{display:block}
.mb-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:5px}
.mb-icon:hover{background:rgba(255,255,255,.16)}
.mb-icon svg{width:17px;height:17px;fill:currentColor;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;fill-rule:evenodd}
.mb-icon svg path[class]{fill:none}
.mb-icon .ic-off{display:none}
body.muted .mb-icon .ic-on{display:none}
body.muted .mb-icon .ic-off{display:block}
.mb-vol{
  -webkit-appearance:none;appearance:none;width:74px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,rgba(255,255,255,.92) var(--p,70%),rgba(255,255,255,.22) var(--p,70%));cursor:pointer;
}
.mb-vol::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.28);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.mb-vol::-moz-range-thumb{width:13px;height:13px;border:1px solid rgba(0,0,0,.28);border-radius:50%;background:#fff}
.mb-clock{white-space:nowrap;font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:5px;font-size:12.5px}
.mb-clock:hover{background:rgba(255,255,255,.16)}

/* dropdown */
.dropdowns{position:fixed;inset:0;z-index:850}
.dd-scrim{position:absolute;inset:0}
.dd{
  position:absolute;min-width:210px;padding:5px;
  background:rgba(250,249,245,.96);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(0,0,0,.14);border-radius:9px;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  animation:ddIn .13s var(--ease) both;transform-origin:top left;
}
@keyframes ddIn{from{opacity:0;transform:translateY(-5px) scale(.98)}}
.dd button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;padding:6px 10px;border-radius:6px;font-size:13px;text-align:left}
.dd button:hover:not(:disabled){background:var(--acento-d);color:#fff}
.dd button:disabled{opacity:.4;cursor:default}
.dd .dd-k{font-size:11px;opacity:.55;font-family:var(--mono)}
.dd hr{border:0;border-top:1px solid rgba(0,0,0,.12);margin:5px 8px}
.dd .dd-head{padding:7px 10px 4px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5}

/* =========================================================
   DESKTOP
   ========================================================= */
.desktop{
  position:fixed;inset:0;
  padding-top:calc(var(--menubar-h) + env(safe-area-inset-top));
  overflow:hidden;
}
.wallpaper{position:absolute;inset:0;z-index:0;background:
  radial-gradient(90% 70% at 18% 8%, #10307f 0%, rgba(16,48,127,0) 60%),
  radial-gradient(70% 60% at 88% 92%, #3a2c0a 0%, rgba(58,44,10,0) 62%),
  linear-gradient(170deg,#061334 0%,#040a1c 55%,#02050d 100%);
}
.wp-gl{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.2s var(--ease)}
.wp-gl.on{opacity:1}
/* with the WebGL sky running, the CSS stars are redundant */
.wp-gl.on ~ .wp-stars{opacity:0}
body.light .wp-gl{opacity:0}
.wp-stars{
  position:absolute;inset:-20%;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.2px 1.2px at 70% 16%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.6px 1.6px at 43% 72%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.1px 1.1px at 85% 60%,rgba(255,255,255,.65),transparent),
    radial-gradient(1.3px 1.3px at 12% 82%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 58% 45%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.5px 1.5px at 92% 28%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 33% 12%,rgba(255,255,255,.5),transparent);
  background-size:520px 520px,700px 700px,460px 460px,820px 820px,600px 600px,380px 380px,900px 900px,340px 340px;
  animation:drift 120s linear infinite;
}
@keyframes drift{to{transform:translate3d(-60px,-40px,0)}}
.wp-glow{transition:translate .5s cubic-bezier(.22,1,.36,1);position:absolute;left:50%;top:44%;width:min(1100px,120vw);height:min(1100px,120vw);transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(var(--acento-rgb),.16) 0%,rgba(var(--acento-rgb),0) 62%);pointer-events:none}
.scanlines{position:absolute;inset:0;z-index:700;pointer-events:none;opacity:.34;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;transition:opacity .3s}
body.no-crt .scanlines{opacity:0}

.hero-type{transition:translate .5s cubic-bezier(.22,1,.36,1);
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  z-index:1;text-align:center;color:#fff;pointer-events:none;user-select:none;
  font-family:var(--hand);font-weight:700;line-height:.82;
  opacity:.1;letter-spacing:.01em;white-space:nowrap;
}
.hero-type span{display:block}
.ht-1{font-size:clamp(60px,13vw,190px)}
.ht-2{font-size:clamp(72px,16vw,235px);opacity:.85}

/* ---------- draggable objects ---------- */
.stage{position:absolute;inset:0;z-index:5}
.obj{
  position:absolute;
  display:block;padding:0;border:0;background:none;
  cursor:grab;touch-action:none;
  transform:translate(-50%,-50%);
  transition:filter .3s var(--ease);
  will-change:transform;
}
.obj.dragging{cursor:grabbing;z-index:60!important}
.obj-media{position:relative;display:block;transition:transform .45s var(--ease),filter .45s var(--ease)}
.obj img{width:100%;height:auto;pointer-events:none;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));
  animation:float var(--dur,7s) ease-in-out var(--del,0s) infinite;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--rot,0deg) + 1.2deg))}}
.obj:hover .obj-media,.obj:focus-visible .obj-media{transform:scale(1.06)}
.obj:hover img{filter:drop-shadow(0 30px 44px rgba(0,0,0,.6)) drop-shadow(0 0 26px var(--glow,rgba(var(--acento-rgb),.5)))}
.obj.locked img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.5)) grayscale(.35) brightness(.82) blur(6px)}
.obj.locked:hover img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.5)) grayscale(.15) brightness(.95) blur(4px)}
.obj-label{
  position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:4px 11px;border-radius:99px;
  background:rgba(8,12,26,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  opacity:0;transition:opacity .25s var(--ease),transform .25s var(--ease);
  pointer-events:none;
}
.obj:hover .obj-label,.obj:focus-visible .obj-label,.obj.touched .obj-label{opacity:1;transform:translateX(-50%) translateY(-4px)}
.obj-label .lk{font-size:10px}
.obj-num{
  position:absolute;top:-6px;left:-6px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;
  background:var(--acento);color:#fff;border:2px solid rgba(255,255,255,.85);
  box-shadow:0 4px 12px rgba(0,0,0,.4);opacity:0;transition:opacity .25s,transform .25s;transform:scale(.6)
}
.obj:hover .obj-num,.obj:focus-visible .obj-num{opacity:1;transform:scale(1)}
.obj.locked .obj-num{background:#4a4e5c}
.obj .play-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--acento-rgb),.94);box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0;transition:all .25s var(--ease);pointer-events:none;
}
.obj .play-badge svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.obj:hover .play-badge,.obj:focus-visible .play-badge{opacity:1;transform:translate(-50%,-50%) scale(1)}
.obj.locked .play-badge{background:rgba(20,24,40,.9)}
.obj.playing-now .play-badge{opacity:1;transform:translate(-50%,-50%) scale(1);background:rgba(var(--acento-rgb),.94)}

/* sticky note */
.note{
  position:absolute;z-index:6;width:186px;padding:16px 16px 18px;
  background:linear-gradient(160deg,#fff6a8,#ffe873);
  color:#3a3200;font-family:var(--hand);font-size:16px;line-height:1.28;
  box-shadow:0 16px 30px rgba(0,0,0,.42);
  transform:rotate(-4deg);cursor:pointer;text-align:left;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  touch-action:none;
}
.note:hover{transform:rotate(-1deg) scale(1.04);box-shadow:0 22px 40px rgba(0,0,0,.5)}
.note::after{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:54px;height:18px;background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.note b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:6px;font-family:var(--ui);font-weight:700}

/* polaroid */
.polaroid{
  position:absolute;z-index:6;width:150px;padding:9px 9px 32px;background:#fbfaf6;
  box-shadow:0 18px 34px rgba(0,0,0,.45);transform:rotate(3deg);cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);touch-action:none;
}
.polaroid img{width:100%;height:150px;object-fit:cover;object-position:50% 30%}
.polaroid span{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-family:var(--hand);font-size:14px;color:#2a2a2a}
.polaroid:hover{transform:rotate(0deg) scale(1.05);box-shadow:0 24px 44px rgba(0,0,0,.55)}

.hint{
  position:absolute;left:50%;bottom:calc(var(--dock-h) + 18px);transform:translateX(-50%);
  z-index:20;display:flex;align-items:center;gap:9px;
  padding:7px 16px;border-radius:99px;white-space:nowrap;
  background:rgba(8,12,26,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.82);
  font-size:12px;letter-spacing:.02em;transition:opacity .5s;
}
.hint.hide{opacity:0;pointer-events:none}
.hint-dot{width:7px;height:7px;border-radius:50%;background:var(--acento);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- desktop icons ---------- */
.icons{
  position:absolute;top:26px;right:16px;z-index:10;
  display:flex;flex-direction:column;gap:4px;
}
.dicon{
  width:92px;padding:8px 4px 6px;text-align:center;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
/* The old box covered more than it pointed at. Now the icon glitches
   for a moment, like a signal dropping out: noticed without taking up
   any room. */
/* The icons are line work and carry no colour of their own: they
   inherit it from wherever they sit. In the desktop column, which is
   dark, they go light; in the dock, which is a light plate, they go
   ink. As a bonus they now follow light mode, which the old ones
   couldn't: their colours were baked in.
   Weight is set here rather than in the SVG because the same drawing is
   painted at 46 px, 26 and 23; with one weight the small ones dissolve. */
.dicon-art svg,.dock-btn svg{display:block;fill:none;stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round}
.dicon-art svg .ac,.dock-btn svg .ac{stroke:var(--ac)}

.dicon-art{width:46px;height:46px;color:rgba(255,255,255,.88);--ac:#6FB4F0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.dicon-art svg{width:100%;height:100%;stroke-width:1.8}
.dicon:hover .dicon-art,.dicon:focus-visible .dicon-art{animation:fallo .45s steps(1,end) infinite}
@keyframes fallo{
  0%   {transform:translate(0)      ;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
  16%  {transform:translate(-1.5px,1px);filter:drop-shadow(1.5px 0 0 rgba(0,229,255,.9)) drop-shadow(-1.5px 0 0 rgba(255,45,111,.9))}
  32%  {transform:translate(1.5px,-1px);filter:drop-shadow(-2px 0 0 rgba(0,229,255,.8)) drop-shadow(2px 0 0 rgba(255,45,111,.8))}
  48%  {transform:translate(-1px,0) ;filter:drop-shadow(0 0 3px rgba(255,255,255,.55));opacity:.72}
  64%  {transform:translate(1px,1px);filter:drop-shadow(1.5px 0 0 rgba(255,214,90,.85)) drop-shadow(-1.5px 0 0 rgba(0,229,255,.7))}
  80%  {transform:translate(0)      ;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
  100% {transform:translate(0)      ;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
}
.dicon span{font-size:11px;line-height:1.25;letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.8);max-width:92px;
  transition:color .15s}
.dicon:hover span,.dicon:focus-visible span{color:#fff;animation:falloTexto .45s steps(1,end) infinite}
@keyframes falloTexto{
  0%,80%,100%{transform:translateX(0);text-shadow:0 1px 3px rgba(0,0,0,.8)}
  20%{transform:translateX(-1.5px);text-shadow:1.5px 0 rgba(255,45,111,.9),-1.5px 0 rgba(0,229,255,.9)}
  55%{transform:translateX(1.5px);text-shadow:-1.5px 0 rgba(255,45,111,.9),1.5px 0 rgba(0,229,255,.9)}
}
/* with a keyboard you need to see where you are: the glitch alone isn't enough */
.dicon:focus-visible{outline:2px solid var(--kid-gold,#ffd65a);outline-offset:2px;border-radius:9px}
@media (prefers-reduced-motion:reduce){
  .dicon:hover .dicon-art,.dicon:focus-visible .dicon-art,
  .dicon:hover span,.dicon:focus-visible span{animation:none}
  .dicon:hover .dicon-art{filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)) brightness(1.3)}
}

/* =========================================================
   WINDOWS
   ========================================================= */
.windows{position:absolute;inset:0;z-index:100;pointer-events:none}
.win{
  position:absolute;pointer-events:auto;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid rgba(0,0,0,.4);border-radius:var(--radius);
  box-shadow:var(--shadow-win);overflow:hidden;
  animation:winIn .22s var(--ease) both;
  min-width:280px;min-height:180px;
}
@keyframes winIn{from{opacity:0;transform:scale(.94) translateY(12px)}}
.win.closing{animation:winOut .16s var(--ease) both}
@keyframes winOut{to{opacity:0;transform:scale(.96)}}
/* maximised: below the menu bar (otherwise the title bar is covered and
   there's no way to close it) and above the dock */
.win.max{left:0!important;width:100%!important;border-radius:0;border-width:0;
  top:calc(var(--menubar-h) + env(safe-area-inset-top))!important;
  height:calc(100% - var(--menubar-h) - env(safe-area-inset-top) - var(--dock-h) - 22px)!important}
.titlebar{
  height:32px;flex:0 0 32px;display:flex;align-items:center;gap:8px;padding:0 10px;
  background:linear-gradient(180deg,#f7f5f0,#e4e0d6);
  border-bottom:1px solid var(--line);cursor:grab;user-select:none;position:relative;
}
.titlebar:active{cursor:grabbing}
.win:not(.focus) .titlebar{background:linear-gradient(180deg,#f2f0eb,#eae7e0);color:#8b8880}
.tb-dots{display:flex;gap:7px;z-index:2}
.dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.22);position:relative;transition:filter .15s}
.dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.dot-close{background:#ff5f57}.dot-min{background:#febc2e}.dot-zoom{background:#28c840}
.win:not(.focus) .dot{background:#d2cfc7}
.tb-dots:hover .dot{filter:brightness(.94)}
.tb-title{
  position:absolute;left:0;right:0;text-align:center;pointer-events:none;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;
}
.tb-title .tb-ico{margin-right:6px;font-size:12px}
.win-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--paper);position:relative}
.win-body::-webkit-scrollbar{width:13px;height:13px}
.win-body::-webkit-scrollbar-track{background:#efece5;border-left:1px solid var(--line-2)}
.win-body::-webkit-scrollbar-thumb{background:#c3bfb4;border:3px solid #efece5;border-radius:99px}
.win-body::-webkit-scrollbar-thumb:hover{background:#a9a59a}
.resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:5;touch-action:none}
.resize::after{content:'';position:absolute;right:3px;bottom:3px;width:9px;height:9px;
  background:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 3px)}

/* =========================================================
   DOCK
   ========================================================= */
.dock{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:600;
  display:flex;align-items:flex-end;gap:8px;padding:8px 10px;
  background:rgba(240,238,232,.62);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.4);border-radius:19px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  max-width:calc(100vw - 20px);
}
.dock-btn{position:relative;width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s cubic-bezier(.22,1,.36,1),background .2s;
  will-change:transform;background:rgba(255,255,255,.55);
  box-shadow:0 2px 6px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.9) inset}
.dock-btn:hover{transform:translateY(-9px) scale(1.07);box-shadow:0 12px 22px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.9) inset}
.dock-btn:active{transform:translateY(-4px) scale(1.02);transition-duration:.12s}
.dock-btn{color:var(--ink);--ac:var(--acento-d)}
.dock-btn svg{width:26px;height:26px;stroke-width:2.3}
.dock-btn img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.dock-btn.on::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--ink)}
.dock-sep{width:1px;align-self:stretch;margin:4px 3px;background:rgba(0,0,0,.14)}
.dock-tip{
  position:absolute;bottom:64px;left:50%;transform:translateX(-50%) translateY(5px) scale(.96);
  padding:5px 11px;border-radius:9px;white-space:nowrap;
  background:rgba(246,244,239,.94);
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  color:var(--ink);font-size:11.5px;letter-spacing:.01em;
  opacity:0;pointer-events:none;
  transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1);
}
.dock-tip::after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;
  border:5px solid transparent;border-top-color:rgba(246,244,239,.94)}
.dock-btn:hover .dock-tip,.dock-btn:focus-visible .dock-tip{
  opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

/* =========================================================
   SHARED CONTENT STYLES
   ========================================================= */
.pad{padding:22px 24px}
.hd{font-family:var(--hand);font-weight:700;line-height:1;margin:0}
.eyebrow{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px}
.rule{border:0;border-top:1px solid var(--line-2);margin:18px 0}
.muted{color:var(--ink-2)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.tag-live{background:rgba(var(--acento-rgb),.14);color:var(--acento-d)}
.tag-lock{background:rgba(0,0,0,.07);color:var(--ink-2)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:9px;font-size:13.5px;font-weight:700;letter-spacing:.02em;
  background:var(--ink);color:#fff;transition:transform .16s var(--ease),background .16s,opacity .16s;
  border:1px solid rgba(0,0,0,.25);
}
.btn:hover{transform:translateY(-1px)}
.btn-o{background:var(--acento-d);border-color:var(--acento-d)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(0,0,0,.05)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:15px;height:15px;fill:currentColor}

/* ---------- ALBUM ---------- */
.album-hero{
  display:flex;gap:22px;padding:24px;align-items:flex-end;
  background:linear-gradient(140deg,#071539,#0d2260 60%,#3a2c0a);color:#fff;
}
.album-hero img{width:150px;height:150px;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.5);flex:0 0 auto}
.album-hero .ah-t{font-family:var(--hand);font-weight:700;font-size:44px;line-height:.9;margin:0 0 6px}
.album-hero .ah-m{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.72;margin:0 0 12px}
.album-hero .ah-d{font-size:13.5px;line-height:1.5;opacity:.9;margin:0;max-width:44ch}
.tracks{list-style:none;margin:0;padding:6px 0}
.trk{display:flex;align-items:center;gap:14px;padding:11px 24px;transition:background .15s;cursor:pointer;width:100%;text-align:left}
.trk:hover{background:rgba(0,0,0,.045)}
.trk + .trk{border-top:1px solid rgba(0,0,0,.07)}
.trk-n{width:20px;font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right;flex:0 0 auto}
.trk-art{width:44px;height:44px;border-radius:5px;object-fit:cover;flex:0 0 auto;background:#ddd;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.trk.locked .trk-art{filter:blur(5px) grayscale(.5) brightness(.8)}
.trk-info{flex:1;min-width:0;display:block}
.trk-t{display:block;font-weight:700;font-size:14.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk.locked .trk-t{color:var(--ink-2)}
.trk-s{display:block;font-size:11.5px;color:var(--ink-2);margin-top:2px}
.trk-r{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.trk-time{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.trk-go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.06)}
.trk:hover .trk-go{background:var(--acento);color:#fff}
.trk.locked:hover .trk-go{background:rgba(0,0,0,.12);color:inherit}
.trk-go svg{width:13px;height:13px;fill:currentColor}
.trk.is-playing{background:rgba(var(--acento-rgb),.08)}
.trk.is-playing .trk-t{color:var(--acento-d)}

/* ---------- PLAYER ---------- */
.player{padding:0;display:flex;flex-direction:column;height:100%;background:linear-gradient(175deg,#0a1230,#05070f)}
.pl-art{position:relative;padding:26px 26px 12px;display:flex;align-items:center;justify-content:center;min-height:170px}
.pl-art img{width:min(240px,56vw);height:auto;filter:drop-shadow(0 22px 40px rgba(0,0,0,.65))}
.pl-art .spin{animation:spinStar 14s linear infinite}
body.paused-song .pl-art .spin{animation-play-state:paused}
.pl-meta{text-align:center;color:#fff;padding:6px 24px 4px}
.pl-t{font-family:var(--hand);font-weight:700;font-size:32px;line-height:1;margin:0 0 6px}
.pl-a{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0}
.pl-viz{height:44px;padding:8px 24px 0;display:flex;align-items:flex-end;gap:2px}
.pl-viz i{flex:1;background:linear-gradient(180deg,var(--acento),rgba(var(--acento-rgb),.25));border-radius:2px 2px 0 0;height:2px;transition:height .07s linear}
.pl-ctrl{padding:10px 24px 26px;color:#fff}
.pl-bar{position:relative;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.pl-bar-t{position:absolute;left:0;right:0;height:5px;border-radius:99px;background:rgba(255,255,255,.18)}
.pl-bar-f{position:absolute;left:0;height:5px;border-radius:99px;background:var(--acento);width:0%}
.pl-bar-h{position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;left:0;transform:translateX(-50%);box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .15s}
.pl-bar:hover .pl-bar-h{transform:translateX(-50%) scale(1.2)}
.pl-times{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55);margin-top:2px}
.pl-btns{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:14px}
.pl-btns button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.75);transition:color .15s,transform .15s}
.pl-btns button:hover{color:#fff;transform:scale(1.08)}
.pl-btns svg{width:17px;height:17px;fill:currentColor}
.pl-play{width:58px!important;height:58px!important;background:var(--acento);color:#fff!important;box-shadow:0 10px 26px rgba(var(--acento-rgb),.45)}
.pl-play svg{width:22px;height:22px}
.pl-note{text-align:center;font-size:11.5px;color:rgba(255,255,255,.4);margin:16px 0 0}

/* ---------- GALLERY ---------- */
.gal{columns:2;column-gap:10px;padding:14px}
.gal button{display:block;width:100%;margin:0 0 10px;border-radius:7px;overflow:hidden;break-inside:avoid;
  background:#ddd;box-shadow:0 3px 10px rgba(0,0,0,.18);transition:transform .2s var(--ease),box-shadow .2s}
.gal button:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 10px 22px rgba(0,0,0,.28)}
.gal img{width:100%;height:auto}
.viewer{background:#0a0c14;display:flex;flex-direction:column;height:100%}
.viewer-img{flex:1;display:grid;place-items:center;padding:14px;min-height:0}
.viewer-img img{max-width:100%;max-height:100%;width:auto;object-fit:contain;border-radius:4px}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.75);font-size:12px}
.viewer-bar button{padding:6px 12px;border-radius:7px;background:rgba(255,255,255,.1);font-size:12px}
.viewer-bar button:hover{background:rgba(255,255,255,.2)}

/* ---------- ABOUT ---------- */
.about-top{display:flex;gap:20px;padding:22px 24px 6px;align-items:flex-start}
.about-top img{width:132px;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.28);flex:0 0 auto}
.about-p{font-size:14px;line-height:1.62;margin:0 0 12px}
.stats{display:grid;gap:9px;margin:4px 0 0}
.stat{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px}
.stat span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.stat i{display:block;height:11px;border-radius:3px;background:rgba(0,0,0,.08);position:relative;overflow:hidden}
.stat i::after{content:'';position:absolute;inset:0;width:var(--v,50%);border-radius:3px;background:var(--c,var(--acento));
  transform-origin:left;animation:grow .9s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin-top:20px}
.fact{background:var(--paper);padding:14px 16px}
.fact b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px;font-weight:700}
.fact span{font-size:13.5px;font-weight:700}
.sig{font-family:var(--hand);font-size:30px;color:var(--acento);margin:18px 24px 24px;transform:rotate(-2deg);display:inline-block}

/* ---------- STORE ---------- */
.store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;padding:20px 24px}
.sku{border:1px solid var(--line-2);border-radius:11px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:9px;
  transition:transform .18s var(--ease),box-shadow .18s,border-color .18s}
.sku:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.12);border-color:var(--line)}
.sku-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sku-ico{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;font-size:20px;background:rgba(0,0,0,.05)}
.sku h4{margin:0;font-size:15px}
.sku .price{font-family:var(--mono);font-size:15px;font-weight:700}
.sku p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2);flex:1}
.sku .btn{width:100%;margin-top:4px;padding:9px 14px;font-size:12.5px}
.store-note{padding:0 24px 24px;font-size:12px;color:var(--ink-2);line-height:1.6}

/* ---------- GUESTBOOK ---------- */
.gb-form{padding:18px 24px;background:#fff;border-bottom:1px solid var(--line-2)}
.gb-row{display:flex;gap:10px;margin-bottom:10px}
.gb-form input,.gb-form textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:#fdfcf9;
  font-size:13.5px;color:var(--ink);resize:none;
}
.gb-form input:focus,.gb-form textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(var(--acento-rgb),.14)}
.gb-form .gb-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.gb-count{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.gb-list{list-style:none;margin:0;padding:8px 0 20px}
.gb-item{padding:13px 24px;border-bottom:1px solid rgba(0,0,0,.07);animation:pop .3s var(--ease) both}
.gb-msg{font-size:14px;line-height:1.5;margin:0 0 5px}
.gb-msg::before{content:'> ';color:var(--acento);font-family:var(--mono)}
.gb-meta{font-size:11.5px;color:var(--ink-2);font-family:var(--mono)}
.gb-mine{background:rgba(var(--acento-rgb),.06)}

/* ---------- README / text window ---------- */
.txt{padding:22px 26px;font-family:var(--mono);font-size:12.8px;line-height:1.75;white-space:pre-wrap;color:#22242c}
.txt b{color:var(--acento-d)}

/* ---------- dialog ---------- */
.dlg{padding:26px 26px 22px;text-align:center}
.dlg-ico{font-size:34px;margin-bottom:10px}
.dlg h3{margin:0 0 8px;font-size:17px}
.dlg p{margin:0 0 18px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:840px){
  :root{--dock-h:78px}
  .icons{display:none}
  .hero-type{top:calc(env(safe-area-inset-top) + 76px);transform:translate(-50%,0);opacity:.14}
  .ht-1{font-size:13vw}.ht-2{font-size:16vw}
  .note,.polaroid{display:none}
  .hint{bottom:calc(var(--dock-h) + 14px);font-size:11px;padding:6px 13px;max-width:92vw}
  .menubar{font-size:12.5px}
  .menu-btn{padding:3px 7px}
  .menu-btn[data-menu="archivo"],.menu-btn[data-menu="ayuda"]{display:none}
  .mb-now{display:none!important}
  .mb-vol{width:56px}

  /* stage becomes a scrollable shelf of objects */
  .stage{
    position:absolute;inset:auto 0 0 0;top:calc(env(safe-area-inset-top) + 150px);
    bottom:calc(var(--dock-h) + 46px);
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;
    padding:14px 16px 26px;align-content:start;
  }
  .obj{position:relative!important;left:auto!important;top:auto!important;transform:none!important;
    width:auto!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;
    touch-action:pan-y}  /* let finger scrolling through: on mobile you don't drag */
  .obj img{animation:none;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));max-height:160px;width:auto;margin:0 auto}
  .obj-media{display:flex;align-items:center;justify-content:center;min-height:164px;width:100%}
  .obj-label{position:static;transform:none!important;opacity:1;margin-top:10px;font-size:10px;padding:4px 9px;white-space:normal;text-align:center;justify-content:center}
  .obj-num{opacity:1;transform:scale(1);top:0;left:0}
  .obj .play-badge{width:44px;height:44px;opacity:.92;transform:translate(-50%,-50%) scale(1)}
  .obj .play-badge svg{width:17px;height:17px}

  /* windows become sheets */
  .win{
    left:0!important;top:auto!important;bottom:0!important;
    width:100%!important;height:calc(100% - env(safe-area-inset-top) - 34px)!important;
    border-radius:16px 16px 0 0;border-width:0;
    animation:sheetIn .26s var(--ease) both;
  }
  @keyframes sheetIn{from{transform:translateY(100%)}}
  .win.closing{animation:sheetOut .2s var(--ease) both}
  @keyframes sheetOut{to{transform:translateY(100%);opacity:.6}}
  .win.max{border-radius:16px 16px 0 0}
  .win-body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom))}
  .player{min-height:100%;justify-content:center}
  .titlebar{height:46px;flex-basis:46px;cursor:default}
  .titlebar::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:99px;background:rgba(0,0,0,.18)}
  .tb-title{font-size:13.5px;top:14px}
  .dot{width:15px;height:15px}
  .dot-min,.dot-zoom{display:none}
  .resize{display:none}

  /* dock = bottom tab bar */
  .dock{
    left:0;right:0;bottom:0;transform:none;max-width:none;border-radius:0;
    justify-content:space-around;gap:0;padding:7px 4px calc(7px + env(safe-area-inset-bottom));
    border-left:0;border-right:0;border-bottom:0;background:rgba(244,242,236,.92);
  }
  .dock-btn{width:52px;height:46px;border-radius:11px;background:none;box-shadow:none}
  .dock-btn:hover{transform:none}
  .dock-btn svg{width:23px;height:23px;stroke-width:2.6}
  .dock-sep{display:none}
  .dock-tip{display:none}
  .dock-btn.on{background:rgba(0,0,0,.08)}
  .dock-btn.on::after{display:none}
  .dock-btn.desk-only{display:none}

  .album-hero{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}
  .album-hero img{width:120px;height:120px}
  .album-hero .ah-t{font-size:36px}
  .trk{padding:11px 16px;gap:11px}
  .about-top{flex-direction:column;padding:20px 20px 4px}
  .about-top img{width:44%;max-width:180px}
  .pad{padding:18px 20px}
  .gal{columns:2;padding:10px}
  .store-grid{padding:16px;grid-template-columns:1fr}
  .gb-form,.gb-item{padding-left:18px;padding-right:18px}
  .gb-row{flex-direction:column}
  .scanlines{opacity:.3}
}
@media (max-width:380px){
  .stage{grid-template-columns:1fr}
  .obj img{max-height:190px}
}
@media (min-width:841px){
  .obj.mob-only{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .obj img{animation:none}
}

/* =========================================================
   THE DROP NOTICE — Laylo
   Their popup arrives with a nearly transparent scrim (20% black) and
   the form is unreadable over the desktop. Theirs are inline styles, so
   !important is needed here to override them.
   ========================================================= */
#laylo-popup-scrim-d6tew{
  background:rgba(4,8,20,.72)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#laylo-popup-scrim-d6tew #laylo-popup-scrim-content{
  background:#fff;border-radius:16px;padding:14px 16px 18px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  width:min(92%,460px)!important;
}
#laylo-popup-scrim-d6tew iframe[id^="laylo-drop"]{background:#fff;border-radius:10px}
#laylo-popup-scrim-close{color:#12141c!important;line-height:1}

/* =========================================================
   THE DROP NOTICE (the invite in Connect)
   Their SDK opens the form in its own window; all that lives here is
   the invitation. Embedding it by hand does not work: it renders blank.
   ========================================================= */
.aviso-caja{margin:16px 20px 0;padding:16px 0 0;border-top:1px solid rgba(0,0,0,.08);text-align:center}
.aviso-txt{font-size:12.5px;line-height:1.6;color:var(--muted,#7a776f);margin:0 0 12px}

/* =========================================================
   CONNECT — Spotify and Instagram
   ========================================================= */
.sp-wrap{padding:0 20px}
.sp-frame{display:block;width:100%;border:0;border-radius:12px;background:#121212;min-height:352px}
.lnks{list-style:none;margin:0;padding:16px 20px 22px;display:flex;flex-direction:column;gap:8px}
.lnk{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.03);text-decoration:none;color:inherit;
  transition:transform .18s var(--ease),border-color .18s,background .18s}
.lnk:hover{transform:translateX(3px);border-color:var(--acento);background:rgba(var(--acento-rgb),.06)}
.lnk-ico{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;
  background:var(--ink,#12141c);color:#fff;font-size:13px}
.lnk-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.lnk-txt b{font-size:14px;letter-spacing:.01em}
.lnk-txt i{font-style:normal;font-size:12px;opacity:.6}
/* the contact row is a <button>, not a link, because the address does
   not exist until it is clicked — it has to match the rows around it */
button.lnk{width:100%;font:inherit;text-align:left;cursor:pointer}
/* once the address is showing, the row is a copy button: say so */
.correo-vivo .lnk-txt i{opacity:.85;user-select:text}
button.correo-vivo:hover .lnk-go{color:var(--acento)}
.lnk-go svg{width:16px;height:16px;display:block}
/* the plain buttons (portfolio, about, the Help window): address on the
   left, the copy mark on the right, inside the same button */
button.correo-vivo{display:inline-flex;align-items:center;gap:10px}
.correo-ico{display:flex;opacity:.65}
.correo-ico svg{width:15px;height:15px}
button.correo-vivo:hover .correo-ico{opacity:1}

/* store buttons for things that cannot be reserved yet. Still clickable
   — the notice explains what is coming — but they no longer look like a
   live purchase. */
.btn.is-soon{background:transparent;color:var(--ink,#12141c);opacity:.55;
  border:1px dashed rgba(0,0,0,.28);box-shadow:none;
  display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn.is-soon:hover{opacity:.8;border-color:var(--acento);color:var(--acento);transform:none}
.soon-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:99px;padding:1px 6px;opacity:.8}
.lnk-go{margin-left:auto;opacity:.35;font-size:15px}
.lnk:hover .lnk-go{opacity:1;color:var(--acento)}

/* =========================================================
   WORK — the portfolio
   The logo strip is other people's trademarks, so it gets no colour
   treatment of ours: they sit in a neutral tile at their own size.
   ========================================================= */
.tr-marcas{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
  gap:8px;padding:16px 24px 6px}
.tr-marca{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line-2);
  border-radius:10px;background:#fff;overflow:hidden;
  transition:border-color .2s,transform .2s var(--ease)}
.tr-marca:hover{border-color:var(--acento);transform:translateY(-2px)}
.tr-marca img{width:100%;height:100%;object-fit:contain;padding:9px}

/* Something he built, not something he was placed in: it gets a strip
   of stills and a whole-block link, not a one-line row. */
.tr-hecho{display:block;text-decoration:none;color:inherit;border:1px solid var(--line-2);
  border-radius:12px;overflow:hidden;transition:border-color .2s,transform .2s var(--ease)}
.tr-hecho:hover{border-color:var(--acento);transform:translateY(-2px)}
.tr-tiras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2)}
.tr-tiras img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.tr-hecho-pie{display:flex;align-items:center;gap:14px;padding:11px 13px}
.tr-hecho .tr-t em{font-style:normal;color:var(--acento-d)}
.tr-hecho:hover .tr-t{color:var(--acento-d)}

.tr-bloque{padding:16px 24px 0}
.tr-bloque .eyebrow{margin:0 0 8px}
.tr-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tr-fila{display:flex;align-items:center;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line-2)}
.tr-fila:last-child{border-bottom:0}
.tr-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.tr-t{font-size:14.5px;letter-spacing:.01em;font-weight:500}
.tr-d{font-style:normal;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.tr-a{flex:0 0 auto;font-family:var(--mono);font-size:11px;
  color:var(--acento-d);white-space:nowrap}


/* =========================================================
   DATA — how far the music has travelled
   The shape comes from the panel the provider shipped (it was well
   resolved); the colour and the type are the house's.
   ========================================================= */
.cif{padding:22px 24px 20px}
.cif-cab{display:flex;align-items:center;gap:16px;padding-bottom:20px;
  border-bottom:1px solid var(--line-2)}
.cif-foto{width:68px;height:68px;flex:0 0 auto;border-radius:14px;object-fit:cover;
  object-position:50% 28%;border:1px solid var(--line-2);
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.cif-quien h2{margin:0 0 4px;font-size:25px;letter-spacing:.01em;line-height:1.05}
.cif-quien p{margin:0;font-size:13px;color:var(--ink-2)}
.cif-quien p b{font-weight:600;color:var(--acento-d)}

.cif-rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:20px 0 0}
.cif-caja{aspect-ratio:1.9/1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;border:1px solid var(--line-2);border-radius:12px;
  background:rgba(0,0,0,.025);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s cubic-bezier(.22,1,.36,1),
             border-color .2s,background .2s;
  transition-delay:calc(var(--i) * .07s)}
.cif.go .cif-caja{opacity:1;transform:none}
.cif-caja:hover{border-color:var(--acento);background:rgba(var(--acento-rgb),.05)}
.cif-n{font-family:var(--mono);font-size:27px;line-height:1;letter-spacing:-.02em;
  color:var(--acento-d)}
.cif-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2)}
.cif-pie{margin:20px 0 0;text-align:center;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);opacity:.65}

@media (max-width:840px){ .cif-rejilla{grid-template-columns:repeat(2,1fr)} }

/* =========================================================
   ABOUT LA EQUIS OS/* =========================================================
   ABOUT LA EQUIS OS/* =========================================================
   ABOUT LA EQUIS OS
   ========================================================= */
.os-head{text-align:center;padding:26px 24px 16px}
.os-star{display:block;width:40px;height:40px;margin:0 auto 12px}
.os-star svg{width:100%;height:100%;fill:var(--acento)}
.os-name{font-family:var(--mono);font-size:22px;letter-spacing:.2em;margin:0 0 6px;font-weight:400}
.os-ver{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;opacity:.6;margin:0}
.os-rel{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.os-r{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.03)}
.os-r.is-now{border-color:var(--acento);background:rgba(var(--acento-rgb),.07)}
.os-r.is-soon{opacity:.5}
.os-r-v{font-family:var(--mono);font-size:12px;opacity:.55;padding-top:2px;flex:0 0 auto}
.os-r-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.os-r-b b{font-size:16px;letter-spacing:.02em}
.os-r-b i{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.os-r-b em{font-style:normal;font-size:12.5px;opacity:.75;margin-top:3px}
.os-r-tag{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 7px;border-radius:99px;border:1px solid currentColor;opacity:.5}
.os-r.is-now .os-r-tag{color:var(--acento);opacity:1}
.os-foot{font-size:11.5px;line-height:1.6;opacity:.5;margin:18px 0 0}

/* =========================================================
   THE CHARACTER SHEET
   The model sheet lifted off the paper: each piece is its own crop
   over the desktop sky, with its own depth and its own drift. The
   panel frames and the stat bars are drawn here, they aren't image.
   ========================================================= */
:root{ --kid-gold:#ffd65a; }

.win-sheet .win-body{background:#03060f}
.scene-wrap{height:100%;display:flex;flex-direction:column;background:#03060f}
.scene-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:6px}
.scene{position:relative;aspect-ratio:3/2;width:100%;max-height:100%;margin:auto;overflow:hidden;
  container-type:inline-size;
  border-radius:4px;
  background:radial-gradient(90% 80% at 16% 6%,#10307f 0%,rgba(16,48,127,0) 60%),
             radial-gradient(70% 70% at 92% 96%,#3a2c0a 0%,rgba(58,44,10,0) 62%),
             linear-gradient(170deg,#061334 0%,#040a1c 55%,#02050d 100%)}

/* --- cielo --- */
.sky{position:absolute;inset:0;pointer-events:none}
.sky i{position:absolute;inset:-10%;display:block}
.sky-neb{background:radial-gradient(circle at 30% 40%,rgba(255,214,90,.09),transparent 55%),
                   radial-gradient(circle at 75% 65%,rgba(0,120,255,.12),transparent 55%)}
.sky-s1,.sky-s2{background-repeat:repeat}
.sky-s1{opacity:.55;background-image:
  radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 70% 16%,rgba(255,255,255,.8),transparent),
  radial-gradient(1.6px 1.6px at 43% 72%,rgba(255,255,255,.85),transparent),
  radial-gradient(1.2px 1.2px at 86% 62%,rgba(255,255,255,.7),transparent);
  background-size:340px 340px,460px 460px,300px 300px,520px 520px;
  transform:translate3d(calc(var(--px,0)*-10px),calc(var(--py,0)*-10px),0)}
.sky-s2{opacity:.35;background-image:
  radial-gradient(1px 1px at 12% 84%,rgba(255,255,255,.8),transparent),
  radial-gradient(1.3px 1.3px at 58% 45%,rgba(255,255,255,.7),transparent),
  radial-gradient(1px 1px at 33% 10%,rgba(255,255,255,.6),transparent);
  background-size:240px 240px,380px 380px,200px 200px;
  transform:translate3d(calc(var(--px,0)*-6px),calc(var(--py,0)*-6px),0)}
.sky-s1,.sky-s2{transition:transform .5s cubic-bezier(.22,1,.36,1)}

/* --- one cut-out piece --- */
.pc{position:absolute;
  transform:translate3d(calc(var(--px,0)*var(--d,4)*1px),calc(var(--py,0)*var(--d,4)*.4px),0);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  opacity:0;animation:pcRise .7s cubic-bezier(.22,1,.36,1) var(--del,0s) forwards}
@keyframes pcRise{from{opacity:0;transform:translateY(22px)}to{opacity:1}}
.scene.go .pc{animation-play-state:running}
.pc-art{position:absolute;inset:0;display:block;
  background-size:100% 100%;background-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:pcFloat var(--dur,9s) ease-in-out var(--del,0s) infinite;
  transition:filter .3s var(--ease),translate .5s cubic-bezier(.34,1.46,.44,1)}
@keyframes pcFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(.25deg)}}
.pc-hit{position:absolute;inset:0;background:none;border:0;padding:0;cursor:pointer;outline:none}

/* halftone shadow under the figures, opening as they lift */
.pc-shadow{position:absolute;left:14%;right:14%;bottom:1.5%;height:2.2%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);
  filter:blur(3px);transition:all .45s cubic-bezier(.34,1.46,.44,1)}
.pc--fig:hover .pc-shadow{opacity:.75;filter:blur(4px)}

/* on hover: it lights up along its outline */
.pc:hover .pc-art,.pc:focus-within .pc-art{
  filter:drop-shadow(0 0 6px rgba(255,214,90,.95))
         drop-shadow(0 0 18px rgba(255,214,90,.7))
         drop-shadow(0 0 44px rgba(255,214,90,.4))}
.pc:active .pc-art{filter:drop-shadow(0 0 4px rgba(255,214,90,1)) brightness(1.08);transition-duration:.12s}

/* label under each figure, with an underline sweeping in from the left */
.pc-lab{position:absolute;left:0;right:0;bottom:-4.5%;text-align:center;
  font-family:var(--mono);font-size:clamp(8px,1cqw,11px);letter-spacing:.22em;
  color:rgba(255,255,255,.5);transition:color .25s var(--ease);pointer-events:none}
.pc-lab::after{content:'';position:absolute;left:32%;bottom:-5px;width:36%;height:1.5px;
  background:var(--kid-gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pc:hover .pc-lab{color:#fff}
.pc:hover .pc-lab::after{transform:scaleX(1)}

/* --- the panel frames (drawn, not image) --- */
.pnl{position:absolute;border:1.5px solid rgba(140,190,255,.42);border-radius:8px;
  background:rgba(10,24,58,.42);overflow:hidden;pointer-events:none;
  display:flex;flex-direction:column;
  box-shadow:0 8px 28px rgba(0,0,0,.45), inset 0 0 40px rgba(20,60,140,.25);
  opacity:0;animation:pcRise .7s cubic-bezier(.22,1,.36,1) .2s forwards;
  transform:translate3d(calc(var(--px,0)*3px),calc(var(--py,0)*1.5px),0);
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pnl-bar{flex:0 0 auto;min-height:16px;
  display:flex;align-items:center;gap:6px;padding:3px 8px;
  background:rgba(8,20,50,.85);border-bottom:1.5px solid rgba(140,190,255,.38)}
.pnl-bar b{font-family:var(--mono);font-size:clamp(6px,.85cqw,10px);letter-spacing:.18em;
  color:rgba(200,225,255,.9);font-weight:400}
.pnl-bar i{width:9px;height:9px;border:1.2px solid rgba(140,190,255,.5);border-radius:2px;margin-left:auto}
.pnl-bar i+i{margin-left:3px}
.pnl-in{position:relative;flex:1 1 auto;min-height:0;display:block}
/* CRT sweep over the close-up. It lives in its own layer AFTER the
   pieces (.scan-capa), not inside the frame: inside the frame it sat
   behind the face, and a screen reflection belongs in front. */
.scan-capa{position:absolute;overflow:hidden;border-radius:0 0 6px 6px;
  pointer-events:none;z-index:2}
.scan{position:absolute;left:0;right:0;height:22%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(160,220,255,.16),transparent);
  animation:scanSweep 5.5s linear infinite}
@keyframes scanSweep{0%{top:-25%}100%{top:105%}}
.pnl--head .pnl-in{background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
.pal{position:absolute;inset:13% 6%;display:flex;gap:4%;pointer-events:auto}
.sw{flex:1 1 0;border-radius:3px;border:1.2px solid rgba(0,0,0,.35);cursor:pointer;
  position:relative;transition:box-shadow .28s var(--ease),filter .28s var(--ease)}
.sw:hover,.sw:focus-visible{outline:none;filter:brightness(1.18) saturate(1.1);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85), 0 0 14px 2px rgba(255,214,90,.5)}
.sw:active{filter:brightness(.95)}
.pal{overflow:hidden}

/* --- columna de identidad --- */
.idcol{position:absolute;left:1.9%;top:28.5%;width:19.4%;pointer-events:none;
  opacity:0;animation:pcRise .7s cubic-bezier(.22,1,.36,1) .25s forwards}
.id-origin{margin:0 0 14px;font-family:var(--mono);font-size:clamp(7px,1.02cqw,12px);
  letter-spacing:.08em;line-height:1.7;color:rgba(195,220,255,.95);white-space:nowrap}
.id-lines{margin:0 0 20px;font-family:var(--mono);font-size:clamp(7px,1cqw,12px);
  line-height:1.8;color:rgba(165,195,240,.85)}
.id-stats{position:absolute;left:1.9%;top:51.4%;width:19.4%;height:18.8%;
  display:flex;flex-direction:column;justify-content:space-evenly;
  padding:1.1cqw .9cqw;border:1.4px solid rgba(140,190,255,.38);border-radius:7px;
  background:rgba(10,24,58,.34);box-shadow:inset 0 0 30px rgba(20,60,140,.2);
  opacity:0;animation:pcRise .7s cubic-bezier(.22,1,.36,1) .3s forwards;
  transform:translate3d(calc(var(--px,0)*2px),calc(var(--py,0)*1px),0);
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.st{display:flex;align-items:center;gap:6px;pointer-events:auto;cursor:default;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.st:hover{transform:translateX(3px)}
.st em{flex:0 0 auto;min-width:1.9em;text-align:right;font-family:var(--mono);font-style:normal;
  font-size:clamp(6px,.85cqw,10px);color:rgba(195,220,255,.6);transition:color .25s var(--ease)}
.st:hover em{color:var(--kid-gold)}
.st:hover b{color:#fff}
.st b{flex:0 0 47%;font-family:var(--mono);font-size:clamp(6px,.9cqw,11px);
  letter-spacing:.1em;font-weight:400;color:rgba(195,220,255,.88);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st i{flex:1 1 auto;height:clamp(6px,1.1cqw,11px);border:1px solid rgba(140,190,255,.45);
  border-radius:2px;overflow:hidden;background:rgba(0,0,0,.3);
  transition:box-shadow .28s var(--ease),border-color .28s var(--ease)}
.st:hover i{border-color:rgba(255,214,90,.75);box-shadow:0 0 12px rgba(255,214,90,.45)}
.st u{display:block;height:100%;width:0;background:var(--c);position:relative;
  transition:width 1.1s cubic-bezier(.22,1,.36,1),filter .28s var(--ease);
  transition-delay:calc(.45s + var(--i) * .1s), 0s}
.st:hover u{filter:brightness(1.25) saturate(1.15)}
.scene.go .st u{width:var(--v)}

.scene-tip{flex:0 0 auto;margin:0;padding:7px 14px;text-align:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(170,200,240,.75);background:rgba(255,255,255,.04);
  border-top:1px solid rgba(140,190,255,.14)}
.scene-tip span{display:inline-block}
.scene-tip.bump span{animation:tipBump .4s cubic-bezier(.34,1.5,.44,1)}
@keyframes tipBump{0%{transform:translateY(0)}35%{transform:translateY(-3px)}100%{transform:translateY(0)}}

@media (max-width:840px){
  .scene-stage{padding:0;overflow:auto;-webkit-overflow-scrolling:touch;
    align-items:flex-start;justify-content:flex-start;touch-action:pan-x pan-y}
  .scene{width:230%;flex:0 0 auto;max-height:none;margin:0}
  .pc,.pnl,.id-stats,.sky-s1,.sky-s2{transform:none!important}
  .obj,.note,.polaroid,.hero-type,.wp-glow{translate:none!important}
  .scene-tip{font-size:9px;letter-spacing:.08em;padding:6px 10px}
  .sd{position:fixed;inset:auto 0 0 0;top:calc(var(--menubar-h) + env(safe-area-inset-top) + 46px);
    height:auto;bottom:calc(var(--dock-h) + env(safe-area-inset-bottom));padding:6% 5%}
}
@media (prefers-reduced-motion:reduce){
  .pc-art,.scan,.sd-fig{animation:none}
  .pc{opacity:1;animation:none}
  .pnl,.idcol,.id-stats{opacity:1;animation:none}
}


/* =========================================================
   DESKTOP DEPTH
   The same trick as the Kid's sheet: the pointer writes --px/--py on
   #desktop and each thing shifts by its own --d. It goes in `translate`
   and not in `transform` because the objects' centring and the note's
   rotation already live there — fighting over that slot cost time once
   before (see the star cursor comment).
   The numbers are small on purpose: this has to be there without being
   noticed. If it's raised, raise it a little.
   ========================================================= */
.hero-type,.wp-glow,.obj,.note,.polaroid{
  translate:calc(var(--px,0) * var(--d,3) * var(--pf,1) * 1px)
            calc(var(--py,0) * var(--d,3) * var(--pf,1) * .4px);
}
.wp-glow  {--d:-2}     /* the light is stuck to the back: it moves the other way */
.hero-type{transition:translate .5s cubic-bezier(.22,1,.36,1);--d:-1}     /* it's painted on the wall */
.polaroid {--d:2.5}
.note     {--d:3.5}

/* An object carries two numbers: its own, set inline according to its
   size, and whatever the Kid adds or subtracts. If --d were written
   inline, the .favoured rule could never win — inline styles beat
   stylesheets, custom properties included. */
.obj{--d0:4;--dz:0;--d:calc(var(--d0) + var(--dz))}
.obj.locked        {--dz:-2.5}   /* what you can't touch is further away */
.obj.locked.yearned{--dz:-1}     /* insisting brings it a little closer */
.obj.favoured      {--dz:1.5}    /* what you play most comes forward */
.obj.dragging{translate:none}    /* what you drag goes where you take it */

body.still{--pf:.6}              /* at rest, the field draws itself in */

/* =========================================================
   LIGHT / DARK MODE
   The desktop is dark by birth. Light mode lightens the background and
   the chrome; the windows were paper already, so they barely change.
   The choice is remembered between visits and starts from whatever the
   operating system is set to.
   ========================================================= */
body.light .wallpaper{
  background:
    radial-gradient(90% 70% at 18% 8%, #cfe2ff 0%, rgba(207,226,255,0) 60%),
    radial-gradient(70% 60% at 88% 92%, #ffeacb 0%, rgba(255,234,203,0) 62%),
    linear-gradient(170deg,#eef3ff 0%,#e4ecfb 55%,#dfe7f6 100%);
}
body.light .wp-stars{opacity:.10;filter:invert(1)}
body.light .wp-glow{opacity:.55}
body.light .scanlines{opacity:.10}
body.light .hero-type{color:#0b1c44;opacity:.10}
body.light .hero-type .ht-2{opacity:.5}
body.light .obj-label{background:rgba(255,255,255,.82);color:var(--ink);
  border-color:rgba(0,0,0,.14);text-shadow:none}
body.light .dicon{color:#12141c}
body.light .dicon-art{color:#12141c;--ac:var(--acento-d)}
body.light .dicon span{text-shadow:0 1px 2px rgba(255,255,255,.9)}
body.light .dicon:hover span,body.light .dicon:focus-visible span{color:#12141c}
body.light .hint{background:rgba(255,255,255,.78);color:var(--ink-2);
  border-color:rgba(0,0,0,.12)}
body.light .menubar{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.58));
  border-bottom-color:rgba(0,0,0,.10);color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 26px -20px rgba(0,0,0,.5)}
body.light .menu-btn:hover,body.light .mb-clock:hover,body.light .mb-icon:hover{background:rgba(0,0,0,.07)}
body.light .mb-chip{border-color:rgba(0,0,0,.2);background:rgba(0,0,0,.05)}
body.light .mb-now{color:var(--ink-2)}
body.light .mb-vol{background:linear-gradient(90deg,var(--ink) var(--p,70%),rgba(0,0,0,.18) var(--p,70%))}
body.light .dock{background:rgba(255,255,255,.72)}

/* the sheet keeps its own sky: it's the Kid's room, not the interface */
body.light .win-sheet .win-body,body.light .scene-wrap{background:#081025}


/* =========================================================
   STAR CURSOR
   The star is the system's attention: it grows over what can be touched
   and dims over what can't. On a phone it doesn't exist, and if someone
   asks for less motion, it doesn't either.
   ========================================================= */
.star-cursor{
  position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;
  translate:var(--x,50vw) var(--y,50vh);
  z-index:9500;pointer-events:none;opacity:0;
  background:
    radial-gradient(circle, rgba(255,232,150,.95) 0%, rgba(255,214,90,.55) 22%, rgba(255,214,90,0) 62%),
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255,240,190,.95) 2deg, transparent 6deg,
      transparent 84deg, rgba(255,240,190,.95) 90deg, transparent 96deg,
      transparent 174deg, rgba(255,240,190,.95) 180deg, transparent 186deg,
      transparent 264deg, rgba(255,240,190,.95) 270deg, transparent 276deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,#000 46%,transparent 62%);
  mask-image:radial-gradient(circle,#000 0%,#000 46%,transparent 62%);
  filter:drop-shadow(0 0 6px rgba(255,214,90,.75));
  transition:opacity .3s var(--ease),transform .22s cubic-bezier(.22,1,.36,1);
}
.star-cursor.on{opacity:1}
.star-cursor.hot{transform:scale(1.55) rotate(22deg);
  filter:drop-shadow(0 0 12px rgba(255,214,90,.95)) drop-shadow(0 0 26px rgba(255,214,90,.5))}
.star-cursor.cold{transform:scale(.72);opacity:.45;filter:none}
.star-cursor.down{transform:scale(1.05) rotate(45deg);transition-duration:.1s}

/* the system cursor is hidden only on the desktop: inside the windows
   it's needed for typing and for reading text */
body.starry .desktop,body.starry .dock,body.starry .menubar{cursor:none}
body.starry .desktop input,body.starry .desktop textarea{cursor:auto}
@media (hover:none),(prefers-reduced-motion:reduce){
  .star-cursor{display:none}
  body.starry .desktop,body.starry .dock,body.starry .menubar{cursor:auto}
}


/* =========================================================
   EL KID RESPONDS
   None of this says a word. It's the Kid arranging his room for
   whoever walked in: what plays most comes forward, what you keep
   looking at stops being quite so far away, and if you go still
   everything breathes deeper.
   ========================================================= */
.obj.favoured .obj-media{transform:scale(1.045)}
.obj.favoured img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))
                        drop-shadow(0 0 30px var(--glow,rgba(var(--acento-rgb),.45)))}
.obj.favoured .obj-num{opacity:1;transform:scale(1)}

/* insisting on a locked one brings it closer. It doesn't open it. */
.obj.locked.yearned img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.5))
                               grayscale(.18) brightness(.92) blur(3px)}
.obj.locked.yearned .play-badge{background:rgba(40,46,74,.92)}
.obj.locked.yearned{animation:yearn 6s ease-in-out infinite}
@keyframes yearn{0%,100%{filter:none}50%{filter:drop-shadow(0 0 22px rgba(150,180,255,.30))}}

/* still = the room breathes deeper and slower */
body.still .obj img{animation-duration:calc(var(--dur,7s) * 1.9)}
body.still .wp-glow{opacity:.75;transition:opacity 4s linear}
body.still .hero-type{opacity:.14;transition:opacity 4s linear}
body.still .star-cursor{opacity:.5}