:root{--bg-dark: #0B0F14;--text-main: #EEF2F6;--surface-color: #1A2430;--text-secondary: #A7B3C0;--accent-teal: #2BB3A6;--accent-jade: #4CC38A;--accent-copper: #C98A55;--accent-aubergine: #6E4AA8;--font-main: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100vw;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center}.view{display:none;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn .4s ease-out}.view.active-view{display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}h1{font-weight:300;font-size:1.8rem;letter-spacing:-.02em;margin-bottom:12px}p{font-size:1rem;line-height:1.5;color:var(--text-main);margin-bottom:24px}.secondary-text{color:var(--text-secondary);font-size:.95rem}.error-text{color:var(--accent-copper)}.desktop-card,.error-card,.admin-card{background-color:var(--surface-color);padding:40px;border-radius:16px;max-width:480px;width:90%;text-align:center;box-shadow:0 20px 40px #00000080}.hero{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:40px 20px}.brand-title{font-size:2rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-main);font-weight:300;opacity:.9}.iris-illustration{flex-grow:1;display:flex;align-items:center;justify-content:center;width:100%;max-width:300px}.iris-illustration svg{width:100%;height:auto;opacity:.8;animation:pulseIris 8s infinite alternate ease-in-out}@keyframes pulseIris{0%{transform:scale(.98);opacity:.7}to{transform:scale(1.02);opacity:.9}}.bottom-action{width:100%;max-width:400px}.subtitle{color:var(--text-secondary);font-size:.9rem;margin-bottom:32px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;padding:16px 24px;font-size:1rem;font-weight:500;font-family:var(--font-main);border-radius:12px;cursor:pointer;transition:all .2s ease;width:100%}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--text-main);color:var(--bg-dark)}.btn-primary:hover{background:#fff}.btn-secondary{background:transparent;color:var(--text-main);border:1px solid var(--surface-color);margin-bottom:12px}.btn-secondary:hover{background:var(--surface-color)}.btn svg{width:18px;height:18px}.share-actions{display:flex;flex-direction:column;margin-top:32px}.loader{width:40px;height:40px;border:2px solid var(--surface-color);border-top-color:var(--accent-teal);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}input[type=text]{width:100%;background:var(--bg-dark);border:1px solid var(--surface-color);color:var(--text-main);padding:12px;border-radius:8px;margin-bottom:16px;font-family:monospace;font-size:.9rem}#camera-view{position:relative;background:#000}.camera-header{position:absolute;top:0;left:0;width:100%;padding:24px 20px;display:flex;align-items:center;z-index:20;background:linear-gradient(to bottom,#000c,#0000)}#camera-step-title{font-size:1.1rem;font-weight:500;letter-spacing:.05em;text-shadow:0 1px 4px rgba(0,0,0,.8)}.btn-icon{background:#1a243066;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);color:#fff;width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-right:16px}#camera-container{width:100%;height:100%;position:relative;overflow:hidden}#camera-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#camera-video.rear-facing{transform:scaleX(1)}#camera-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;z-index:10}.reticle{width:280px;height:280px;margin-bottom:30px;animation:reticlePulse 3s infinite alternate ease-in-out}.reticle-svg{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(0,0,0,.5))}@keyframes reticlePulse{0%{transform:scale(.98);opacity:.8}to{transform:scale(1.02);opacity:1}}.guidance-text{background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:10px 20px;border-radius:20px;font-size:.95rem;letter-spacing:.05em;border:1px solid rgba(255,255,255,.1);animation:fadeIn .5s ease}.camera-controls{position:absolute;bottom:0;left:0;width:100%;padding:40px 20px 60px;display:flex;justify-content:center;z-index:20;background:linear-gradient(to top,#000c,#0000)}.capture-btn{width:72px;height:72px;border-radius:36px;background:transparent;border:3px solid var(--text-main);display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:transform .1s ease}.capture-btn:active{transform:scale(.95)}.capture-btn-inner{width:58px;height:58px;border-radius:29px;background:var(--text-main);opacity:.9;transition:all .2s ease}.capture-btn:active .capture-btn-inner{opacity:.6;transform:scale(.9)}#focus-ring{position:absolute;width:60px;height:60px;border:2px solid var(--accent-teal);border-radius:50%;pointer-events:none;opacity:0;z-index:50;box-shadow:0 0 10px #2bb3a680}@keyframes focusPulse{0%{transform:scale(1.5);opacity:0}20%{transform:scale(1);opacity:1}80%{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}#preview-container{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg-dark);z-index:30;display:flex;flex-direction:column}.preview-aura{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at center,var(--accent-teal),transparent 70%);filter:blur(20px);opacity:.25;animation:pulseIris 4s infinite alternate ease-in-out;pointer-events:none}.preview-circle-crop{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:250px;height:250px;border-radius:50%;overflow:hidden;border:4px solid var(--text-main);box-shadow:0 0 30px #0006,0 0 15px #2bb3a666;z-index:10}#preview-img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 42%;transform:scale(-2.5,2.5)!important}#preview-img.rear-facing{transform:scale(2.5)!important}.preview-guidance{position:absolute;top:calc(40% + 160px);text-align:center;width:100%;color:var(--text-secondary);font-size:.95rem;letter-spacing:.05em;z-index:10}.preview-controls{position:absolute;bottom:0;left:0;width:100%;padding:30px 20px 60px;background:linear-gradient(to top,#000000e6,#0000)}.preview-actions{display:flex;gap:16px}.processing-symbol{animation:breatheProcessing 3s infinite ease-in-out}.processing-text{animation:pulseText 2s infinite ease-in-out}@keyframes breatheProcessing{0%{transform:scale(.95);opacity:.8}50%{transform:scale(1.05);opacity:1}to{transform:scale(.95);opacity:.8}}@keyframes pulseText{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}#results-view{background-color:var(--bg-dark);padding:40px 24px;justify-content:space-between;position:relative}#results-view:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0b0f14e6;opacity:0;pointer-events:none;transition:opacity .4s ease;z-index:50}#results-view.modal-active:before{opacity:1;pointer-events:none}.results-header{text-align:center;margin-bottom:24px;width:100%}.results-title{font-size:1.25rem;font-weight:400;color:var(--text-main);line-height:1.4}.area-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;width:100%;max-width:500px;flex-grow:1;align-content:center}.area-tile{background-color:var(--surface-color);border:2px solid transparent;border-radius:16px;padding:24px 16px;text-align:center;cursor:pointer;transition:all .4s cubic-bezier(.25,.8,.25,1);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:120px;position:relative;z-index:10}.tile-summary{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:16px;font-size:.85rem;color:var(--text-secondary);line-height:1.5;opacity:.6;transition:all .3s ease}.area-tile:active{transform:scale(.98)}.area-tile.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:85%;max-width:340px;z-index:100;min-height:auto;padding:40px 24px;box-shadow:0 20px 40px #000000e6}.area-tile.expanded:active{transform:translate(-50%,-50%) scale(.98)}.area-tile.expanded .tile-summary{display:block;opacity:1;font-size:.9rem;color:var(--text-main)}.area-tile.selected{border-color:var(--text-main);background-color:#ffffff0d;box-shadow:0 4px 12px #00000080}.area-tile.played{opacity:.35;filter:grayscale(80%);pointer-events:none}.tile-icon{width:12px;height:12px;border-radius:6px;margin-bottom:12px}.tile-color-teal .tile-icon{background-color:var(--accent-teal);box-shadow:0 0 8px var(--accent-teal)}.tile-color-jade .tile-icon{background-color:var(--accent-jade);box-shadow:0 0 8px var(--accent-jade)}.tile-color-copper .tile-icon{background-color:var(--accent-copper);box-shadow:0 0 8px var(--accent-copper)}.tile-color-aubergine .tile-icon{background-color:var(--accent-aubergine);box-shadow:0 0 8px var(--accent-aubergine)}.tile-title{font-size:.95rem;font-weight:500;color:var(--text-main);margin-bottom:8px;line-height:1.2}.tile-summary{font-size:.8rem;color:var(--text-secondary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.results-footer{width:100%;max-width:500px;margin-top:24px;position:relative;z-index:101;display:flex;flex-direction:column;gap:16px}.results-footer .btn{width:100%}.results-footer .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}#player-view{background-color:var(--bg-dark);padding:40px 24px;justify-content:center}.player-visualizer{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;min-height:400px}#lyria-orb{width:150px;height:150px;border-radius:75px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),var(--accent-teal),#0B0F14);filter:blur(8px);opacity:.5;transition:all 1s ease;box-shadow:0 0 20px #2bb3a633}#lyria-orb.playing{opacity:.9;animation:orbBreathe 4s infinite alternate ease-in-out;box-shadow:0 0 40px #2bb3a699}@keyframes orbBreathe{0%{transform:scale(.9) rotate(0);filter:blur(8px)}50%{filter:blur(12px)}to{transform:scale(1.1) rotate(10deg);filter:blur(8px)}}#completion-view{background-color:var(--bg-dark);align-items:center;justify-content:center}.completion-card{max-width:400px;margin:0 auto;text-align:center}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;background:#0b0f14d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:1;transition:opacity .3s ease}.modal-overlay.hidden{display:none;opacity:0;pointer-events:none}.modal-content{background-color:var(--surface-color);padding:40px;border-radius:16px;width:90%;max-width:400px;text-align:center;box-shadow:0 20px 40px #0009;border:1px solid rgba(255,255,255,.05)}.modal-title{font-weight:300;font-size:1.5rem;color:var(--text-main);margin-bottom:16px}.modal-text{font-size:.95rem;color:var(--text-secondary);line-height:1.5;margin-bottom:32px}.modal-actions{display:flex;flex-direction:column;gap:12px}.modal-actions .btn{margin-bottom:0}.btn-primary.concluded{background:#c4c9cf;color:#333;pointer-events:none;opacity:.7}