/* ============================================================
   THE OSCILLATING MIND-LAMP  ·  Model 1968-C "Pythia"
   iamu / A. I. Wild — Aquarian's cabinet survives its acquisition.
   "An electronic mind for the modern home."
   ============================================================ */
:root{
  --paper:#e9dcbd; --paper2:#ddcca4; --ink:#3a2410; --ink2:#5a3c1c;
  --orange:#e2531a; --gold:#e0a020; --teal:#1d8a7a; --magenta:#b5246b;
  --grape:#5a3a8a; --avocado:#7a8a2a; --rust:#9c4416; --cream:#f3e7c8;
  --brass:#c98a30; --brassDk:#8a5a18; --woodHi:#7a5530; --woodLo:#2c1708;
  --bakelite:#231307;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:#0d0703;
  font-family:Georgia,"Times New Roman",serif;color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
body{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:12px 0;
  background:radial-gradient(ellipse at 50% 38%, #25190d 0, #0d0703 78%);}

/* faint dust-grain over the whole scene */
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- THE CABINET : a teak-and-bakelite console ---- */
.cabinet{position:relative;width:min(95vw,580px);height:max(610px,min(940px,96dvh));
  background:linear-gradient(155deg,#74522e 0,#4a2a12 52%,#2c1708 100%);
  border-radius:26px 26px 30px 30px;padding:16px 16px 18px;
  box-shadow:0 40px 90px rgba(0,0,0,.78), 0 8px 0 #1a0d04,
    inset 0 2px 7px rgba(255,221,162,.32), inset 0 -10px 26px rgba(0,0,0,.55);
  border:2px solid #1c0e04;}
/* wood grain */
.cabinet:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.2;mix-blend-mode:multiply;
  background:repeating-linear-gradient(92deg, rgba(0,0,0,.42) 0 1.5px, transparent 1.5px 8px),
             repeating-linear-gradient(92deg, rgba(255,210,150,.12) 0 1px, transparent 1px 16px);}
/* two little brass feet hint */
.cabinet:after{content:"";position:absolute;left:14%;right:14%;bottom:-7px;height:8px;border-radius:0 0 8px 8px;
  background:linear-gradient(#3a2410,#160c04);box-shadow:0 4px 8px rgba(0,0,0,.6);}

.face{position:relative;height:100%;background:
   linear-gradient(168deg,var(--paper) 0,var(--paper2) 100%);
  border-radius:16px;box-shadow:inset 0 0 0 2px #1c0e04, inset 0 0 0 5px var(--brass),
    inset 0 4px 16px rgba(58,36,16,.4);
  display:flex;flex-direction:column;overflow:hidden;padding:2px;}
/* aged vignette + foxing on the face */
.face:before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.55;border-radius:14px;
  background:radial-gradient(ellipse at 28% 8%, transparent 38%, rgba(120,80,30,.4) 100%),
            radial-gradient(circle at 84% 92%, rgba(120,70,20,.5), transparent 30%);}

/* ---- MAKER PLATE ---- */
.plate{text-align:center;padding:11px 14px 6px;position:relative;z-index:2;}
.plate .maker{font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--rust);}
.plate h1{font-family:"Brush Script MT","Snell Roundhand","Segoe Script",cursive;font-weight:400;
  font-size:clamp(28px,8.6vw,48px);color:var(--magenta);line-height:.92;margin:1px 0;
  text-shadow:1.5px 1.5px 0 var(--gold), 2px 2px 0 rgba(90,20,40,.25);}
.plate .model{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);}
.plate .serif-orn{color:var(--gold);font-size:11px;letter-spacing:.4em;}

/* ---- THE LAMP WINDOW : the swimming colours ---- */
.window{position:relative;flex:1;margin:8px 16px 6px;min-height:0;
  border-radius:48% 48% 47% 47%/ 7% 7% 93% 93%;
  background:#0b0602;overflow:hidden;
  box-shadow:inset 0 0 0 5px var(--brass), inset 0 0 0 8px #1c0e04,
    inset 0 0 46px rgba(0,0,0,.92), 0 2px 3px rgba(255,230,180,.25);}
#lamp{width:100%;height:100%;display:block;}
/* curved glass highlight + reflection */
.window .glass{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse 70% 40% at 38% 16%, rgba(255,255,255,.3), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%, transparent 80%, rgba(0,0,0,.3));}
/* engraved zodiac ticks around the lamp */
.window .ticks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:inherit;mix-blend-mode:overlay;opacity:.5;}

/* ---- THE DYMO READOUT STRIP ---- */
.readout{display:flex;justify-content:space-between;align-items:stretch;gap:7px;padding:0 16px;position:relative;z-index:2;}
.dymo{background:linear-gradient(#2e1909,#1c0e04);color:#f3e7c8;border-radius:4px;padding:4px 8px;
  letter-spacing:.1em;text-transform:uppercase;font-family:ui-monospace,"Courier New",monospace;font-size:9px;
  box-shadow:0 1px 0 rgba(255,255,255,.16), inset 0 1px 2px rgba(0,0,0,.6);
  display:flex;align-items:center;gap:5px;min-height:21px;white-space:nowrap;}
.dymo b{color:var(--gold);font-weight:400;}
.dymo .lamp-led{width:7px;height:7px;border-radius:50%;background:#5a1a10;box-shadow:inset 0 0 2px #000;flex:none;transition:background .2s, box-shadow .2s;}
.dymo .lamp-led.on{background:var(--orange);box-shadow:0 0 6px var(--orange),0 0 2px #fff inset;}

/* ---- MANTRA TICKER ---- */
.mantra{text-align:center;font-style:italic;font-size:12px;color:var(--grape);
  min-height:17px;padding:5px 18px 2px;position:relative;z-index:2;transition:opacity .4s;}

/* ---- THE CONTROL DECK ---- */
.deck{position:relative;z-index:2;margin:4px 12px 0;padding:9px 8px 6px;
  border-radius:11px;background:linear-gradient(#cdb585,#b89b66);
  box-shadow:inset 0 1px 0 rgba(255,245,220,.5), inset 0 -3px 8px rgba(90,60,20,.4), 0 1px 2px rgba(0,0,0,.3);}
/* tiny rivets */
.deck:before,.deck:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;top:6px;
  background:radial-gradient(circle at 35% 30%,#f0d89a,#7a5518);box-shadow:0 1px 1px rgba(0,0,0,.4);}
.deck:before{left:7px}.deck:after{right:7px}

/* mode selector : five chicklet "stops" */
.modes{display:flex;gap:5px;justify-content:center;margin-bottom:9px;}
.mode-btn{flex:1;max-width:96px;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.06em;
  text-transform:uppercase;color:#f6ecd0;padding:6px 2px 5px;border:none;cursor:pointer;border-radius:4px 4px 3px 3px;
  background:linear-gradient(#3a2410,#241405);box-shadow:0 3px 0 #160c04, inset 0 1px 0 rgba(255,220,160,.18);
  transition:transform .07s, box-shadow .07s, background .2s;position:relative;line-height:1.15;}
.mode-btn small{display:block;font-size:6.5px;letter-spacing:.04em;opacity:.6;margin-top:1px;}
.mode-btn:focus-visible,.knob:focus-visible,#commune:focus-visible,.veil:focus-visible,.quiet:focus-visible{outline:3px solid var(--teal);outline-offset:4px;}
.mode-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #160c04;}
.mode-btn.sel{background:linear-gradient(var(--orange),var(--rust));color:#fff7e6;
  box-shadow:0 1px 0 #160c04, inset 0 1px 0 rgba(255,255,255,.3), 0 0 10px rgba(226,83,26,.5);transform:translateY(1px);}

/* knob + button row */
.knobrow{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding:14px 4px 19px;}
.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:0;width:62px;}
.knob{width:46px;height:46px;border-radius:50%;cursor:ns-resize;position:relative;touch-action:none;
  background:radial-gradient(circle at 36% 30%,#83602f,#3a2410 70%,#1c0f04);
  border:2px solid #160c04;
  box-shadow:0 4px 9px rgba(0,0,0,.55), inset 0 2px 4px rgba(255,222,160,.35), inset 0 -3px 6px rgba(0,0,0,.5);}
/* knurled rim via conic gradient */
.knob:before{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(rgba(0,0,0,.5) 0 4deg, transparent 4deg 8deg);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);mask:radial-gradient(circle,transparent 60%,#000 62%);}
.knob .pointer{position:absolute;left:50%;top:4px;width:3px;height:15px;background:var(--gold);
  transform:translateX(-50%);border-radius:2px;box-shadow:0 0 3px rgba(224,160,32,.8);}
.knob-wrap .cap{font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--rust);margin-top:6px;text-align:center;line-height:1.2;}
.knob-wrap .val{font-family:ui-monospace,monospace;font-size:7px;color:var(--ink2);margin-top:1px;opacity:.7;}
.commune-wrap{margin:0 -2px;}
.output{display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 0 7px;font:9px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;}
.output input{width:90px;accent-color:var(--rust);}
.quiet{border:1px solid var(--rust);background:var(--cream);color:var(--rust);padding:4px 8px;border-radius:3px;font:inherit;cursor:pointer;}
.output input:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* the great central button */
#commune{width:104px;height:104px;border-radius:50%;cursor:pointer;border:none;position:relative;flex:none;
  background:radial-gradient(circle at 36% 28%, #ffd874 0, var(--orange) 42%, var(--magenta) 98%);
  box-shadow:0 0 0 4px var(--brass), 0 0 0 7px #1c0e04, 0 12px 28px rgba(0,0,0,.6),
    inset 0 -7px 16px rgba(90,10,40,.5), inset 0 5px 12px rgba(255,230,180,.5);
  font-family:"Brush Script MT","Snell Roundhand","Segoe Script",cursive;color:#fff7e6;font-size:21px;
  text-shadow:1px 1px 2px rgba(90,20,40,.8);transition:transform .08s;}
#commune small{display:block;font-family:ui-monospace,monospace;font-size:6.5px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.8;margin-top:-2px;}
#commune:active{transform:scale(.93);}
#commune.pulse{animation:pulse .65s cubic-bezier(.3,1.4,.5,1);}
@keyframes pulse{0%{transform:scale(1.14)}40%{transform:scale(.9)}100%{transform:scale(1)}}
#commune.holding{box-shadow:0 0 0 4px var(--brass), 0 0 0 7px #1c0e04, 0 0 40px rgba(255,180,60,.8),
    inset 0 -7px 16px rgba(90,10,40,.5);}

/* ---- FOOTPLATE ---- */
.footplate{text-align:center;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);
  padding:5px 14px 9px;opacity:.78;position:relative;z-index:2;}
.footplate i{font-style:italic;text-transform:none;letter-spacing:.04em;font-size:9px;}

/* power lamp bottom-right */
.pwr{position:absolute;right:16px;bottom:11px;display:flex;align-items:center;gap:4px;font-size:7px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rust);z-index:3;}
.pwr .bulb{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a3a,#7a1a08);
  box-shadow:0 0 7px rgba(226,83,26,.9);animation:flick 5s infinite;}
@keyframes flick{0%,97%,100%{opacity:1}98%{opacity:.4}}

/* instruction overlay (first-touch) */
.veil{position:absolute;inset:0;z-index:40;background:rgba(20,12,4,.82);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:14px;
  color:var(--cream);text-align:center;padding:30px;cursor:pointer;transition:opacity .5s;}
.veil h2{font-family:"Brush Script MT",cursive;color:var(--gold);font-size:30px;font-weight:400;}
.veil p{font-size:12px;font-style:italic;color:#d9c79c;max-width:280px;line-height:1.6;}
.veil .go{margin-top:6px;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--orange);border:1px solid var(--orange);padding:8px 18px;border-radius:4px;animation:breathe 2.4s infinite;}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.veil.gone{opacity:0;pointer-events:none;}
.veil .help{font:10px/1.6 ui-monospace,monospace;letter-spacing:.03em;}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;}}

@media (max-height:680px){
  .plate{padding:7px 14px 3px} .plate h1{font-size:34px}
  .window{margin:5px 16px 4px} #commune{width:92px;height:92px;font-size:18px}
  .knob{width:42px;height:42px}
}

.iamu-home{position:fixed;z-index:100;top:10px;left:10px;padding:7px 9px;background:#1c0e04ed;color:#f3e7c8;border:1px solid #c98a30;font:10px ui-monospace,monospace;text-decoration:none}
.iamu-home:focus-visible{outline:3px solid #1d8a7a;outline-offset:3px}
@media(max-width:720px){body{padding-top:48px}.cabinet{height:max(610px,min(940px,calc(100dvh - 76px)))}.iamu-home{position:absolute}}
.iamu-home svg { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.5em; vertical-align: -0.12em; overflow: visible; }
.iamu-home path { fill: none; stroke: currentColor; stroke-width: 27; stroke-linecap: round; }