:root{--primary-color:#fff;--bg-color:#111;--overlay-bg:#00000080;--accent-color:#3498db;--error-color:#e74c3c;--success-color:#2ecc71;--font-main:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--spacing-xs:5px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:20px;--spacing-xl:40px;--title-font-size:clamp(3rem, 12vw, 6rem);--message-font-size:clamp(1rem, 4vw, 1.5rem);--ui-font-size:.9rem}body,html{background-color:var(--bg-color);width:100vw;height:100vh;color:var(--primary-color);font-family:var(--font-main);margin:0;padding:0;overflow:hidden}.loading-screen{height:100vh;padding:var(--spacing-lg);text-align:center;background-color:#000;justify-content:center;align-items:center;font-size:clamp(1.2rem,5vw,2rem);display:flex}.app-container{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative}.overlay{pointer-events:none;width:100%;height:100%;padding:var(--spacing-xl);box-sizing:border-box;background:radial-gradient(circle,#0000 40%,#000000b3 150%);flex-direction:column;justify-content:flex-end;display:flex;position:absolute;top:0;left:0}.top-left-ui{top:var(--spacing-lg);left:var(--spacing-lg);z-index:1000;gap:var(--spacing-sm);pointer-events:auto;flex-direction:column;display:flex;position:absolute}.top-right-ui{top:var(--spacing-lg);right:var(--spacing-lg);z-index:1000;gap:var(--spacing-sm);pointer-events:auto;flex-direction:column;align-items:flex-end;display:flex;position:absolute}.subject-selector{gap:var(--spacing-xs);flex-wrap:wrap;display:flex}.subject-btn{background:var(--overlay-bg);color:#fff;borderRadius:20px;cursor:pointer;font-weight:700;font-size:var(--ui-font-size);border:1px solid #ffffff4d;padding:8px 16px;transition:all .3s}.subject-btn.active{color:#000;background:#fffc}.tool-btn{background:var(--overlay-bg);color:#fff;cursor:pointer;font-family:inherit;font-size:var(--ui-font-size);border:1px solid #ffffff4d;border-radius:5px;padding:8px 16px;transition:all .2s}.tool-btn:hover{background:#ffffff1a}.tool-btn.primary{background:#3498dbb3;font-weight:700}.tool-btn.primary:hover{background:#3498dbe6}.text-info{margin-bottom:var(--spacing-xl);pointer-events:none;flex-direction:column;align-items:center;display:flex}.year-title{font-size:var(--title-font-size);text-shadow:0 8px 30px #000000e6;letter-spacing:-2px;margin:0;font-weight:900;line-height:1}.message{font-size:var(--message-font-size);opacity:.9;text-shadow:0 4px 15px #000000e6;margin:10px 0 0;font-weight:500}.controls{pointer-events:auto;flex-direction:column;align-self:center;align-items:center;gap:15px;width:90%;max-width:600px;margin-bottom:20px;display:flex}.slider{cursor:pointer;appearance:none;background:#fff3;border-radius:5px;outline:none;width:100%;height:5px}.slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:24px;height:24px;box-shadow:0 0 10px #00000080}.instructions{opacity:.6;text-transform:uppercase;letter-spacing:2px;font-size:.8rem}@media (width<=768px){.overlay{padding:var(--spacing-lg)}.top-left-ui,.top-right-ui{width:100%;padding-top:var(--spacing-md);align-items:center;position:static}.top-left-ui{order:-2}.top-right-ui{margin-top:var(--spacing-sm);order:-1}.overlay{justify-content:space-between}.text-info{margin-top:auto;margin-bottom:auto}.controls{width:100%}}.tool-btn.record-btn{background:#e74c3cb3;font-weight:700}.tool-btn.record-btn:hover:not(:disabled){background:#e74c3ce6}.tool-btn.record-btn.recording{background:#c0392be6;animation:1.5s infinite pulse}@keyframes pulse{0%{opacity:1}50%{opacity:.6}to{opacity:1}}.recording-overlay{z-index:2000;pointer-events:none;background:#0009;border-radius:20px;align-items:center;gap:10px;padding:8px 15px;display:flex;position:absolute;top:100px;right:30px}.recording-dot{background-color:#e74c3c;border-radius:50%;width:12px;height:12px;animation:1s infinite blink}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}.recording-overlay span{letter-spacing:1px;font-size:14px;font-weight:700}