/* The Listening Room, v3. A second iPod, same family as the one on samyeye.com.
   The finish is swappable: every colour of the shell hangs off html[data-finish].
   To add a colourway: copy one html[data-finish="..."] block below, change the values,
   and add one line to FINISHES in room.js. Nothing else. */

@font-face{font-family:"iA Writer Mono";src:url(assets/fonts/ia-writer-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"iA Writer Mono";src:url(assets/fonts/ia-writer-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"iA Writer Mono";src:url(assets/fonts/ia-writer-mono-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --lcd1:#e9f1f1; --lcd2:#c6d6d8; --lcdink:#101b24;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Courier New",Courier,monospace;
  --ia:"iA Writer Mono","Courier New",Menlo,monospace;
  --gut:clamp(20px,4vw,56px);
  --streaks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .8' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.5 0 0 0 -.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --streaks-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .22 0 0 0 0 .36 1.5 0 0 0 -.56'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- colourway: Sky. Brushed, anodized light blue aluminium. The default. ---------- */
html[data-finish="sky"]{
  --body:
    linear-gradient(104deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.5) 21%,rgba(255,255,255,.06) 33%,rgba(255,255,255,0) 52%,rgba(20,60,105,.1) 70%,rgba(255,255,255,.22) 86%,rgba(255,255,255,0) 96%),
    linear-gradient(180deg,#d9eaf6 0%,#bcd6ea 34%,#a9c8e0 66%,#8fb3d0 100%);
  --edge:linear-gradient(140deg,#ffffff 0%,#cfe2f1 18%,#f4faff 38%,#93b4cf 62%,#e6f2fb 80%,#7fa2c0 100%);
  --body-shade:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -3cqw 6cqw -3cqw rgba(24,62,104,.42),inset -2.4cqw 0 5cqw -3cqw rgba(24,62,104,.22);
  --body-drop:0 50px 90px -36px rgba(0,8,20,.85),0 16px 30px -14px rgba(0,8,20,.6);
  --rim:0 0 70px -6px rgba(110,240,190,.2);
  --grain:.3; --grain-dark:.3; --gloss:0;
  --bezel:linear-gradient(180deg,#1c242c,#0d1217);
  --bezel-shade:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.75),0 0 0 1px rgba(30,66,104,.28);
  --wheel:
    conic-gradient(from 20deg,rgba(255,255,255,.2),rgba(255,255,255,0) 12%,rgba(18,48,82,.12) 25%,rgba(255,255,255,0) 38%,rgba(255,255,255,.22) 52%,rgba(255,255,255,0) 64%,rgba(18,48,82,.12) 76%,rgba(255,255,255,0) 88%,rgba(255,255,255,.2)),
    radial-gradient(circle at 50% 30%,#9db4c9 0%,#8198b0 62%,#6f879f 100%);
  --wheel-shade:inset 0 1px 2px rgba(10,35,62,.5),inset 0 -1px 1px rgba(255,255,255,.4),0 1px 0 rgba(255,255,255,.85),0 0 0 1px rgba(30,66,104,.3);
  --wl:#f7fbfe; --wl-shadow:0 1px 0 rgba(20,50,82,.45); --wl-filter:drop-shadow(0 1px 0 rgba(20,50,82,.45));
  --press:rgba(255,255,255,.22);
  --center:linear-gradient(165deg,#f6fbff 0%,#dbe9f4 55%,#bcd3e6 100%);
  --center-press:linear-gradient(165deg,#dbe9f4,#b3cce1);
  --center-shade:inset 0 1px 0 #fff,inset 0 -1px 2px rgba(24,62,104,.3),0 0 0 1px rgba(20,48,80,.55),0 1px 3px rgba(8,26,48,.55);
  --port:linear-gradient(180deg,#0a0e12,#1d262e 60%,#35424e);
  --focus:#ffffff;
}

/* ---------- colourway: Jet. Brushed, anodized black aluminium, silver edge, a thin rim of light. ---------- */
html[data-finish="jet"]{
  --body:
    linear-gradient(104deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.2) 21%,rgba(255,255,255,.03) 33%,rgba(255,255,255,0) 52%,rgba(0,0,0,.2) 70%,rgba(255,255,255,.1) 86%,rgba(255,255,255,0) 96%),
    linear-gradient(180deg,#3a3d43 0%,#26282d 34%,#191b1e 66%,#0e0f11 100%);
  --edge:linear-gradient(140deg,#ffffff 0%,#a7afb8 16%,#f2f5f8 34%,#5d646c 58%,#dfe5ea 78%,#8b939c 100%);
  --body-shade:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 -3cqw 6cqw -3cqw rgba(0,0,0,.7),inset -2.4cqw 0 5cqw -3cqw rgba(0,0,0,.35);
  --body-drop:0 50px 90px -36px rgba(0,0,0,.9),0 16px 30px -14px rgba(0,0,0,.7);
  --rim:0 0 0 1px rgba(190,230,255,.28),0 0 26px 0 rgba(120,215,235,.2),0 0 90px -4px rgba(90,235,185,.22);
  --grain:.18; --grain-dark:.36; --gloss:0;
  --bezel:linear-gradient(180deg,#0a0b0d,#030304);
  --bezel-shade:inset 0 1px 2px rgba(0,0,0,.9),0 0 0 1px rgba(205,214,224,.5),0 1px 0 1px rgba(255,255,255,.14);
  --wheel:
    conic-gradient(from 20deg,rgba(255,255,255,.16),rgba(255,255,255,0) 12%,rgba(0,0,0,.2) 25%,rgba(255,255,255,0) 38%,rgba(255,255,255,.17) 52%,rgba(255,255,255,0) 64%,rgba(0,0,0,.2) 76%,rgba(255,255,255,0) 88%,rgba(255,255,255,.16)),
    radial-gradient(circle at 50% 30%,#1f2125 0%,#131416 60%,#090a0b 100%);
  --wheel-shade:inset 0 1px 1px rgba(255,255,255,.14),inset 0 -1px 2px rgba(0,0,0,.7),0 0 0 1px rgba(200,210,220,.5),0 0 0 2px rgba(0,0,0,.6);
  --wl:#eef3f7; --wl-shadow:none; --wl-filter:none;
  --press:rgba(255,255,255,.12);
  --center:linear-gradient(165deg,#54585f 0%,#2c2f34 50%,#17181b 100%);
  --center-press:linear-gradient(165deg,#3c4046,#121315);
  --center-shade:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 2px rgba(0,0,0,.8),0 0 0 1.5px #b7bfc8,0 0 0 2.5px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.7);
  --port:linear-gradient(180deg,#000,#101214 60%,#2a2e33);
  --focus:#bfe9ff;
}

/* ---------- colourway: Cherry. Deep cherry red anodized aluminium, oxblood wheel, warm silver edge. ---------- */
html[data-finish="cherry"]{
  --body:
    linear-gradient(104deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.36) 21%,rgba(255,255,255,.05) 33%,rgba(255,255,255,0) 52%,rgba(50,0,8,.16) 70%,rgba(255,255,255,.16) 86%,rgba(255,255,255,0) 96%),
    linear-gradient(180deg,#e0304a 0%,#c0162f 34%,#a00d24 66%,#7c0819 100%);
  --edge:linear-gradient(140deg,#ffffff 0%,#c9b5b8 16%,#fff3f3 34%,#7d5f63 58%,#f0dfe1 78%,#a88d91 100%);
  --body-shade:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -3cqw 6cqw -3cqw rgba(40,0,8,.6),inset -2.4cqw 0 5cqw -3cqw rgba(40,0,8,.3);
  --body-drop:0 50px 90px -36px rgba(0,0,0,.9),0 16px 30px -14px rgba(0,0,0,.65);
  --rim:0 0 0 1px rgba(255,205,210,.3),0 0 30px 0 rgba(255,120,140,.14),0 0 90px -4px rgba(90,235,185,.2);
  --grain:.24; --grain-dark:.34; --gloss:0;
  --bezel:linear-gradient(180deg,#16080b,#080304);
  --bezel-shade:inset 0 1px 2px rgba(0,0,0,.9),0 0 0 1px rgba(255,214,218,.42),0 1px 0 1px rgba(255,255,255,.2);
  --wheel:
    conic-gradient(from 20deg,rgba(255,255,255,.16),rgba(255,255,255,0) 12%,rgba(30,0,6,.18) 25%,rgba(255,255,255,0) 38%,rgba(255,255,255,.17) 52%,rgba(255,255,255,0) 64%,rgba(30,0,6,.18) 76%,rgba(255,255,255,0) 88%,rgba(255,255,255,.16)),
    radial-gradient(circle at 50% 30%,#6c1020 0%,#4a0915 60%,#33060e 100%);
  --wheel-shade:inset 0 1px 1px rgba(255,255,255,.2),inset 0 -1px 2px rgba(0,0,0,.6),0 0 0 1px rgba(255,214,218,.45),0 0 0 2px rgba(40,0,8,.6);
  --wl:#fff1f2; --wl-shadow:none; --wl-filter:none;
  --press:rgba(255,255,255,.14);
  --center:linear-gradient(165deg,#f4627a 0%,#cf2440 52%,#9c0f27 100%);
  --center-press:linear-gradient(165deg,#d83a54,#8a0b20);
  --center-shade:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 2px rgba(40,0,8,.6),0 0 0 1.5px #e3cfd2,0 0 0 2.5px rgba(40,0,8,.6),0 1px 4px rgba(0,0,0,.6);
  --port:linear-gradient(180deg,#000,#1a0a0d 60%,#3a1a1f);
  --focus:#ffd9de;
}

/* ---------- colourway: Volt. Electric green anodized aluminium, white wheel. ---------- */
html[data-finish="volt"]{
  --body:
    linear-gradient(104deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.5) 21%,rgba(255,255,255,.06) 33%,rgba(255,255,255,0) 52%,rgba(30,80,0,.12) 70%,rgba(255,255,255,.24) 86%,rgba(255,255,255,0) 96%),
    linear-gradient(180deg,#c6f24a 0%,#a9e327 34%,#93d316 66%,#74b80a 100%);
  --edge:linear-gradient(140deg,#ffffff 0%,#dcf5a0 18%,#f8ffe6 38%,#7fae22 62%,#e9fbc0 80%,#6b9a14 100%);
  --body-shade:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -3cqw 6cqw -3cqw rgba(36,84,0,.45),inset -2.4cqw 0 5cqw -3cqw rgba(36,84,0,.22);
  --body-drop:0 50px 90px -36px rgba(0,8,6,.88),0 16px 30px -14px rgba(0,8,6,.6);
  --rim:0 0 70px -6px rgba(150,255,120,.2);
  --grain:.3; --grain-dark:.26; --gloss:0;
  --bezel:linear-gradient(180deg,#1a2014,#0c0f09);
  --bezel-shade:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.75),0 0 0 1px rgba(46,96,0,.32);
  --wheel:
    conic-gradient(from 20deg,rgba(255,255,255,.5),rgba(255,255,255,0) 14%,rgba(60,80,40,.05) 28%,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 52%,rgba(255,255,255,0) 66%,rgba(60,80,40,.05) 78%,rgba(255,255,255,0) 90%,rgba(255,255,255,.5)),
    radial-gradient(circle at 50% 30%,#fbfdf6 0%,#edf1e4 62%,#dde3d1 100%);
  --wheel-shade:inset 0 1px 2px rgba(40,70,10,.3),inset 0 -1px 1px rgba(255,255,255,.8),0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(46,96,0,.38);
  --wl:#4f8a06; --wl-shadow:0 1px 0 rgba(255,255,255,.8); --wl-filter:none;
  --press:rgba(60,110,0,.12);
  --center:linear-gradient(165deg,#d4f76e 0%,#a9e327 55%,#86c80f 100%);
  --center-press:linear-gradient(165deg,#b4e53c,#7dbd0c);
  --center-shade:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 2px rgba(36,84,0,.35),0 0 0 1px rgba(46,96,0,.6),0 1px 3px rgba(20,50,0,.4);
  --port:linear-gradient(180deg,#0a0e06,#1c2412 60%,#34421f);
  --focus:#eaffb8;
}

/* ---------- colourway: Orange. Bright classic orange anodized aluminium, white wheel. ---------- */
html[data-finish="orange"]{
  --body:
    linear-gradient(104deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.46) 21%,rgba(255,255,255,.06) 33%,rgba(255,255,255,0) 52%,rgba(110,40,0,.12) 70%,rgba(255,255,255,.22) 86%,rgba(255,255,255,0) 96%),
    linear-gradient(180deg,#ffa53d 0%,#ff8a1c 34%,#f6760c 66%,#dd5f04 100%);
  --edge:linear-gradient(140deg,#ffffff 0%,#ffd3a0 18%,#fff4e6 38%,#c96a1a 62%,#ffe2c2 80%,#b65a0e 100%);
  --body-shade:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.32),inset 0 -3cqw 6cqw -3cqw rgba(110,36,0,.48),inset -2.4cqw 0 5cqw -3cqw rgba(110,36,0,.22);
  --body-drop:0 50px 90px -36px rgba(8,4,0,.88),0 16px 30px -14px rgba(8,4,0,.6);
  --rim:0 0 70px -6px rgba(255,170,90,.22);
  --grain:.28; --grain-dark:.24; --gloss:0;
  --bezel:linear-gradient(180deg,#221810,#100b07);
  --bezel-shade:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(120,46,0,.34);
  --wheel:
    conic-gradient(from 20deg,rgba(255,255,255,.5),rgba(255,255,255,0) 14%,rgba(90,60,30,.05) 28%,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 52%,rgba(255,255,255,0) 66%,rgba(90,60,30,.05) 78%,rgba(255,255,255,0) 90%,rgba(255,255,255,.5)),
    radial-gradient(circle at 50% 30%,#fffdf9 0%,#f3ede4 62%,#e6ddd0 100%);
  --wheel-shade:inset 0 1px 2px rgba(90,40,0,.3),inset 0 -1px 1px rgba(255,255,255,.8),0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(120,46,0,.4);
  --wl:#d45e06; --wl-shadow:0 1px 0 rgba(255,255,255,.8); --wl-filter:none;
  --press:rgba(160,70,0,.12);
  --center:linear-gradient(165deg,#ffbd6e 0%,#ff8f24 55%,#ec6f08 100%);
  --center-press:linear-gradient(165deg,#ff9e3a,#e06806);
  --center-shade:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 2px rgba(110,36,0,.35),0 0 0 1px rgba(120,46,0,.6),0 1px 3px rgba(60,20,0,.4);
  --port:linear-gradient(180deg,#0e0905,#261a10 60%,#45301d);
  --focus:#ffe1bd;
}

/* ---------- colourway: Purple. Rich violet anodized aluminium, deep plum wheel, lilac centre. ---------- */
html[data-finish="purple"]{
  --body:
    linear-gradient(104deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.42) 21%,rgba(255,255,255,.06) 33%,rgba(255,255,255,0) 52%,rgba(30,0,80,.14) 70%,rgba(255,255,255,.2) 86%,rgba(255,255,255,0) 96%),
    linear-gradient(180deg,#9a6be8 0%,#7f4bd6 34%,#6a38c2 66%,#5226a2 100%);
  --edge:linear-gradient(140deg,#ffffff 0%,#d9c8fa 18%,#f6f0ff 38%,#6b45b8 62%,#e6d9ff 80%,#5a379f 100%);
  --body-shade:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -3cqw 6cqw -3cqw rgba(28,0,78,.52),inset -2.4cqw 0 5cqw -3cqw rgba(28,0,78,.26);
  --body-drop:0 50px 90px -36px rgba(4,0,12,.9),0 16px 30px -14px rgba(4,0,12,.62);
  --rim:0 0 0 1px rgba(214,196,255,.22),0 0 70px -6px rgba(170,130,255,.26);
  --grain:.26; --grain-dark:.24; --gloss:0;
  --bezel:linear-gradient(180deg,#17121f,#0a0810);
  --bezel-shade:inset 0 1px 2px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(40,10,96,.4);
  --wheel:
    conic-gradient(from 20deg,rgba(255,255,255,.14),rgba(255,255,255,0) 12%,rgba(10,0,40,.14) 25%,rgba(255,255,255,0) 38%,rgba(255,255,255,.16) 52%,rgba(255,255,255,0) 64%,rgba(10,0,40,.14) 76%,rgba(255,255,255,0) 88%,rgba(255,255,255,.14)),
    radial-gradient(circle at 50% 30%,#4f2a96 0%,#3b1c78 62%,#2c125e 100%);
  --wheel-shade:inset 0 1px 2px rgba(10,0,40,.6),inset 0 -1px 1px rgba(255,255,255,.22),0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(30,6,80,.5);
  --wl:#f3ecff; --wl-shadow:0 1px 0 rgba(16,0,48,.5); --wl-filter:drop-shadow(0 1px 0 rgba(16,0,48,.5));
  --press:rgba(255,255,255,.16);
  --center:linear-gradient(165deg,#f1e8ff 0%,#d3bdf7 55%,#b294ea 100%);
  --center-press:linear-gradient(165deg,#d8c5f8,#a685e2);
  --center-shade:inset 0 1px 0 #fff,inset 0 -1px 2px rgba(40,10,96,.35),0 0 0 1px rgba(24,4,66,.65),0 1px 3px rgba(10,0,34,.55);
  --port:linear-gradient(180deg,#07050b,#19122a 60%,#30224e);
  --focus:#e6d9ff;
}

/* ---------- colourway: Pink. Hot pink anodized aluminium, white wheel, pink centre. ---------- */
html[data-finish="pink"]{
  --body:
    linear-gradient(104deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.48) 21%,rgba(255,255,255,.06) 33%,rgba(255,255,255,0) 52%,rgba(110,0,50,.12) 70%,rgba(255,255,255,.22) 86%,rgba(255,255,255,0) 96%),
    linear-gradient(180deg,#ff8fc4 0%,#fb69ad 34%,#f24e9b 66%,#dc3585 100%);
  --edge:linear-gradient(140deg,#ffffff 0%,#ffc9e2 18%,#fff0f7 38%,#c93f84 62%,#ffd9ea 80%,#b53174 100%);
  --body-shade:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.32),inset 0 -3cqw 6cqw -3cqw rgba(110,0,52,.46),inset -2.4cqw 0 5cqw -3cqw rgba(110,0,52,.22);
  --body-drop:0 50px 90px -36px rgba(8,0,6,.88),0 16px 30px -14px rgba(8,0,6,.6);
  --rim:0 0 70px -6px rgba(255,130,190,.24);
  --grain:.28; --grain-dark:.22; --gloss:0;
  --bezel:linear-gradient(180deg,#21121a,#0f080c);
  --bezel-shade:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(120,0,58,.34);
  --wheel:
    conic-gradient(from 20deg,rgba(255,255,255,.5),rgba(255,255,255,0) 14%,rgba(90,40,60,.05) 28%,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 52%,rgba(255,255,255,0) 66%,rgba(90,40,60,.05) 78%,rgba(255,255,255,0) 90%,rgba(255,255,255,.5)),
    radial-gradient(circle at 50% 30%,#fffbfd 0%,#f5eaef 62%,#e9d9e1 100%);
  --wheel-shade:inset 0 1px 2px rgba(100,0,50,.28),inset 0 -1px 1px rgba(255,255,255,.8),0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(120,0,58,.4);
  --wl:#d92f80; --wl-shadow:0 1px 0 rgba(255,255,255,.8); --wl-filter:none;
  --press:rgba(170,0,80,.12);
  --center:linear-gradient(165deg,#ffb3d7 0%,#fb69ad 55%,#e8408f 100%);
  --center-press:linear-gradient(165deg,#ff8cc2,#dc3585);
  --center-shade:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 2px rgba(110,0,52,.35),0 0 0 1px rgba(120,0,58,.6),0 1px 3px rgba(60,0,28,.4);
  --port:linear-gradient(180deg,#0e060a,#26111b 60%,#452032);
  --focus:#ffd3e8;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:#03060f;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:#eaf2f8;min-height:100svh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the sky ---------- */
.sky{position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:linear-gradient(180deg,#02040b 0%,#040b19 36%,#071829 66%,#0b2832 84%,#04090f 100%)}
.sky canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.sky #sky-land{top:auto;bottom:0;height:30%}
.sky #sky-aurora{opacity:0;transition:opacity 2.4s ease}
.sky.on #sky-aurora{opacity:1}
.sky #sky-stars{animation:drift 240s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1.03)}to{transform:translate3d(-1.2%,.6%,0) scale(1.03)}}

.page{overflow:hidden;overflow:clip;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:max(20px,env(safe-area-inset-top)) var(--gut) max(20px,env(safe-area-inset-bottom))}
.top,.foot,.hint{color:rgba(240,248,255,.86);text-shadow:0 1px 10px rgba(0,6,16,.9)}
.top{display:flex;justify-content:space-between}
.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:18px 0}
.foot{display:flex;justify-content:space-between;align-items:end;gap:14px}
.hint{text-align:center;transition:opacity .8s;min-height:1.4em}
.hint.gone{opacity:0}
.keys{display:none}
@media(hover:hover) and (pointer:fine){.keys{display:inline}}
@media(max-width:520px){.mono{font-size:10.5px;letter-spacing:.13em}.foot span:first-child{display:none}.foot{justify-content:center}}
.nojs{max-width:420px;text-align:center;line-height:1.5}
.nojs a{text-decoration:underline}

/* ================= the player ================= */
.device{container-type:inline-size;position:relative;z-index:1;width:min(88vw,430px,52svh);aspect-ratio:1/1.62;border-radius:10% / 6.17%;
  border:2px solid transparent;
  background:var(--body) padding-box,var(--edge) border-box;
  box-shadow:var(--body-shade),var(--rim),var(--body-drop);
  opacity:0;transform:translateY(16px);animation:in 1.4s .1s cubic-bezier(.2,.7,.1,1) forwards;outline:none;
  touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  transition:box-shadow .5s ease}
.device:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
@keyframes in{to{opacity:1;transform:none}}
/* brushed grain (Sky) and a glass reflection (Jet). Both live here so a finish only sets numbers. */
.grain{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}
.grain::before,.grain::after{content:"";position:absolute;inset:0}
.grain::before{background:var(--streaks) 0 0/600px 300px;opacity:var(--grain)}
.grain::after{background:var(--streaks-dark) 40px 30px/600px 300px;opacity:var(--grain-dark)}
.device::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--gloss);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 46%,rgba(255,255,255,0) 46.4%);
  -webkit-mask:radial-gradient(140% 100% at 50% -42%,#000 60%,transparent 60.3%);mask:radial-gradient(140% 100% at 50% -42%,#000 60%,transparent 60.3%)}

/* screen */
.bezel{position:absolute;left:7cqw;right:7cqw;top:7.5cqw;height:70cqw;border-radius:3cqw;padding:2.2cqw;background:var(--bezel);box-shadow:var(--bezel-shade)}
.lcd{position:relative;width:100%;height:100%;border-radius:1.2cqw;overflow:hidden;color:var(--lcdink);
  background:linear-gradient(180deg,var(--lcd1),var(--lcd2));transition:filter 1.2s ease}
.lcd::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    linear-gradient(118deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 24%,rgba(255,255,255,0) 24.3%),
    repeating-linear-gradient(0deg,rgba(16,27,36,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(16,27,36,.025) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(0,0,0,.13),transparent 14%)}
.lcd.dim{filter:brightness(.8) saturate(.6) contrast(.92)}

.bar{position:relative;height:10cqw;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--lcdink);
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(0,0,0,.06));font-weight:700;font-size:4.1cqw;letter-spacing:.01em;cursor:pointer}
.bar #ttl{max-width:58cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .ps{position:absolute;left:2.6cqw;top:50%;transform:translateY(-50%);width:3cqw;height:3cqw;opacity:0;transition:opacity .2s}
.bar .ps svg{position:absolute;inset:0;width:100%;height:100%;display:none}
.bar .ps.play,.bar .ps.pause{opacity:1}
.bar .ps.play .i-play,.bar .ps.pause .i-pause{display:block}
.bar .ps.load{opacity:1;animation:blink 1s steps(2,end) infinite}.bar .ps.load .i-play{display:block}
@keyframes blink{50%{opacity:.25}}
.bar .bt{position:absolute;right:2.6cqw;top:50%;transform:translateY(-50%);width:6.4cqw;height:3.2cqw;border:1px solid var(--lcdink);border-radius:.6cqw;padding:.5cqw}
.bar .bt::after{content:"";position:absolute;right:-1.1cqw;top:.9cqw;width:.7cqw;height:1.4cqw;background:var(--lcdink);border-radius:0 .3cqw .3cqw 0}
.bar .bt i{display:block;height:100%;width:82%;background:var(--lcdink)}
.views{position:absolute;left:0;right:0;top:10cqw;bottom:0;overflow:hidden}
.view{position:absolute;inset:0;transition:transform .32s cubic-bezier(.3,.7,.2,1)}
.view.r{transform:translateX(100%)}.view.l{transform:translateX(-100%)}
.off{position:absolute;left:0;right:0;bottom:0;z-index:3;background:var(--lcdink);color:var(--lcd1);font-size:3.3cqw;font-weight:600;text-align:center;padding:1.3cqw 2cqw}

/* menu rows */
.list{position:absolute;inset:0;display:grid;grid-template-rows:repeat(7,1fr)}
.rowi{display:flex;align-items:center;justify-content:space-between;padding:0 3cqw;font-weight:600;font-size:4.5cqw;letter-spacing:.005em;cursor:pointer;white-space:nowrap;overflow:hidden;min-width:0}
.rowi>span:first-child{overflow:hidden;text-overflow:ellipsis}
.rowi.sel{background:var(--lcdink);color:var(--lcd1)}
.rowi .v{font-weight:400;font-size:3.6cqw;opacity:.72;margin-left:2cqw;flex:none;max-width:42cqw;overflow:hidden;text-overflow:ellipsis}
.rowi .ch{width:2.2cqw;height:3.4cqw;flex:none;margin-left:2cqw}
.rowi .out{width:3cqw;height:3cqw;flex:none;margin-left:2cqw}
.rowi .ck{width:3.6cqw;height:3.6cqw;flex:none;margin-left:2cqw}
.rowi .sw{width:3.6cqw;height:3.6cqw;border-radius:50%;flex:none;margin-right:2.2cqw;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(16,27,36,.55),inset 0 .5cqw .6cqw rgba(255,255,255,.45)}
.rowi.sel .sw{box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset 0 .5cqw .6cqw rgba(255,255,255,.45)}
.rowi .spk{width:3cqw;height:3cqw;flex:none;margin-right:1.6cqw}
.rowi .lab{display:flex;align-items:center;min-width:0;overflow:hidden}
.rowi .lab span{overflow:hidden;text-overflow:ellipsis}
.rowi .rt{display:flex;align-items:center;flex:none}
.rowi.warn>span:first-child,.rowi.warn .lab{font-style:italic}
.has-sb .rowi{padding-right:5.6cqw}
.sb{position:absolute;right:0;top:0;bottom:0;width:3cqw;border-left:1px solid var(--lcdink);background:rgba(255,255,255,.25);z-index:2}
.sb i{position:absolute;left:.6cqw;right:.6cqw;background:var(--lcdink);border-radius:.4cqw}
.foot-note{display:flex;align-items:center;justify-content:center;text-align:center;padding:1cqw 5cqw;font-family:var(--ia);font-size:3.25cqw;line-height:1.4;white-space:normal;border-top:1px solid rgba(16,27,36,.22)}
.foot-note.bare{border-top:0}

/* form rows on the LCD */
.rowi.hd{cursor:default;justify-content:flex-start;font-weight:700}
.rowi.fld{justify-content:flex-start;gap:2cqw;cursor:text}
.rowi.fld label{flex:none;width:15cqw;font-weight:600}
.rowi.fld input,.rowi.fld textarea{flex:1;min-width:0;width:100%;font:inherit;font-family:var(--ia);font-weight:400;font-size:max(16px,4cqw);color:inherit;background:transparent;border:0;outline:0;padding:0;margin:0;border-radius:0;caret-color:currentColor;-webkit-appearance:none;appearance:none;-webkit-user-select:text;user-select:text}
.rowi.fld input::placeholder,.rowi.fld textarea::placeholder{color:inherit;opacity:.45}
.rowi.fld input:-webkit-autofill{-webkit-text-fill-color:currentColor;transition:background-color 99999s}
.rowi.fld.area{grid-row:span 3;align-items:stretch;padding-top:1.2cqw;padding-bottom:1.2cqw;white-space:normal}
.rowi.fld.area textarea{resize:none;line-height:1.3;height:100%}
.rowi.fld.file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rowi.fld.file .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--ia);font-weight:400;font-size:3.7cqw}
.rowi.fld.file .fname.none{opacity:.45}
.rowi.go{justify-content:center;letter-spacing:.04em;border:0;background:none;width:100%;font-weight:600}
.rowi.go.sel{background:var(--lcdink);color:var(--lcd1)}
.rowi.st{cursor:default;justify-content:center;font-family:var(--ia);font-weight:400;font-size:3.1cqw;white-space:normal;line-height:1.25;text-align:center;opacity:.9}
.rowi.hd span,.rowi.go span,.rowi.st span{overflow:visible}

/* pages: reading screens that scroll under the wheel */
.pg{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:2.6cqw 0 3cqw}
.pg::-webkit-scrollbar{display:none}
.has-sb .pg{right:3cqw}
.pg p,.pg h2,.pg .big,.pg .kv,.pg .drop,.pg .pb{margin:0 3.4cqw}
.pg p{font-family:var(--ia);font-size:3.75cqw;line-height:1.42;margin-bottom:2.2cqw;white-space:normal;overflow-wrap:anywhere}
.pg p.sm{font-size:3.2cqw;opacity:.78}
.pg p.sig{font-style:italic;text-align:right}
.pg p.err{font-weight:700}
.pg h2{font-size:4.6cqw;font-weight:700;line-height:1.15;margin-bottom:1.8cqw;overflow-wrap:anywhere}
.pg .big{font-family:var(--ia);font-weight:700;font-size:9.4cqw;letter-spacing:.06em;line-height:1.1;text-align:center;padding:2.4cqw 0 2.6cqw;margin-bottom:1.6cqw;border-top:1px solid var(--lcdink);border-bottom:1px solid var(--lcdink);-webkit-user-select:all;user-select:all;overflow-wrap:anywhere}
.pg .rowi{height:7.95cqw}
.pg .kv{display:flex;justify-content:space-between;gap:3cqw;font-size:3.8cqw;font-weight:600;border-bottom:1px solid rgba(16,27,36,.2);padding:1.25cqw 0}
.pg .kv span:last-child{font-weight:400;text-align:right}
.pg .kv:last-of-type{margin-bottom:2.4cqw}
.pg .rule{height:1px;background:rgba(16,27,36,.22);margin:1cqw 0}
/* a note left on a song */
.cm{padding:1.8cqw 3.4cqw 2cqw;border-top:1px solid rgba(16,27,36,.2);cursor:pointer}
.cm.sel{background:var(--lcdink);color:var(--lcd1)}
.cm .hd{display:flex;align-items:center;gap:2cqw;font-size:3.4cqw;font-weight:700;margin-bottom:.8cqw}
.cm .hd .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm .hd .when{font-weight:400;opacity:.72;white-space:nowrap;flex:none}
.cm .hd .chip{margin-left:auto;flex:none}
.cm p{margin:0;font-size:3.6cqw}
.chip{font:inherit;font-family:var(--ia);font-weight:700;font-size:3.2cqw;border:1px solid currentColor;border-radius:.8cqw;background:none;color:inherit;padding:.4cqw 1.6cqw;cursor:pointer;display:inline-flex;align-items:center;gap:1cqw;font-variant-numeric:tabular-nums}
.chip svg{width:1.9cqw;height:1.9cqw}
.chip:focus-visible,.rowi.go:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
/* habits */
.pb{display:flex;align-items:center;gap:2.4cqw;margin-bottom:2cqw!important}
.pb .trk{flex:1;height:2.6cqw;border:1px solid var(--lcdink);border-radius:.4cqw;overflow:hidden}
.pb .trk i{display:block;height:100%;background:var(--lcdink)}
.pb span{font-size:3.5cqw;font-weight:700;white-space:nowrap}
.drop{margin-bottom:2.4cqw!important}
.drop .strip{display:grid;grid-template-columns:repeat(10,1fr);gap:.8cqw;height:15cqw;align-items:end;border-bottom:1px solid var(--lcdink)}
.drop .strip i{display:block;background:var(--lcdink);min-height:0}
.drop .strip i.none{height:1px!important;opacity:.3}
.drop .strip i.last{background:repeating-linear-gradient(45deg,var(--lcdink) 0 1.5px,transparent 1.5px 3.5px);border:1px solid var(--lcdink)}
.drop .ticks{position:relative;height:2.4cqw}
.drop .ticks i{position:absolute;top:.3cqw;width:1.6cqw;height:1.6cqw;margin-left:-.8cqw;background:var(--lcdink);transform:rotate(45deg) scale(.7)}
.drop .ends{display:flex;justify-content:space-between;font-size:3cqw;opacity:.75;padding-top:.6cqw}

/* now playing */
.np{position:absolute;inset:0;padding:2.6cqw 3.4cqw 3.2cqw;display:grid;grid-template-rows:auto 1fr auto;gap:1.6cqw;cursor:pointer}
.np .of{font-size:3.3cqw;font-weight:600;display:flex;justify-content:space-between}
.np .of span:last-child{font-weight:400;opacity:.75}
.np .mid{display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden}
.np .t{font-weight:700;font-size:6.6cqw;line-height:1.05;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.np .a{font-weight:600;font-size:4.2cqw;margin-top:1.4cqw}
.np .al{font-size:3.5cqw;opacity:.72;margin-top:.7cqw}
.np .sn{font-family:var(--ia);font-style:italic;font-size:3.2cqw;line-height:1.3;margin-top:1.4cqw;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.np .msg{font-family:var(--ia);font-weight:700;font-size:3.2cqw;line-height:1.3;margin-top:1.4cqw}
.np .scrub{padding:2.4cqw 0 1cqw;margin:-2.4cqw 0 -1cqw;cursor:pointer;touch-action:none}
.np .prog{position:relative;height:2.8cqw;border:1px solid var(--lcdink);border-radius:.4cqw}
.np .prog i{display:block;height:100%;background:var(--lcdink);width:0}
.np .prog b{position:absolute;top:50%;left:0;width:2.6cqw;height:2.6cqw;margin:-1.3cqw 0 0 -1.3cqw;background:var(--lcd1);border:1px solid var(--lcdink);transform:rotate(45deg);opacity:0;transition:opacity .2s}
.np .scrub.live .prog b{opacity:1}
.np .prog u{position:absolute;top:-1.5cqw;width:0;height:0;margin-left:-.8cqw;border:.8cqw solid transparent;border-top-color:var(--lcdink)}
.np .times{display:flex;justify-content:space-between;font-size:3.4cqw;font-weight:600;margin-top:1.3cqw;font-variant-numeric:tabular-nums}

/* boot */
.boot{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:2.4cqw;background:linear-gradient(180deg,var(--lcd1),var(--lcd2));z-index:4;transition:opacity .5s;text-align:center}
.boot b{font-weight:200;font-size:12.5cqw;line-height:.92;letter-spacing:-.01em}
.boot span{font-size:3.2cqw;letter-spacing:.42em;font-weight:500;padding-left:.42em}
.boot em{font-family:var(--ia);font-style:normal;font-size:3.1cqw;min-height:1.3em;opacity:.8;padding:0 6cqw}
.boot.gone{opacity:0;pointer-events:none}

.toast{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) scale(.96);z-index:6;background:var(--lcdink);color:var(--lcd1);
  font-weight:600;font-size:4cqw;padding:2.2cqw 4cqw;border-radius:1.2cqw;opacity:0;transition:opacity .2s,transform .2s;max-width:72cqw;text-align:center;line-height:1.2;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* wheel */
.wheel{position:absolute;left:13cqw;width:74cqw;height:74cqw;top:83cqw;border-radius:50%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  background:var(--wheel);box-shadow:var(--wheel-shade)}
.wheel:active{cursor:grabbing}
.wheel::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .15s;
  background:conic-gradient(from var(--a,0deg),var(--press) 0 90deg,transparent 90deg)}
.wheel.p::before{opacity:1}
.wl{position:absolute;color:var(--wl);pointer-events:none;display:grid;place-items:center;text-shadow:var(--wl-shadow)}
.wl svg{fill:currentColor;display:block;filter:var(--wl-filter,none)}
.wl.t{top:5.5cqw;left:0;right:0;font-weight:700;font-size:3.5cqw;letter-spacing:.14em}
.wl.b{bottom:5.6cqw;left:0;right:0}.wl.b svg{width:7.2cqw;height:3.6cqw}
.wl.l{left:5.4cqw;top:0;bottom:0}.wl.l svg{width:7.2cqw;height:3.6cqw}
.wl.r{right:5.4cqw;top:0;bottom:0}.wl.r svg{width:7.2cqw;height:3.6cqw}
.center{position:absolute;left:50%;top:120cqw;width:28cqw;height:28cqw;margin:-14cqw 0 0 -14cqw;border-radius:50%;border:0;cursor:pointer;
  background:var(--center);box-shadow:var(--center-shade);transition:transform .08s}
.center:active,.center.p{transform:scale(.97);background:var(--center-press)}
.center:focus{outline:none}
.port{position:absolute;left:50%;bottom:0;width:24.6cqw;height:1.1cqw;margin-left:-12.3cqw;border-radius:.6cqw .6cqw 0 0;pointer-events:none;
  background:var(--port);box-shadow:inset 0 .3cqw .4cqw rgba(0,0,0,.85),0 -1px 0 rgba(255,255,255,.5)}

@media(prefers-reduced-motion:reduce){
  .device{animation:none;opacity:1;transform:none;transition:none}
  .view,.lcd,.boot,.toast{transition:none}
  .sky #sky-stars{animation:none}
  .sky #sky-aurora{transition:none}
  .bar .ps.load{animation:none}
}
.rowi.fld.area.sel{background:none;color:inherit;box-shadow:inset 0 0 0 2px var(--lcdink)}

/* ---------- the shift: arriving from, and leaving for, the iPod on samyeye.com ---------- */
/* arriving: the player starts at the main site's size and place, then settles (room.js glides it) */
html[data-arrive] .device{width:min(86vw,380px,54svh)}
@media(min-width:1000px) and (min-aspect-ratio:4/3){html[data-arrive] .stage{align-items:flex-start;padding-left:9vw}}
html[data-arrive] .device,html.arrived .device{animation:none;opacity:1;transform:none}
html[data-arrive] .boot{display:none}
html[data-arrive] .hint,html.arrived .hint{opacity:0}
/* the sky the main site faded to, so the real lights rise out of the same picture */
.sky::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(60% 38% at 20% 60%,rgba(40,230,150,.5),rgba(40,230,150,0) 70%),radial-gradient(52% 44% at 80% 56%,rgba(40,220,170,.46),rgba(40,220,170,0) 70%),radial-gradient(34% 50% at 52% 26%,rgba(110,80,220,.26),rgba(110,80,220,0) 70%)}
html[data-arrive] .sky::before{opacity:1}
html.arrived .sky::before{opacity:0;transition:opacity 2.4s ease}
/* leaving: the pier comes back, the screen dims, the body warms toward the main player */
.pier{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .7s ease;background:#0b0d10 center/cover}
.tint{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .7s ease;z-index:0;
  background:linear-gradient(165deg,#fbf6ea 0%,#efe4cc 58%,#e4d6b8 100%)}
html.leaving .pier{opacity:1}
html.leaving .tint{opacity:.9}
html.leaving .grain{opacity:0;transition:opacity .7s ease}
html.leaving .lcd{filter:brightness(.55) saturate(.5);transition:filter .6s ease}
html.leaving .top,html.leaving .foot,html.leaving .hint{opacity:0;transition:opacity .5s ease}
@media(prefers-reduced-motion:reduce){.pier,.tint,.sky::before{transition:none!important}}