.title-screen{position:fixed;z-index:100;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 25% 30%,#204f73 0,#091628 45%,#050913 100%)}
.title-screen[hidden]{display:none}
.title-screen.is-leaving{animation:titleExit .38s ease-in forwards;pointer-events:none}
.title-glow{position:absolute;inset:-30%;background:conic-gradient(from 0deg,#36dfff15,#ff86da1a,#a78aff20,#36dfff15);animation:titleGlow 18s linear infinite}
.title-card{position:relative;width:min(940px,calc(100vw - 36px));min-height:min(570px,calc(100vh - 36px));display:grid;grid-template-columns:48% 52%;border:2px solid #71d8f6;border-radius:24px;overflow:hidden;background:linear-gradient(130deg,#123b5b,#111b38 65%,#2b1d48);box-shadow:0 0 0 8px #ffffff0c,0 0 70px #42dffa65,0 25px 80px #000a}
.title-art{background:linear-gradient(90deg,transparent 70%,#111b38 100%),url('assets/delta-puzzle.png') center/cover no-repeat;animation:titleArt 7s ease-in-out infinite alternate}
.title-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:38px 38px 38px 26px;position:relative;z-index:1}
.title-kicker{color:#89f1ff;font-weight:900;font-size:12px;letter-spacing:3px}
.title-copy h1{font-size:clamp(34px,5.5vw,72px);line-height:1.08;margin:16px 0;color:#fff;text-shadow:0 4px #155276,0 0 25px #85f4ff;white-space:nowrap}
.title-copy h1 em{font-style:normal;color:#ffb5e9;text-shadow:0 4px #802e83,0 0 26px #ff83d4}
.title-copy p{line-height:1.8;color:#d1e7f3;font-size:15px}
.title-start{margin:24px 0 20px;padding:16px 36px;border:0;border-radius:12px;background:linear-gradient(105deg,#81efff,#d597ff 60%,#ff9bd8);color:#0d1730;font:900 22px 'Barlow Condensed',sans-serif;letter-spacing:2px;box-shadow:0 8px 0 #40506c,0 0 30px #8beeff9c;cursor:pointer;transition:transform .15s,box-shadow .15s}
.title-start:hover,.title-start:focus-visible{transform:translateY(-3px);box-shadow:0 11px 0 #40506c,0 0 44px #8beeff}
.title-record{margin:0 0 18px;padding:8px 17px;border:1px solid #ff839d;border-radius:8px;background:#341d36;color:#ffd6df;font-weight:800;cursor:pointer}.title-record.recording{background:#b52f4e;color:#fff}
.title-record.secondary{margin-top:-11px;border-color:#6acdde;background:#143746;color:#d5faff}
.demo-caption{position:fixed;z-index:70;left:50%;bottom:22px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:10px 24px;border:1px solid #8cefff;border-radius:10px;background:#07182eea;color:#fff;text-align:center;font-weight:900;font-size:18px;letter-spacing:1px;text-shadow:0 0 9px #8cefff;box-shadow:0 0 24px #4cdbff66;pointer-events:none}.demo-caption[hidden]{display:none}
.record-button{height:40px;padding:0 12px;border:1px solid #fc718e;border-radius:8px;background:#2d1d32;color:#ffc7d2;font-weight:900;letter-spacing:1px}.record-button.recording{background:#a31d3f;color:white;box-shadow:0 0 20px #ff4f78}
.record-status{position:fixed;z-index:120;top:8px;left:50%;transform:translateX(-50%);padding:7px 16px;border:1px solid #9fc3d4;border-radius:7px;background:#0b1a2de8;color:#e6f5ff;font-size:12px;pointer-events:none}.record-status[hidden]{display:none}.record-status.active{border-color:#ff7d96;color:#ffdce3}
.title-controls{font-size:12px;color:#b4cadd}.title-copy small{margin-top:13px;color:#81a8c2}
.scene-curtain{position:fixed;z-index:110;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transform:translateX(-105%);background:linear-gradient(135deg,#06273c,#152b55 60%,#56305f);box-shadow:20px 0 70px #000b;color:#fff;pointer-events:none}
.scene-curtain.show{animation:sceneWipe .9s ease-in-out both}
.scene-curtain span{font-size:110px;line-height:1;color:#8cf5ff;text-shadow:0 0 45px #82f7ff}
.scene-curtain strong{font-size:clamp(22px,4vw,46px);text-shadow:0 0 22px #fff}
@keyframes titleGlow{to{transform:rotate(360deg)}}
@keyframes titleArt{to{transform:scale(1.055) translateY(-1%);filter:brightness(1.12)}}
@keyframes titleExit{to{opacity:0;transform:scale(1.07)}}
@keyframes sceneWipe{0%{transform:translateX(-105%)}35%,62%{transform:translateX(0)}100%{transform:translateX(105%)}}
@media(max-width:700px){.title-card{grid-template-columns:1fr;grid-template-rows:35vh auto;min-height:0}.title-art{background-position:center 25%}.title-copy{padding:20px;align-items:center;text-align:center}.title-copy h1{font-size:40px}.title-copy p{font-size:12px}.title-start{margin:12px}.title-controls{font-size:10px}.record-button{font-size:0;width:38px;padding:0}.record-button:before{content:'●';font-size:18px}}
@media(prefers-reduced-motion:reduce){.title-glow,.title-art{animation:none}.title-screen.is-leaving{animation:none;opacity:0}.scene-curtain.show{animation:none;transform:translateX(105%)}}
.mobile-warning{position:fixed;z-index:140;inset:0;display:grid;place-items:center;padding:20px;background:#030b1ce8;color:#fff}
.mobile-warning[hidden]{display:none}
.mobile-warning-card{width:min(420px,100%);padding:28px 24px;border:2px solid #81e5fa;border-radius:18px;background:linear-gradient(140deg,#133957,#1d2041);box-shadow:0 0 45px #52dfff75;text-align:center}
.mobile-warning-kicker{color:#8bf5ff;font-size:12px;font-weight:900;letter-spacing:.25em}
.mobile-warning h2{margin:12px 0;font-size:clamp(24px,7vw,34px)}
.mobile-warning p{line-height:1.8;color:#dce9fa}
.mobile-warning button{margin-top:12px;padding:12px 22px;border:0;border-radius:8px;background:linear-gradient(90deg,#7eebff,#ee8cf6);color:#12203c;font-weight:900}