:root{
  --ink:#17133f;
  --night:#24205e;
  --paper:#f6f1da;
  --cyan:#55e6ef;
  --lime:#c9f45a;
  --coral:#ff5d6c;
  --gold:#ffc84a;
  font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;
  color:var(--ink);
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;padding:18px;
  background:
    radial-gradient(circle at 14% 12%,#55e6ef44 0 7%,transparent 8%),
    radial-gradient(circle at 87% 82%,#ff5d6c40 0 10%,transparent 11%),
    repeating-linear-gradient(135deg,#17133f 0 22px,#1d1850 22px 44px);
  font-weight:800;
}
button,input{font:inherit}
[hidden]{display:none!important}
button:focus-visible,input:focus-visible{outline:5px solid var(--gold);outline-offset:4px}
.machine{width:min(1120px,100%);margin:auto}
.topbar{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:13px 18px;border:4px solid var(--ink);border-radius:18px 18px 8px 8px;
  background:var(--paper);box-shadow:0 8px 0 #0c0928,0 22px 55px #06031999;
}
.brand-mark{display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--ink);border-radius:50%;background:var(--cyan);box-shadow:inset -8px -8px 0 #21afc3,4px 5px 0 var(--ink);font:900 42px/1 "Arial Black",sans-serif}
.title span{font:900 11px "Courier New",monospace;letter-spacing:.18em;color:#615d7d}
.title h1{margin:2px 0 0;font:900 clamp(28px,5vw,50px)/.84 "Arial Black",sans-serif;letter-spacing:-.04em}
.title em{font-style:normal;color:var(--coral);text-shadow:3px 3px 0 var(--ink)}
.privacy{display:flex;align-items:center;gap:8px;padding:10px 13px;border:3px solid var(--ink);border-radius:30px;background:#fff;font:900 10px "Courier New",monospace;letter-spacing:.08em}
.privacy i{width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #c9f45a55}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0;padding:8px;border:4px solid var(--ink);border-radius:13px;background:#0c0928;box-shadow:0 7px 0 #060319}
.mode-switch button{min-height:54px;border:3px solid transparent;border-radius:9px;background:#2a2568;color:#c9c6ef;cursor:pointer;font:900 14px "Arial Black",sans-serif;letter-spacing:.04em}
.mode-switch button i{display:inline-grid;place-items:center;width:31px;height:31px;margin-right:8px;border:2px solid currentColor;border-radius:50%;font-style:normal}
.mode-switch button.selected{border-color:var(--ink);background:var(--paper);color:var(--ink);box-shadow:inset 0 -5px 0 #c9c2a3}
.mode-switch button[data-mode="video"].selected{background:var(--coral);color:#fff;box-shadow:inset 0 -5px 0 #c62d52}
.mode-switch button:disabled{opacity:.45;cursor:not-allowed}
.stage{
  position:relative;display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:center;
  min-height:430px;margin-top:14px;padding:32px;border:4px solid var(--ink);border-radius:14px;
  overflow:hidden;background:linear-gradient(145deg,#3c3885,#24205e 55%,#17133f);box-shadow:0 9px 0 #0c0928;
}
.stage::before{content:"";position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 25px,#fff 26px 27px)}
.signal-lights{position:absolute;left:24px;top:20px;display:flex;gap:8px}
.signal-lights i{width:12px;height:12px;border:2px solid #0c0928;border-radius:50%;background:#514b9d}
.speaker-face{position:relative;z-index:1;width:270px;height:270px;border:5px solid #0c0928;border-radius:35% 35% 42% 42%;background:linear-gradient(145deg,var(--cyan),#28aebf);box-shadow:inset -18px -20px 0 #148394,12px 15px 0 #0c0928;transition:.2s transform}
.speaker-face.listening{animation:breathe .7s ease-in-out infinite alternate}
.speaker-face.talking{animation:bop .22s ease-in-out infinite alternate}
.antenna{position:absolute;left:50%;top:-64px;width:8px;height:64px;border:3px solid #0c0928;background:var(--gold);transform:translateX(-50%)}
.antenna i{position:absolute;left:50%;top:-16px;width:30px;height:30px;border:4px solid #0c0928;border-radius:50%;background:var(--coral);transform:translateX(-50%);box-shadow:0 0 20px #ff5d6c}
.eyes{display:flex;justify-content:center;gap:50px;padding-top:70px}
.eyes i{width:34px;height:42px;border:5px solid #0c0928;border-radius:50%;background:#fff;box-shadow:inset 0 -13px 0 #d7fbff}
.eyes i::after{content:"";display:block;width:12px;height:16px;margin:13px auto 0;border-radius:50%;background:#17133f}
.mouth{position:absolute;left:50%;bottom:48px;display:flex;align-items:center;justify-content:center;gap:7px;width:170px;height:65px;border:5px solid #0c0928;border-radius:20px;background:#100d35;transform:translateX(-50%);overflow:hidden}
.mouth span{width:16px;height:18px;border-radius:8px;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.speaker-face.listening .mouth span{animation:bars .55s ease-in-out infinite alternate}
.speaker-face.listening .mouth span:nth-child(2),.speaker-face.listening .mouth span:nth-child(4){animation-delay:-.25s}
.speaker-face.talking .mouth span{animation:bars .2s ease-in-out infinite alternate}
.video-screen{position:relative;z-index:1;width:100%;aspect-ratio:4/3;border:6px solid #0c0928;border-radius:22px;overflow:hidden;background:#0c0928;box-shadow:10px 13px 0 #0c0928,0 0 0 4px var(--cyan)}
.video-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#08061f;transform:scaleX(-1)}
.video-screen canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#08061f}
#videoPlayback{transform:none}
.camera-placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;color:#bdb9e9;text-align:center;background:radial-gradient(circle,#302b74,#100d35)}
.camera-placeholder i{position:relative;width:70px;height:52px;border:5px solid var(--cyan);border-radius:13px}
.camera-placeholder i::after{content:"";position:absolute;right:-28px;top:9px;border:15px solid transparent;border-right:0;border-left:23px solid var(--cyan)}
.camera-placeholder strong{font:900 17px "Arial Black",sans-serif;color:#fff}.camera-placeholder span{font:700 11px "Courier New",monospace}
.rec-badge{display:none;position:absolute;left:13px;top:13px;align-items:center;gap:7px;padding:7px 10px;border:3px solid #0c0928;border-radius:20px;background:var(--coral);color:#fff;font:900 11px "Courier New",monospace;letter-spacing:.1em}
.rec-badge i{width:10px;height:10px;border-radius:50%;background:#fff;animation:pulse .65s infinite}
.video-screen.recording .rec-badge{display:flex}
.frame-corner{position:absolute;width:30px;height:30px;border-color:var(--lime);border-style:solid}.frame-corner.one{left:16px;top:58px;border-width:4px 0 0 4px}.frame-corner.two{right:16px;top:16px;border-width:4px 4px 0 0}.frame-corner.three{left:16px;bottom:16px;border-width:0 0 4px 4px}.frame-corner.four{right:16px;bottom:16px;border-width:0 4px 4px 0}
.sticker-preview{position:absolute;right:18px;top:18px;z-index:3;font-size:52px;filter:drop-shadow(3px 4px 0 #17133f);pointer-events:none}
.video-screen.frame-neon{box-shadow:10px 13px 0 #0c0928,0 0 0 6px var(--coral),0 0 28px var(--cyan)}
.video-screen.frame-comic{border-style:dashed;background:var(--gold)}
.video-screen.frame-rainbow{border-color:var(--gold);box-shadow:10px 13px 0 #0c0928,0 0 0 5px var(--coral),0 0 0 10px var(--cyan),0 0 0 15px var(--lime)}
.countdown{position:absolute;z-index:20;inset:0;display:grid;place-content:center;text-align:center;background:#100d35dd;color:#fff}
.countdown strong{font:900 clamp(100px,24vw,230px)/.75 "Arial Black",sans-serif;color:var(--gold);text-shadow:8px 9px 0 var(--coral)}
.countdown span{margin-top:20px;font:900 17px "Courier New",monospace;letter-spacing:.18em}
.readout{position:relative;z-index:1;min-width:0;color:white}
.status-line{display:flex;align-items:center;gap:9px;font:900 11px "Courier New",monospace;letter-spacing:.14em;color:#d9d6ff}
.status-line i{width:14px;height:14px;border:2px solid #090724;border-radius:50%;background:var(--lime);box-shadow:0 0 13px var(--lime)}
.readout h2{margin:14px 0 5px;font:900 clamp(32px,6vw,64px)/.92 "Arial Black",sans-serif;letter-spacing:-.045em}
.readout p{margin:0 0 14px;color:#d9d6ff}
#wave{display:block;width:100%;height:150px;border:4px solid #0c0928;border-radius:14px;background:#100d35;box-shadow:inset 0 0 30px #060319}
.time{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font:900 12px "Courier New",monospace;letter-spacing:.12em;color:#d9d6ff}
#timer{font-size:22px;color:var(--cyan)}
.console{display:grid;grid-template-columns:1.5fr .8fr 1fr 1fr;gap:12px;margin-top:14px}
.console button{min-height:82px;border:4px solid var(--ink);border-radius:14px;box-shadow:0 7px 0 #0c0928;cursor:pointer;transition:.12s transform,.12s box-shadow}
.console button:not(:disabled):active{transform:translateY(6px);box-shadow:0 1px 0 #0c0928}
.console button:disabled{filter:grayscale(.7);opacity:.45;cursor:not-allowed}
.record-button{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--coral);color:white;font:900 21px "Arial Black",sans-serif}
.record-button i{width:28px;height:28px;border:4px solid #fff;border-radius:50%;background:#b7193c;box-shadow:0 0 0 5px #b7193c55}
.record-button.recording{background:var(--gold);color:var(--ink)}
.record-button.recording i{border-radius:5px;background:var(--ink);border-color:var(--ink);animation:pulse 1s infinite}
.console-button{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--paper);font:900 14px "Arial Black",sans-serif}
.console-button i{display:grid;place-items:center;width:38px;height:38px;border:3px solid var(--ink);border-radius:50%;font-style:normal}
.replay{background:var(--lime)}.again{background:var(--cyan)}
.pause{background:var(--gold)}.pause.paused{background:var(--coral);color:#fff}
.studio-panel{margin-top:22px;padding:18px;border:4px solid var(--ink);border-radius:16px;background:#2a2568;color:#fff;box-shadow:0 8px 0 #0c0928}
.studio-panel header{display:grid;grid-template-columns:1fr auto;align-items:end;padding-bottom:13px;border-bottom:3px solid #ffffff44}.studio-panel header span{grid-column:1;font:900 10px "Courier New",monospace;letter-spacing:.16em;color:var(--cyan)}.studio-panel h2{grid-column:1;margin:2px 0 0;font:900 clamp(25px,4vw,38px)/1 "Arial Black",sans-serif}.studio-panel header b{grid-column:2;grid-row:1/3;padding:8px 10px;border:2px solid var(--lime);border-radius:20px;color:var(--lime);font:900 9px "Courier New",monospace}
.tool-row{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:center;margin-top:12px}.tool-row>strong{font:900 11px "Courier New",monospace;letter-spacing:.12em;color:#cfcbf5}.tool-buttons{display:flex;gap:7px;flex-wrap:wrap}.tool-buttons button{min-height:36px;padding:6px 11px;border:2px solid #0c0928;border-radius:8px;background:#f6f1da;color:var(--ink);box-shadow:0 3px 0 #0c0928;cursor:pointer;font:900 10px "Arial Black",sans-serif}.tool-buttons button.selected{transform:translateY(2px);background:var(--lime);box-shadow:0 1px 0 #0c0928}.stickers button{font-size:19px;padding:4px 10px}
.visuals .aura-button{position:relative;overflow:hidden;background:linear-gradient(100deg,#ff5d6c,#ffc84a,#c9f45a,#55e6ef,#8c72ff);color:#100d35}.visuals .aura-button i{display:inline-block;width:13px;height:13px;margin-right:6px;border:2px solid #fff;border-radius:50%;vertical-align:-2px;box-shadow:0 0 9px #fff,0 0 14px var(--cyan)}.visuals .aura-button.selected{background:linear-gradient(100deg,#ff5d6c,#ffc84a,#c9f45a,#55e6ef,#8c72ff);animation:auraShift 2s linear infinite;background-size:220% 100%}
.double-button{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;margin-top:15px;padding:13px;border:3px solid #0c0928;border-radius:11px;background:var(--coral);color:#fff;box-shadow:0 5px 0 #0c0928;cursor:pointer}.double-button:disabled{opacity:.45;cursor:not-allowed}.double-button i{font-size:30px;font-style:normal}.double-button span{font-size:11px}.double-button b{display:block;font:900 15px "Arial Black",sans-serif}
.scary-mode{position:relative;margin-top:22px;padding:18px;border:4px solid #090611;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 84% 10%,#7b42a655,transparent 28%),repeating-linear-gradient(135deg,#171020 0 32px,#1d1329 32px 64px);color:#fff;box-shadow:0 8px 0 #0c0928,0 0 35px #8c72ff33}.scary-mode::after{content:"";position:absolute;right:-70px;bottom:-105px;width:260px;height:260px;border:2px solid #aef45a33;border-radius:50%;box-shadow:0 0 0 28px #aef45a11,0 0 0 56px #8c72ff11;pointer-events:none}.scary-mode>header{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid #aef45a44}.scary-mode header span{color:#b9f56b;font:900 10px "Courier New",monospace;letter-spacing:.17em}.scary-mode h2{margin:2px 0;font:900 clamp(27px,5vw,47px)/.9 "Arial Black",sans-serif;letter-spacing:-.035em}.scary-mode header p{margin:7px 0 0;color:#d8cce6;font-size:12px}.scary-eye{display:grid;place-items:center;flex:0 0 auto;width:68px;height:68px;border:4px solid #090611;border-radius:50%;background:#b9f56b;box-shadow:0 0 24px #b9f56b88}.scary-eye i{width:22px;height:37px;border-radius:50%;background:#291638;box-shadow:inset 6px 0 0 #8c72ff}.scary-effects{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}.scary-effects button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 8px;align-items:center;min-height:72px;padding:9px;border:3px solid #090611;border-radius:10px;background:#f7efd9;box-shadow:0 4px 0 #090611;color:#21152e;cursor:pointer;text-align:left}.scary-effects button>i{grid-row:1/3;font-style:normal;font-size:29px}.scary-effects button>b{font:900 11px "Arial Black",sans-serif}.scary-effects button>span{color:#6b5c75;font:700 9px "Courier New",monospace}.scary-effects button.selected{transform:translateY(3px);background:#b9f56b;box-shadow:0 1px 0 #090611}.scary-effects button:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed}
.fallback{margin-top:14px;padding:16px;border:4px solid var(--ink);border-radius:12px;background:var(--gold)}
.fallback label{display:block;margin-top:8px}.fallback input{max-width:100%}
.album{margin-top:24px;padding:20px;border:4px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:0 9px 0 #0c0928,0 20px 45px #06031977}
.album-head{display:flex;align-items:end;justify-content:space-between;gap:16px;padding-bottom:13px;border-bottom:4px solid var(--ink)}
.album-head span{font:900 10px "Courier New",monospace;letter-spacing:.18em;color:#6e6885}
.album-head h2{margin:1px 0 0;font:900 clamp(34px,6vw,62px)/.8 "Arial Black",sans-serif;letter-spacing:-.04em;color:var(--ink)}
.album-head b{padding:9px 12px;border:3px solid var(--ink);border-radius:20px;background:var(--lime);font:900 10px "Courier New",monospace;letter-spacing:.08em}
.album-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.clear-album{padding:9px 12px;border:3px solid var(--ink);border-radius:9px;background:var(--coral);box-shadow:0 3px 0 var(--ink);color:#fff;cursor:pointer;font:900 10px "Arial Black",sans-serif;letter-spacing:.03em}.clear-album i{margin-right:5px;font-style:normal;font-size:15px}.clear-album:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}.clear-album:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.42;box-shadow:none}
.album-filters{display:flex;gap:8px;margin:14px 0}
.album-filters button{padding:9px 15px;border:3px solid var(--ink);border-radius:9px;background:#fff;box-shadow:0 3px 0 var(--ink);cursor:pointer;font:900 11px "Arial Black",sans-serif}
.album-filters button.selected{transform:translateY(2px);background:var(--cyan);box-shadow:0 1px 0 var(--ink)}
.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.album-card{min-width:0;padding:10px;border:4px solid var(--ink);border-radius:13px;background:#fff;box-shadow:5px 6px 0 var(--ink)}
.album-card.video{background:#fff0f3}.album-card.audio{background:#ecfcff}
.album-media{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/10;border:3px solid var(--ink);border-radius:8px;overflow:hidden;background:#100d35}
.album-media video{width:100%;height:100%;object-fit:contain;background:#100d35}
.album-media audio{position:absolute;left:6%;bottom:12%;width:88%;height:36px}
.cassette{position:relative;width:120px;height:72px;border:4px solid var(--ink);border-radius:10px;background:var(--cyan);box-shadow:inset 0 -12px 0 #28aebf}
.cassette::before,.cassette::after{content:"";position:absolute;top:31%;width:31px;height:31px;border:6px dotted var(--ink);border-radius:50%;background:var(--paper)}
.cassette::before{left:25%}.cassette::after{right:25%}
.album-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.album-meta strong{display:block;font:900 15px "Arial Black",sans-serif}.album-meta small{display:block;margin-top:2px;font:700 9px "Courier New",monospace;color:#6e6885}
.recording-name{width:100%;min-width:0;border:0;border-bottom:2px dashed #8e89a2;background:transparent;font:900 14px "Arial Black",sans-serif;color:var(--ink)}
.album-meta>div:first-child{min-width:0;flex:1}.card-actions{display:flex;gap:5px;flex:0 0 auto}.open-recording,.favorite-recording,.delete-recording{flex:0 0 auto;width:36px;height:36px;border:3px solid var(--ink);border-radius:50%;cursor:pointer;font-size:18px}.open-recording{background:var(--cyan);color:var(--ink)}.favorite-recording{background:#fff;color:#9a94af}.favorite-recording.on{background:var(--gold);color:var(--ink)}.delete-recording{background:var(--coral);color:#fff}
.download-recording{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:11px;padding:10px 8px;border:3px solid var(--ink);border-radius:9px;background:var(--lime);color:var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;font:900 11px "Arial Black",sans-serif;letter-spacing:.35px}.download-recording::after{content:"";position:absolute;inset:3px;border:1px dashed rgba(20,15,55,.45);border-radius:5px;pointer-events:none}.download-recording i{z-index:1;display:grid;place-items:center;width:23px;height:23px;border:2px solid var(--ink);border-radius:50%;background:#fff;font-style:normal;font-size:18px;line-height:1}.download-recording span{z-index:1}.download-recording:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}.download-recording:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.album-empty{display:grid;place-items:center;gap:5px;min-height:190px;border:3px dashed #9a94af;border-radius:13px;color:#6e6885;text-align:center}
.album-empty i{display:grid;place-items:center;width:52px;height:52px;border:3px solid #9a94af;border-radius:50%;font-style:normal;font-size:30px}.album-empty strong{color:var(--ink)}.album-empty span{font-size:12px}
.footnote{text-align:center;color:#cbc8ef;font:700 11px "Courier New",monospace}
@keyframes bars{to{height:48px;background:var(--gold)}}
@keyframes pulse{50%{opacity:.35}}
@keyframes breathe{to{transform:scale(1.025)}}
@keyframes bop{to{transform:translateY(-5px) rotate(1deg)}}
@keyframes auraShift{to{background-position:220% 0}}
@media(max-width:760px){
  body{padding:8px}.privacy{display:none}.topbar{grid-template-columns:auto 1fr}.brand-mark{width:52px;height:52px;font-size:32px}
  .stage{grid-template-columns:1fr;padding:72px 16px 20px;text-align:center}.speaker-face{width:190px;height:190px;margin:auto}.video-screen{width:min(390px,100%);margin:auto}.eyes{padding-top:42px;gap:35px}.mouth{bottom:30px;width:125px;height:48px}.mouth span{width:11px}.antenna{top:-54px;height:54px}
  .status-line{justify-content:center}.console{grid-template-columns:1fr 1fr}.record-button{grid-column:1/3}.console button{min-height:64px}.time{text-align:left}.studio-panel header{display:block}.studio-panel header b{display:inline-block;margin-top:8px}.tool-row{grid-template-columns:1fr}.scary-effects{grid-template-columns:1fr 1fr}.scary-mode>header{align-items:flex-start}.scary-eye{width:53px;height:53px}.album-grid{grid-template-columns:1fr}.album-head{align-items:center}.album-head-actions{max-width:190px}.clear-album{width:100%}.album-filters{display:grid;grid-template-columns:1fr 1fr}.album-filters button{padding:8px 4px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}