*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-primary);line-height:var(--line-height-normal);color:var(--color-text-primary);background:var(--color-bg-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);margin:0;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}*:focus{outline:2px solid var(--color-accent-primary);outline-offset:2px}button:focus,select:focus,input:focus{outline:3px solid var(--color-accent-primary);outline-offset:1px}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23666666' stroke-width='0.5'%3E%3Crect x='2' y='8' width='4' height='6' rx='1'/%3E%3Crect x='34' y='8' width='4' height='6' rx='1'/%3E%3Crect x='2' y='26' width='4' height='6' rx='1'/%3E%3Crect x='34' y='26' width='4' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23666666' fill-opacity='0.8' font-family='serif'%3E%3Ctext x='15' y='25' font-size='12'%3E∴%3C/text%3E%3Ctext x='50' y='55' font-size='10'%3E⟷%3C/text%3E%3Ctext x='25' y='70' font-size='8'%3E◊%3C/text%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23666666' fill-opacity='0.6' font-family='serif'%3E%3Ctext x='20' y='40' font-size='14'%3E≈%3C/text%3E%3Ctext x='70' y='80' font-size='10'%3E※%3C/text%3E%3Ctext x='45' y='25' font-size='8'%3E∞%3C/text%3E%3Ctext x='85' y='45' font-size='6'%3E⊙%3C/text%3E%3C/g%3E%3C/svg%3E");background-position:0 0,60px 30px,100px 60px;background-size:80px 80px,160px 160px,240px 240px;animation:slowDrift 80s linear infinite}[data-theme=dark] body:before{opacity:.015;background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23cccccc' stroke-width='0.5'%3E%3Crect x='2' y='8' width='4' height='6' rx='1'/%3E%3Crect x='34' y='8' width='4' height='6' rx='1'/%3E%3Crect x='2' y='26' width='4' height='6' rx='1'/%3E%3Crect x='34' y='26' width='4' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cccccc' fill-opacity='0.8' font-family='serif'%3E%3Ctext x='15' y='25' font-size='12'%3E∴%3C/text%3E%3Ctext x='50' y='55' font-size='10'%3E⟷%3C/text%3E%3Ctext x='25' y='70' font-size='8'%3E◊%3C/text%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cccccc' fill-opacity='0.6' font-family='serif'%3E%3Ctext x='20' y='40' font-size='14'%3E≈%3C/text%3E%3Ctext x='70' y='80' font-size='10'%3E※%3C/text%3E%3Ctext x='45' y='25' font-size='8'%3E∞%3C/text%3E%3Ctext x='85' y='45' font-size='6'%3E⊙%3C/text%3E%3C/g%3E%3C/svg%3E")}@keyframes slowDrift{0%{transform:translate(0)}to{transform:translate(-20px)}}#introduction-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background:var(--color-bg-primary);isolation:isolate}.modal{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-bg-primary);position:relative;z-index:10}body:has(#stage-5.active),body.stage-5-active{overflow-y:auto}body:has(#stage-5.active) .modal,body.stage-5-active .modal{min-height:200vh;align-items:flex-start;padding-top:5vh;padding-bottom:80vh}#stage-5{min-height:120vh;padding-bottom:var(--space-20)}#stage-5.active{display:flex!important}#stage-5 .mode-list{min-height:100vh;padding-bottom:var(--space-20)}body{overflow:hidden}.modal-content{width:90%;max-width:800px;min-height:500px;background:var(--color-bg-elevated);border-radius:var(--radius-xl);border:1px solid var(--color-border-primary);box-shadow:var(--shadow-lg);padding:var(--space-10);position:relative;display:flex;flex-direction:column;z-index:20;isolation:isolate}.intro-stage{display:none;text-align:center;flex:1;flex-direction:column;justify-content:center;min-height:400px}.intro-stage.active{display:flex}.stage-heading{font-size:24px;font-weight:600;color:var(--color-text-primary);margin:0 0 10px}.stage-intro{font-size:16px;color:var(--color-text-secondary);margin:0 0 20px}.avatar-container{margin-bottom:20px}.edward-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--color-border-primary)}.stage-heading{font-family:var(--font-display);font-size:clamp(var(--font-size-3xl),5vw,var(--font-size-4xl));font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-5);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-tight)}.stage-intro{font-size:clamp(var(--font-size-base),3vw,var(--font-size-lg));color:var(--color-text-secondary);margin-bottom:var(--space-8);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);max-width:42ch;margin-left:auto;margin-right:auto}.verb-cycle{display:inline-block;position:relative;font-weight:600;font-size:1.2em;text-transform:lowercase;letter-spacing:.03em;padding:6px 12px;margin:0 6px;transition:opacity .3s ease;width:120px;text-align:center;z-index:1;background:#2a3a2a;border-radius:3px;box-shadow:inset 0 1px 3px #0000004d,0 1px 2px #0003;color:#ffffffe6;text-shadow:0 0 2px rgba(255,255,255,.5),1px 1px 1px rgba(0,0,0,.3)}[data-theme=dark] .verb-cycle{background:#1a2a1a;color:#ffffffd9;box-shadow:inset 0 1px 4px #0006,0 1px 2px #0000004d}.chalkboard-highlight{display:inline-block;position:relative;font-weight:600;padding:4px 8px;margin:0 2px;border-radius:3px;background:#2a3a2a;color:#ffffffe6;text-shadow:0 0 2px rgba(255,255,255,.5),1px 1px 1px rgba(0,0,0,.3);box-shadow:inset 0 1px 3px #0000004d,0 1px 2px #0003}[data-theme=dark] .chalkboard-highlight{background:#1a2a1a;color:#ffffffd9}.chalkboard-highlight.rainbow-highlight{background:linear-gradient(135deg,#2a4a2a,red 12%,#fd513b,#0693e3 38%,#00d084,#fcb900 62%,#ff6900,#fff 88%,#2a4a2a);background-size:300% 300%;animation:speedRacerShift 4s ease-in-out infinite;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.9),2px 2px 4px rgba(0,0,0,.8),0 0 2px rgba(255,255,255,.3);border:2px solid rgba(255,255,255,.4);box-shadow:inset 0 0 10px #0000004d,0 0 8px #fff3}@keyframes speedRacerShift{0%{background-position:0% 50%;transform:scale(1)}25%{background-position:100% 25%;transform:scale(1.02)}50%{background-position:200% 75%;transform:scale(1)}75%{background-position:300% 25%;transform:scale(1.01)}to{background-position:400% 50%;transform:scale(1)}}[data-theme=dark] .chalkboard-highlight.rainbow-highlight{background:linear-gradient(135deg,#1a3a1a,#c00 12%,#c33,#0569b8 38%,#00a866,#c89600 62%,#c50,#ccc 88%,#1a3a1a);background-size:300% 300%;animation:speedRacerShift 4s ease-in-out infinite;border:2px solid rgba(255,255,255,.3);box-shadow:inset 0 0 10px #0006,0 0 6px #ffffff26}.chalkboard-highlight.temporal-fragmentation{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,#4a3338,#5a4a3a,#4a3338,#5a4a3a,#4a3338);background-size:200% 100%;animation:timeShift 8s linear infinite;padding:4px 10px;border-radius:4px;font-weight:600;position:relative;color:#fffffff2;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.chalkboard-highlight.temporal-fragmentation .word{display:inline-block;animation:glitch 3s infinite}.chalkboard-highlight.temporal-fragmentation .word:nth-child(2){animation-delay:.5s}[data-theme=dark] .chalkboard-highlight.temporal-fragmentation{background:linear-gradient(90deg,#3a2328,#4a3a2a,#3a2328,#4a3a2a,#3a2328);background-size:200% 100%;animation:timeShift 8s linear infinite;color:#ffffffd9}@keyframes timeShift{0%{background-position:0% 50%}to{background-position:200% 50%}}@keyframes glitch{0%,to{transform:translate(0);opacity:1}20%{transform:translate(-2px);opacity:.95}40%{transform:translate(2px);opacity:.9}60%{transform:translate(-1px);opacity:.95}80%{transform:translate(1px);opacity:1}}.edwards-chalkboard{background:radial-gradient(circle at 25% 25%,#2a4a2a,#1f3a1f 30%,#1a331a 70%,#0f2a0f),repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0px,transparent 1px,transparent 2px,rgba(255,255,255,.02) 3px);border:8px solid #8B4513;border-radius:4px;padding:var(--space-6);margin:var(--space-4) 0;position:relative;box-shadow:inset 0 0 20px #0000004d,inset 0 0 5px #00000080,0 4px 15px #0003}.edwards-chalkboard:before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;background:linear-gradient(45deg,sienna,#8b4513,#654321);border-radius:8px;z-index:-1}.edwards-chalkboard:after{content:'"';position:absolute;top:var(--space-2);left:var(--space-3);font-size:var(--font-size-3xl);color:#ffffff4d;font-family:Georgia,serif;line-height:1}.chalkboard-text{font-family:Comic Sans MS,cursive,sans-serif;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);color:#fffffff2;text-shadow:0 0 3px rgba(255,255,255,.8),1px 1px 2px rgba(0,0,0,.5);font-style:italic;text-align:left;margin:0;font-weight:var(--font-weight-regular);letter-spacing:.02em}.chalkboard-attribution{position:absolute;bottom:var(--space-2);right:var(--space-3);font-size:var(--font-size-xs);color:#fff9;font-style:normal;font-weight:var(--font-weight-medium);text-shadow:1px 1px 1px rgba(0,0,0,.3);letter-spacing:.05em}[data-theme=dark] .edwards-chalkboard{background:radial-gradient(circle at 25% 25%,#1a3a1a,#0f2a0f 30%,#0a220a 70%,#051a05),repeating-linear-gradient(45deg,rgba(255,255,255,.01) 0px,transparent 1px,transparent 2px,rgba(255,255,255,.01) 3px);border-color:#654321}[data-theme=dark] .chalkboard-text{color:#ffffffe6;text-shadow:0 0 2px rgba(255,255,255,.7),1px 1px 2px rgba(0,0,0,.6)}.stage-conclusion{margin-top:25px;font-size:16px;color:var(--color-text-secondary);font-style:italic}.simple-comparison{background:var(--color-bg-secondary);border-radius:6px;padding:25px;margin:25px 0;border:1px solid var(--color-border-primary);text-align:left}.comparison-point{margin:15px 0;font-size:16px;line-height:1.5}.comparison-point strong{color:var(--color-text-primary)}.mode-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:30px 0;text-align:center}.mode-option{background:var(--color-bg-elevated);border:2px solid var(--color-border-primary);border-radius:8px;padding:25px 20px;cursor:pointer;transition:all .2s ease;position:relative}.mode-option:hover{border-color:var(--color-accent-primary);transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.mode-option.recommended{border-color:var(--color-accent-primary);background:#0d6efd05}.mode-option h3{font-size:20px;margin-bottom:8px;color:var(--color-text-primary);font-weight:400}.mode-option p{font-size:14px;color:var(--color-text-secondary);margin:0}.recommended-badge{position:absolute;top:-8px;right:15px;background:var(--color-accent-primary);color:#fff;font-size:11px;padding:4px 10px;border-radius:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.mode-selection-final{display:flex;gap:20px;margin:30px 0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 20px}.mode-select-btn{background:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:12px;padding:32px 24px;cursor:pointer;transition:all .2s ease;text-align:center;font-family:var(--font-primary);flex:0 0 auto;min-width:280px;scroll-snap-align:center}.mode-select-btn:hover{border-color:var(--color-accent-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.mode-select-btn:hover{border-color:var(--color-accent-primary);transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.mode-select-btn h3{font-family:var(--font-display);font-size:20px;margin-bottom:12px;color:var(--color-text-primary);font-weight:600;letter-spacing:-.01em}.mode-select-btn p{font-size:14px;color:var(--color-text-secondary);margin:0;line-height:1.5;font-weight:400}.mode-select-btn.selected{border-color:var(--color-accent-primary);background:var(--color-bg-elevated);box-shadow:var(--shadow-md),0 0 0 2px #3b82f626;transform:translateY(-1px)}.stage-header{text-align:center;margin-bottom:var(--space-12)}.mode-list{gap:0;max-width:720px;margin:0 auto var(--space-12) auto;padding:0 var(--space-6);overflow-y:auto;max-height:65vh;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.mode-card{background:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.06);border-radius:0;padding:var(--space-8) var(--space-2);cursor:pointer;transition:all .25s ease;position:relative}.mode-card:last-child{border-bottom:none}.mode-card:before{content:"";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--color-accent-primary);transition:height .3s ease;border-radius:2px}.mode-card:hover{background:#3b82f605;padding-left:var(--space-4)}.mode-card:hover:before{height:40px}.mode-card:active{background:#3b82f60a}.mode-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-2);gap:var(--space-4)}.mode-title{font-family:var(--font-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-regular);color:var(--color-text-primary);margin:0;line-height:1.3;letter-spacing:-.01em}.mode-stats{display:flex;gap:0;font-size:var(--font-size-sm);color:var(--color-text-tertiary);white-space:nowrap;opacity:.6}.mode-stats .stat:first-child:after{content:" •";margin:0 var(--space-2)}.mode-description{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0;opacity:.8}.mode-card.selected{background:#3b82f60a;padding-left:var(--space-4)}.mode-card.selected:before{height:60px}.challenging-content-card .mode-title:after{content:"⚠";margin-left:var(--space-2);font-size:var(--font-size-sm);opacity:.4}.content-warning{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);background:#fbbf241a;border:1px solid rgba(251,191,36,.3);border-radius:var(--radius-md);font-style:italic;color:var(--color-text-tertiary)}.mode-icon{font-size:var(--font-size-5xl);margin-bottom:var(--space-6);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.mode-title:hover{color:var(--color-accent-primary);transform:translateY(-2px)}.mode-title:after{content:"👆 Click to start";position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:.8rem;color:var(--color-text-secondary);opacity:0;transition:opacity .3s ease;pointer-events:none;white-space:nowrap}.mode-title:hover:after{opacity:.7}@media (max-width: 768px){.mode-title:after{font-size:.7rem;bottom:-18px}}@media (max-width: 768px){.mode-title{font-size:clamp(1.8rem,8vw,2.5rem);margin:0 0 var(--space-4) 0}.mode-description{font-size:1.1rem;max-width:45ch;margin:var(--space-4) auto;padding:0 var(--space-4)}.mode-stats{gap:var(--space-4);margin:var(--space-6) auto var(--space-6) auto}.stat{font-size:var(--font-size-xs);padding:var(--space-2) var(--space-4)}.mode-list{gap:0;padding:0 var(--space-4);max-height:70vh}.mode-card{padding:var(--space-6) var(--space-2)}.mode-card:before{left:-10px}.mode-header{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.mode-title{font-size:var(--font-size-xl)}}.mode-description{font-family:var(--font-primary);font-size:1.2rem;line-height:1.6;color:var(--color-text-primary);margin:var(--space-6) auto;max-width:60ch;text-align:center;font-weight:300;opacity:.85;transition:opacity .3s ease}.mode-stats{display:flex;justify-content:center;gap:var(--space-8);margin:var(--space-10) auto var(--space-8) auto;flex-wrap:wrap}.stat{background:#2f4f4f33;color:var(--color-text-primary);font-family:var(--font-display);font-size:.9rem;font-weight:500;padding:var(--space-4) var(--space-8);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-transform:none;font-style:normal;transition:all .3s ease}.stat:hover{background:#2f4f4f4d;transform:translateY(-1px)}.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-top:var(--space-8);padding:var(--space-4);border-radius:var(--radius-lg);background:#ffffff08;border:1px solid rgba(255,255,255,.1);animation:scrollPulse 3s ease-in-out infinite}.scroll-arrow{font-size:var(--font-size-2xl);color:var(--color-accent-primary);font-weight:var(--font-weight-bold);text-shadow:0 0 8px rgba(59,130,246,.5)}.scroll-text{font-family:var(--font-display);font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;opacity:.8;font-style:italic;text-align:center}@keyframes scrollPulse{0%,to{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(3px)}}.start-mode-btn{background:var(--color-accent-primary);color:#fff;border:none;border-radius:var(--radius-xl);padding:var(--space-4) var(--space-8);font-family:var(--font-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base);letter-spacing:var(--letter-spacing-normal)}.start-mode-btn:hover{background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.mobile-back-fab{position:fixed;bottom:var(--space-6);left:var(--space-6);width:56px;height:56px;border-radius:50%;background:var(--color-accent-primary);color:#fff;border:none;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-lg);z-index:1000;display:flex;align-items:center;justify-content:center}.mobile-back-fab:hover{background:var(--color-accent-hover);transform:scale(1.05);box-shadow:var(--shadow-xl)}.mobile-back-fab:active{transform:scale(.95)}.navigation-tip{position:fixed;top:var(--space-6);left:50%;transform:translate(-50%);z-index:1001;background:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-6);box-shadow:var(--shadow-lg);opacity:0;transition:all var(--transition-base);pointer-events:none}.navigation-tip.visible{opacity:.95}.tip-content{text-align:center}.tip-text{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);white-space:nowrap}@media (max-width: 768px){.navigation-tip{top:var(--space-4);left:var(--space-4);right:var(--space-4);transform:none}.tip-text{font-size:var(--font-size-xs);white-space:normal}}.intro-byline{margin-top:var(--space-5);position:absolute;bottom:var(--space-4);right:var(--space-6)}.date{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase}.stage-navigation{margin-top:30px}.continue-btn,.skip-btn{padding:12px 24px;border-radius:6px;font-size:15px;font-weight:400;cursor:pointer;margin:0 8px;border:none;transition:all .2s ease}.continue-btn{background:var(--color-accent-primary);color:#fff}.skip-btn{background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border-primary)}.continue-btn:hover{background:#0b5ed7;transform:translateY(-1px)}.skip-btn:hover{border-color:var(--color-accent-primary);color:var(--color-accent-primary)}.stage-number{font-size:14px;color:var(--color-text-secondary);font-weight:500;position:absolute;bottom:15px;left:20px;background:var(--color-bg-primary);padding:6px 12px;border-radius:12px;border:1px solid var(--color-border-primary)}@media (max-width: 600px){.mode-options{grid-template-columns:1fr;gap:15px}.mode-option{padding:20px 15px}.mode-selection-final{flex-direction:row;justify-content:flex-start;scroll-snap-type:x mandatory;gap:15px}.mode-select-btn{padding:25px 15px}}@media (min-width: 769px){.modal{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-bg-primary)}.modal-content{width:90%;max-width:900px;min-height:500px;background:var(--color-bg-elevated);border-radius:var(--radius-xl);border:1px solid var(--color-border-primary);box-shadow:var(--shadow-lg);padding:var(--space-12);position:relative;display:flex;flex-direction:column}.intro-stage{display:none;text-align:center;flex:1;flex-direction:column;justify-content:center;min-height:400px}.intro-stage.active{display:flex}}@media (max-width: 768px){body{padding:0;overflow:hidden}body:has(#stage-5.active),body.stage-5-active{overflow-y:auto}.modal{height:100vh;height:100svh;align-items:flex-start;background:var(--color-bg-elevated);overflow:hidden}body:has(#stage-5.active) .modal,body.stage-5-active .modal{min-height:150vh;padding-top:2vh;padding-bottom:50vh}.modal-content{width:100%;height:100vh;height:100svh;max-width:none;border-radius:0;border:none;box-shadow:none;padding:0;overflow:hidden;position:relative}#stage-5{min-height:100vh;padding-bottom:var(--space-16)}.intro-stage{position:absolute;top:0;left:0;width:100%;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:40px 20px 140px;opacity:0;visibility:hidden;transition:opacity .3s ease;box-sizing:border-box}.intro-stage.active{opacity:1;visibility:visible}.stage-heading{font-size:28px;margin-bottom:15px}.stage-intro{font-size:18px;margin-bottom:30px}.edward-avatar{width:100px;height:100px}.stage-number{bottom:20px;left:15px;font-size:13px;padding:4px 10px}.stage-navigation{display:none}}.mobile-swipe-hint{display:none}@media (max-width: 768px){.mobile-swipe-hint{display:block;position:fixed;bottom:20px;left:50%;transform:translate(-50%);font-size:11px;color:var(--color-text-secondary);text-align:center;opacity:.6;animation:fadeInOut 4s ease-in-out;background:var(--color-bg-primary);padding:4px 8px;border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000}}@keyframes fadeInOut{0%,to{opacity:0}50%{opacity:.6}}.mobile-swipe-indicator{display:none}@media (max-width: 768px){.mobile-swipe-indicator{display:block;position:fixed;bottom:15px;left:50%;transform:translate(-50%);z-index:999;pointer-events:none}.swipe-hint{display:flex;align-items:center;gap:8px;background:#0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 12px;border-radius:16px;font-size:10px;color:var(--color-text-secondary);opacity:.5;animation:fadeInOut 5s ease-in-out}.swipe-arrows{display:flex;flex-direction:column;align-items:center;gap:2px}.swipe-arrows.horizontal{flex-direction:row}.swipe-arrows .arrow{font-size:8px;line-height:1;opacity:.7}}.keyboard-hint,.keyboard-icons.stage-5-only,.swipe-hint.stage-5-only{display:none}#stage-5.active~.keyboard-hint .stage-1-4,#stage-5.active~.mobile-swipe-indicator .stage-1-4{display:none}#stage-5.active~.keyboard-hint .stage-5-only,#stage-5.active~.mobile-swipe-indicator .stage-5-only{display:flex}.swipe-arrows.horizontal{flex-direction:row;gap:8px}@media (min-width: 769px){.keyboard-hint{display:flex;flex-direction:column;align-items:center;gap:8px;position:fixed;top:20px;right:20px;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);padding:12px 16px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:subtlePulse 3s ease-in-out infinite;z-index:1000;box-shadow:0 4px 20px #0000001a}.keyboard-icons{display:flex;gap:10px;margin-bottom:4px}.key-icon{display:inline-block;width:22px;height:22px;background:#ffffffe6;color:var(--color-text-primary);border:1px solid rgba(0,0,0,.2);border-radius:4px;text-align:center;font-size:12px;line-height:20px;font-weight:600;box-shadow:0 2px 4px #0000001a}.hint-text{font-size:12px;color:var(--color-text-primary);text-align:center;white-space:nowrap;font-weight:500;opacity:.9}}@keyframes subtlePulse{0%,to{opacity:.8;border-color:#3b82f64d}50%{opacity:1;border-color:#3b82f680}}.intro-stage:after{content:"Press ↓ to continue";position:absolute;bottom:40px;right:40px;font-size:14px;opacity:.6;animation:fadeInOut 3s ease-in-out infinite;color:var(--color-text-secondary);font-weight:500;pointer-events:none}.intro-stage#stage-5:after{content:"Use ←→ arrows to explore modes";bottom:80px}@keyframes fadeInOut{0%,to{opacity:.4}50%{opacity:.8}}@media (max-width: 768px){.intro-stage:after{display:none}}#main-content{max-width:1200px;margin:0 auto;padding:var(--space-5)}.app-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:var(--space-8);padding-bottom:var(--space-5);border-bottom:1px solid var(--color-border-primary)}.header-left{justify-self:start}.header-center{justify-self:center;display:flex;align-items:center}.header-mode-dropdown{background:transparent;border:1px solid rgba(0,0,0,.15);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-6) var(--space-3) var(--space-4);font-family:var(--font-display);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-base);text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none;letter-spacing:var(--letter-spacing-tight);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23333'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px}.header-mode-dropdown:hover,.header-mode-dropdown:focus{border-color:var(--color-accent-primary);outline:none;background-color:#3b82f608;box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}.header-buttons{justify-self:end}.back-btn{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-4);font-family:var(--font-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;gap:var(--space-2);letter-spacing:var(--letter-spacing-normal)}.back-btn:hover{background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.back-btn:active{transform:translateY(0)}.header-buttons{display:flex;align-items:center;gap:10px}.dark-mode-toggle{background:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:20px;padding:8px 12px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.dark-mode-toggle:hover{border-color:var(--color-accent-primary);transform:translateY(-1px)}.dark-mode-icon{font-size:16px;transition:transform .2s ease}[data-theme=dark] .dark-mode-icon{transform:rotate(180deg)}.intro-toggle{position:absolute;top:20px;right:20px;z-index:1000;background:var(--color-bg-elevated)!important;border:1px solid var(--color-border-primary)!important}#mode-toggle{display:flex;gap:10px;margin-bottom:30px;justify-content:center;flex-wrap:wrap}.mode-btn{padding:12px 20px;border:1px solid var(--color-border-primary);background:var(--color-bg-elevated);color:var(--color-text-primary);border-radius:6px;cursor:pointer;font-size:14px;font-weight:400;transition:all .2s ease}.mode-btn:hover{border-color:var(--color-accent-primary);color:var(--color-accent-primary);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.mode-btn.active{background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary);box-shadow:0 2px 8px #0d6efd33}#film-container{text-align:center;max-width:800px;margin:0 auto;min-height:70vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;perspective:1000px}.film-card{background:var(--color-bg-elevated);border-radius:var(--radius-2xl);padding:clamp(var(--space-10),8vw,var(--space-16)) clamp(var(--space-8),6vw,var(--space-12));border:1px solid var(--color-border-secondary);box-shadow:var(--shadow-lg);width:100%;max-width:720px;transform-style:preserve-3d;backface-visibility:hidden;transition:box-shadow var(--transition-base);position:relative;overflow:visible}.film-nav-cues{position:absolute;top:var(--space-4);right:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);z-index:10}.nav-cue{width:40px;height:40px;background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-base);opacity:.6}.nav-cue:hover{opacity:1;background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.film-actions{display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-6);padding:0;background:transparent;border:none;gap:var(--space-4)}.bookmark-btn,.context-btn,.random-btn{background:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--font-size-lg);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-base);min-width:40px;height:40px;display:flex;align-items:center;justify-content:center}.bookmark-btn:hover,.context-btn:hover,.random-btn:hover{background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.bookmark-btn.bookmarked{background:#fbbf24;color:#fff;border-color:#fbbf24}.bookmark-btn.bookmarked:hover{background:#f59e0b;border-color:#f59e0b}.mode-switcher{flex:1;max-width:200px}.mode-select{width:100%;background:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-family:var(--font-primary);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-base)}.mode-select:hover,.mode-select:focus{border-color:var(--color-accent-primary);outline:none;box-shadow:0 0 0 2px #3b82f61a}.film-content{position:relative;z-index:5}.film-context-panel{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--color-bg-elevated);border-radius:var(--radius-2xl);border:2px solid var(--color-accent-primary);box-shadow:var(--shadow-xl);z-index:20;transform:translateY(100%);opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);padding:var(--space-8);overflow-y:auto}.film-context-panel.active{transform:translateY(0);opacity:1}.context-content{padding-bottom:var(--space-12)}.context-section{margin-bottom:var(--space-6)}.context-section h4{font-family:var(--font-display);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-3);letter-spacing:var(--letter-spacing-tight)}.context-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}.context-tag{background:var(--color-bg-secondary);color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border-secondary);letter-spacing:var(--letter-spacing-wide);text-transform:capitalize}.related-films{display:flex;flex-direction:column;gap:var(--space-2)}.related-film-btn{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-family:var(--font-primary);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-base);text-align:left}.related-film-btn:hover{background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary);transform:translate(4px)}.context-close-btn{position:absolute;top:var(--space-4);right:var(--space-4);width:40px;height:40px;background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:50%;font-size:var(--font-size-xl);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center}.context-close-btn:hover{background:#ef4444;color:#fff;border-color:#ef4444;transform:rotate(90deg)}.viewing-stats{position:absolute;bottom:var(--space-4);left:var(--space-4);display:flex;align-items:center;gap:var(--space-4);z-index:10}.films-viewed,.streak{background:var(--color-bg-secondary);color:var(--color-text-tertiary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border-secondary);letter-spacing:var(--letter-spacing-wide);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.streak{background:linear-gradient(45deg,#ff6b6b,#ffa726);color:#fff;border-color:transparent;animation:pulseGlow 2s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 5px #ff6b6b4d}50%{box-shadow:0 0 20px #ff6b6b99}}.film-card.page-turning{position:absolute;top:0;left:0;right:0;margin:0 auto}.film-title{font-family:var(--font-display);font-size:clamp(var(--font-size-2xl),4vw,var(--font-size-4xl));font-weight:var(--font-weight-semibold);margin-bottom:var(--space-4);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-tight)}.film-director{font-size:var(--font-size-base);color:var(--color-text-secondary);margin-bottom:var(--space-2);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-normal)}.film-year{font-size:var(--font-size-sm);color:var(--color-text-tertiary);margin-bottom:var(--space-6);font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-wide)}.film-notes{font-family:var(--font-display);font-style:italic;line-height:var(--line-height-relaxed);color:var(--color-text-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-base);max-width:36ch;margin:0 auto}#film-navigation{text-align:center;margin-top:40px}#film-counter{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-align:center;padding:var(--space-2) 0}.film-nav-hints{text-align:center;margin-top:var(--space-3)}.nav-hint{font-size:var(--font-size-xs);color:var(--color-text-tertiary);line-height:1.4;margin:var(--space-1) 0}.nav-hint.primary{color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.nav-hint.secondary{opacity:.7;font-size:11px}#category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:40px}.category-card{background:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:8px;padding:20px;cursor:pointer;transition:all .2s ease}.category-card:hover{border-color:var(--color-accent-primary);transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.category-title{font-size:18px;font-weight:600;margin-bottom:5px;color:var(--color-text-primary)}.category-count{font-size:14px;color:var(--color-text-secondary)}#directors-sections{space-y:40px}.director-section{margin-bottom:40px}.director-section-title{font-size:20px;font-weight:600;margin-bottom:20px;color:var(--color-text-primary);border-bottom:2px solid var(--color-border-primary);padding-bottom:10px}.directors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}.director-card{background:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:8px;padding:15px;cursor:pointer;transition:all .2s ease;text-align:center}.director-card:hover{border-color:var(--color-accent-primary);transform:translateY(-1px);box-shadow:0 2px 10px #0000001a}.director-name{font-size:16px;font-weight:500;margin-bottom:5px;color:var(--color-text-primary)}.director-film-count{font-size:12px;color:var(--color-text-secondary)}#films-list,#director-films-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.film-item{background:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:8px;padding:20px}.film-item-title{font-size:18px;font-weight:600;margin-bottom:5px;color:var(--color-text-primary)}.film-item-director{font-size:14px;color:var(--color-text-secondary);margin-bottom:3px}.film-item-year{font-size:12px;color:var(--color-text-secondary)}#back-to-categories,#back-to-directors{background:transparent;border:1px solid var(--color-border-primary);border-radius:20px;padding:8px 16px;cursor:pointer;color:var(--color-text-secondary);font-size:14px;margin-bottom:20px}#back-to-categories:hover,#back-to-directors:hover{border-color:var(--color-accent-primary);color:var(--color-accent-primary)}#filter-header,#director-header{display:flex;align-items:center;gap:15px;margin-bottom:30px}#filter-title,#director-name{font-size:24px;font-weight:600;color:var(--color-text-primary)}#filter-count,#director-count{background:var(--color-accent-primary);color:#fff;padding:4px 12px;border-radius:15px;font-size:12px}@keyframes pageFlipDown{0%{transform:translateY(-100%) rotateX(90deg);opacity:0}50%{opacity:.5}to{transform:translateY(0) rotateX(0);opacity:1}}@keyframes pageFlipUp{0%{transform:translateY(100%) rotateX(-90deg);opacity:0}50%{opacity:.5}to{transform:translateY(0) rotateX(0);opacity:1}}.film-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.005) 2px,rgba(0,0,0,.005) 4px),repeating-linear-gradient(0deg,transparent,transparent 20px,rgba(0,0,0,.008) 20px,rgba(0,0,0,.008) 21px);pointer-events:none;border-radius:12px;opacity:.3}[data-theme=dark] .film-card:before{background:repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,255,255,.008) 2px,rgba(255,255,255,.008) 4px),repeating-linear-gradient(0deg,transparent,transparent 20px,rgba(255,255,255,.012) 20px,rgba(255,255,255,.012) 21px);opacity:.2}@media (max-width: 768px){#main-content{padding:15px}.film-card{padding:40px 30px}.film-nav-cues{top:var(--space-3);right:var(--space-3);gap:var(--space-2)}.nav-cue{width:44px;height:44px;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.film-actions{flex-wrap:wrap;gap:var(--space-3);padding:var(--space-3)}.bookmark-btn,.context-btn,.random-btn{min-width:44px;height:44px;padding:var(--space-2) var(--space-3);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium)}.mode-switcher{flex:1 1 100%;max-width:none;order:3}.mode-select{font-size:var(--font-size-sm);padding:var(--space-3);line-height:var(--line-height-snug);font-weight:var(--font-weight-medium)}.film-context-panel{padding:var(--space-4)}.context-section h4{font-size:var(--font-size-base)}.context-tags{gap:var(--space-1)}.context-tag{font-size:var(--font-size-xs);padding:var(--space-2) var(--space-3);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide)}.related-film-btn{font-size:var(--font-size-sm);padding:var(--space-3) var(--space-4);line-height:var(--line-height-snug);font-weight:var(--font-weight-regular)}.context-close-btn{top:var(--space-3);right:var(--space-3);width:44px;height:44px;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold)}.viewing-stats{bottom:var(--space-3);left:var(--space-3);flex-direction:column;align-items:flex-start;gap:var(--space-2)}.films-viewed,.streak{font-size:var(--font-size-xs);padding:var(--space-2) var(--space-3);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-normal)}.stage-header{margin-bottom:var(--space-8)}.mode-card{padding:var(--space-4)}.mode-icon{font-size:var(--font-size-4xl);margin-bottom:var(--space-4)}.mode-title{font-size:var(--font-size-2xl)}.mode-description{font-size:var(--font-size-sm);margin-bottom:var(--space-4)}.mode-stats{flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-6)}.start-mode-btn{padding:var(--space-3) var(--space-6);font-size:var(--font-size-sm)}.scroll-hint{margin-top:var(--space-2)}.scroll-text{font-size:11px}.app-header{grid-template-columns:auto 1fr auto;gap:var(--space-4);text-align:center}.header-left{justify-self:start}.header-title{font-size:var(--font-size-2xl)}.header-buttons{justify-self:end}.back-btn{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs)}.header-buttons{justify-content:center}#mode-toggle{gap:8px}.mode-btn{padding:10px 16px;font-size:13px}#category-grid{grid-template-columns:1fr;gap:15px}.directors-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}#films-list,#director-films-list{grid-template-columns:1fr;gap:15px}#filter-header,#director-header{flex-direction:column;align-items:flex-start;gap:10px}}@media (min-width: 1024px){.modal-content{max-width:900px}}.returning-user-options{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--color-bg-elevated);display:flex;align-items:center;justify-content:center;z-index:1000;border-radius:var(--radius-xl)}.returning-user-content{text-align:center;max-width:500px;padding:var(--space-8)}.returning-user-content h3{font-family:var(--font-display);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-6);letter-spacing:var(--letter-spacing-tight)}.returning-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-6)}.option-btn{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);font-family:var(--font-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-base);letter-spacing:var(--letter-spacing-normal);text-align:center}.option-btn:hover{background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.continue-btn{background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary)}.continue-btn:hover{background:var(--color-accent-hover)}.restart-btn{grid-column:1 / -1;background:transparent;color:var(--color-text-tertiary);border:1px solid var(--color-border-secondary);font-size:var(--font-size-xs);padding:var(--space-2) var(--space-4)}.restart-btn:hover{color:var(--color-text-secondary);border-color:var(--color-border-primary);background:var(--color-bg-secondary);transform:none}.skip-confirmation-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease}.skip-confirmation-modal{background:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:var(--radius-2xl);padding:var(--space-10);max-width:500px;margin:var(--space-6);box-shadow:var(--shadow-xl);text-align:center;animation:modalSlideIn .3s cubic-bezier(.34,1.56,.64,1)}.skip-confirmation-modal h3{font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-4)}.skip-confirmation-modal p{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--space-8);max-width:36ch;margin-left:auto;margin-right:auto}.skip-confirmation-buttons{display:flex;gap:var(--space-4);justify-content:center}.confirm-skip-btn,.cancel-skip-btn{padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);font-family:var(--font-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base);border:1px solid var(--color-border-primary);min-width:120px}.confirm-skip-btn{background:var(--color-bg-secondary);color:var(--color-text-secondary)}.confirm-skip-btn:hover{background:#ef4444;color:#fff;border-color:#ef4444;transform:translateY(-1px)}.cancel-skip-btn{background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary)}.cancel-skip-btn:hover{background:var(--color-accent-hover);transform:translateY(-1px)}.quick-tour-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .4s ease}.quick-tour-modal{background:var(--color-bg-elevated);border:1px solid var(--color-border-primary);border-radius:var(--radius-2xl);padding:var(--space-12);max-width:600px;margin:var(--space-6);box-shadow:var(--shadow-2xl);text-align:center;animation:modalSlideIn .4s cubic-bezier(.34,1.56,.64,1);min-height:400px;display:flex;flex-direction:column}.quick-tour-content{flex:1;position:relative;margin-bottom:var(--space-8)}.tour-step{position:absolute;top:0;left:0;right:0;opacity:0;transform:translateY(20px);transition:all .5s ease;display:flex;flex-direction:column;justify-content:center;min-height:280px}.tour-step.active{opacity:1;transform:translateY(0)}.tour-step h3{font-family:var(--font-display);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-6);letter-spacing:var(--letter-spacing-tight)}.tour-step p{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);max-width:42ch;margin:0 auto}.tour-progress{display:flex;align-items:center;justify-content:space-between;margin-top:auto}.tour-dots{display:flex;gap:var(--space-2)}.tour-dots .dot{width:10px;height:10px;border-radius:50%;background:var(--color-border-secondary);transition:all var(--transition-base)}.tour-dots .dot.active{background:var(--color-accent-primary);transform:scale(1.2)}.tour-skip-btn{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-4);font-family:var(--font-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-tertiary);cursor:pointer;transition:all var(--transition-base)}.tour-skip-btn:hover{color:var(--color-text-secondary);border-color:var(--color-border-primary);background:var(--color-bg-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.returning-options{grid-template-columns:1fr;gap:var(--space-3)}.skip-confirmation-modal,.quick-tour-modal{margin:var(--space-4);padding:var(--space-6)}.skip-confirmation-buttons{flex-direction:column}.tour-step{min-height:200px}.tour-progress{flex-direction:column;gap:var(--space-4)}}.hidden{display:none!important}.mobile-only{display:none}.desktop-only{display:block}@media (max-width: 768px){.mobile-only{display:block}.desktop-only{display:none}}:root{--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Playfair Display", Georgia, "Times New Roman", serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--line-height-tight: 1.2;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2;--letter-spacing-tighter: -.05em;--letter-spacing-tight: -.02em;--letter-spacing-normal: 0;--letter-spacing-wide: .025em;--letter-spacing-wider: .05em;--letter-spacing-widest: .1em;--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-200: #e5e5e5;--gray-300: #d4d4d4;--gray-400: #a3a3a3;--gray-500: #737373;--gray-600: #525252;--gray-700: #404040;--gray-800: #262626;--gray-900: #171717;--gray-950: #0a0a0a;--blue-50: #eff6ff;--blue-100: #dbeafe;--blue-200: #bfdbfe;--blue-300: #93c5fd;--blue-400: #60a5fa;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-700: #1d4ed8;--blue-800: #1e40af;--blue-900: #1e3a8a;--space-0: 0;--space-px: 1px;--space-0-5: .125rem;--space-1: .25rem;--space-1-5: .375rem;--space-2: .5rem;--space-2-5: .625rem;--space-3: .75rem;--space-3-5: .875rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-7: 1.75rem;--space-8: 2rem;--space-9: 2.25rem;--space-10: 2.5rem;--space-11: 2.75rem;--space-12: 3rem;--space-14: 3.5rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-28: 7rem;--space-32: 8rem;--radius-none: 0;--radius-sm: .125rem;--radius-base: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-base: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--ease-linear: linear;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}:root{--color-bg-primary: var(--gray-50);--color-bg-secondary: var(--gray-100);--color-bg-elevated: #ffffff;--color-bg-overlay: rgba(255, 255, 255, .95);--color-text-primary: var(--gray-900);--color-text-secondary: var(--gray-600);--color-text-tertiary: var(--gray-500);--color-text-inverse: #ffffff;--color-border-primary: var(--gray-200);--color-border-secondary: var(--gray-300);--color-border-focus: var(--blue-500);--color-accent-primary: var(--blue-600);--color-accent-hover: var(--blue-700);--color-accent-light: var(--blue-50);--shadow-color: rgba(0, 0, 0, .1)}[data-theme=dark]{--color-bg-primary: var(--gray-950);--color-bg-secondary: var(--gray-900);--color-bg-elevated: var(--gray-800);--color-bg-overlay: rgba(0, 0, 0, .95);--color-text-primary: var(--gray-50);--color-text-secondary: var(--gray-400);--color-text-tertiary: var(--gray-500);--color-text-inverse: var(--gray-900);--color-border-primary: var(--gray-700);--color-border-secondary: var(--gray-600);--color-border-focus: var(--blue-400);--color-accent-primary: var(--blue-400);--color-accent-hover: var(--blue-300);--color-accent-light: var(--blue-950);--shadow-color: rgba(0, 0, 0, .4);--shadow-xs: 0 1px 2px 0 var(--shadow-color);--shadow-sm: 0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color);--shadow-base: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);--shadow-md: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);--shadow-lg: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);--shadow-xl: 0 25px 50px -12px var(--shadow-color)}#stage-5{padding:60px 40px 120px!important;max-width:1000px!important;margin:0 auto!important;min-height:100vh!important}.stage-header{text-align:center;margin-bottom:50px}.stage-header .stage-heading{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.75rem);font-weight:600;color:var(--color-text-primary);margin-bottom:12px;letter-spacing:-.02em}.stage-header .stage-intro{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:8px}.stage-header .stage-number{font-size:var(--font-size-sm);color:var(--color-text-tertiary);font-weight:500}.mode-list{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:repeat(5,auto)!important;gap:24px!important;max-width:900px!important;margin:0 auto!important;padding:0!important;height:auto!important;overflow:visible!important}.mode-card{background:#fff!important;border:1px solid rgba(0,0,0,.08)!important;border-radius:12px!important;padding:24px 20px!important;cursor:pointer!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important;position:relative!important;min-height:120px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;text-align:center!important;opacity:1!important;visibility:visible!important;box-shadow:0 2px 8px #0000000a,0 1px 3px #00000014!important}[data-theme=dark] .mode-card{background:#ffffff0a!important;border-color:#ffffff1a!important;box-shadow:0 2px 8px #0003,0 1px 3px #0000004d!important}.mode-card:hover{transform:translateY(-3px) scale(1.02)!important;box-shadow:0 8px 25px #0000001f,0 4px 10px #00000014!important;border-color:var(--color-accent-primary)!important;background:#228b2205!important}[data-theme=dark] .mode-card:hover{background:#228b220f!important;box-shadow:0 8px 25px #0000004d,0 4px 10px #0003!important}.mode-card.focused{outline:none!important;border-color:var(--color-accent-primary)!important;box-shadow:0 0 0 3px #228b2233,0 8px 25px #0000001a!important;transform:translateY(-2px) scale(1.02)!important;background:#228b2208!important;z-index:10!important;position:relative!important;box-shadow:0 0 0 3px #228b2233,0 0 0 5px #228b221a,0 8px 25px #0000001a!important}[data-theme=dark] .mode-card.focused{background:#228b2214!important;box-shadow:0 0 0 3px #228b224d,0 0 0 5px #228b2233,0 8px 25px #0000004d!important}.mode-card .mode-stats{display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;margin-bottom:4px!important;opacity:.7!important;visibility:visible!important;transition:opacity .3s ease!important}.mode-card:hover .mode-stats{opacity:1!important}[data-theme=dark] .mode-card .stat.highlight{background:#228b2233!important}.mode-card.challenging-content-card{border-color:#ffc1074d!important;position:relative!important}.mode-card.challenging-content-card:hover{background:#ffc10708!important;border-color:#ffc10799!important;box-shadow:0 8px 25px #ffc10726!important}.mode-card.challenging-content-card .mode-title{color:#b8860b!important}[data-theme=dark] .mode-card.challenging-content-card .mode-title{color:gold!important}.challenging-content-card .content-warning{margin-top:4px}.challenging-content-card .content-warning small{font-size:.7rem;color:#b8860b;background:#ffc1071a;padding:2px 8px;border-radius:12px;font-weight:500}[data-theme=dark] .challenging-content-card .content-warning small{color:gold;background:#ffc10726}.keyboard-shortcuts-guide{text-align:center;margin-top:30px;padding:16px 20px;background:#228b220d;border-radius:8px;border:1px solid rgba(34,139,34,.1);max-width:600px;margin-left:auto;margin-right:auto}[data-theme=dark] .keyboard-shortcuts-guide{background:#228b221a;border-color:#228b2233}.keyboard-shortcuts-guide .shortcuts-list{display:flex;justify-content:center;gap:20px;font-size:.8rem;color:var(--color-text-secondary)}.shortcut-key{background:#0000001a;padding:2px 6px;border-radius:4px;font-family:monospace;font-weight:600}[data-theme=dark] .shortcut-key{background:#ffffff1a}.contextual-hint{position:absolute;top:-40px;left:50%;transform:translate(-50%);background:var(--color-text-primary);color:#fff;padding:8px 12px;border-radius:6px;font-size:.8rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:1000}.contextual-hint:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--color-text-primary)}.mode-card.focused .contextual-hint{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){#stage-5{padding:40px 20px 100px!important}.mode-list{grid-template-columns:1fr!important;gap:16px!important;max-width:400px!important}.mode-card{padding:20px 16px!important;min-height:100px!important}.mode-card .mode-title{font-size:1.1rem!important}.keyboard-shortcuts-guide{display:none}}@media (min-width: 1200px){.mode-list{max-width:1000px!important;gap:30px!important}.mode-card{padding:28px 24px!important;min-height:140px!important}.mode-card .mode-title{font-size:1.35rem!important}}.mode-card{animation:fadeInUp .3s ease-out!important;animation-fill-mode:both!important}.mode-card:nth-child(1){animation-delay:.05s!important}.mode-card:nth-child(2){animation-delay:.1s!important}.mode-card:nth-child(3){animation-delay:.15s!important}.mode-card:nth-child(4){animation-delay:.2s!important}.mode-card:nth-child(5){animation-delay:.25s!important}.mode-card:nth-child(6){animation-delay:.3s!important}.mode-card:nth-child(7){animation-delay:.35s!important}.mode-card:nth-child(8){animation-delay:.4s!important}.mode-card:nth-child(9){animation-delay:.45s!important}.mode-card:nth-child(10){animation-delay:.5s!important}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.mode-card{animation:none!important}}body.stage-5-active{overflow:auto!important;overflow-y:auto!important;height:auto!important}body.stage-5-active .modal-content{position:relative!important;width:100%!important;max-width:none!important;height:auto!important;min-height:100vh!important;max-height:none!important;padding:0!important;margin:0!important;border:none!important;border-radius:0!important;background:var(--color-bg-primary)!important;overflow:visible!important}body.stage-5-active #stage-5{display:block!important;position:relative!important;width:100%!important;height:auto!important;min-height:180vh!important;padding:60px 40px 300px!important;overflow:visible!important}body.stage-5-active .mode-card{display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;min-height:120px!important}body.stage-5-active .intro-stage:not(#stage-5){display:none!important}body.stage-5-active #stage-5.active{display:block!important;visibility:visible!important;opacity:1!important}.contextual-hint{display:none!important}.mode-card.keyboard-focused .contextual-hint{display:block!important;opacity:1!important}.mode-list{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:repeat(5,auto)!important;gap:20px!important;max-width:900px!important;margin:0 auto!important;padding:0 20px!important;min-height:auto!important;height:auto!important;overflow:visible!important}.mode-card{background:#fff!important;border:1px solid rgba(0,0,0,.08)!important;border-radius:12px!important;padding:24px 20px!important;cursor:pointer!important;transition:all .2s ease!important;position:relative!important;min-height:140px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;text-align:center!important;opacity:1!important;visibility:visible!important;box-shadow:0 2px 8px #0000000a!important}.mode-card:hover{transform:translateY(-2px)!important;box-shadow:0 8px 25px #0000001a!important;border-color:var(--color-accent-primary)!important;background:#228b2205!important}.mode-card.focused{outline:none!important;border-color:var(--color-accent-primary)!important;box-shadow:0 0 0 3px #228b2233,0 8px 25px #0000001a!important;transform:translateY(-2px) scale(1.01)!important;background:#228b2208!important;z-index:10!important}.mode-card:hover.focused{box-shadow:0 8px 25px #0000001a!important;transform:translateY(-2px)!important}#stage-5{padding:60px 40px 150px!important;max-width:1000px!important;margin:0 auto!important;min-height:100vh!important;height:auto!important;overflow:visible!important}body.stage-5-active{overflow:auto!important;overflow-y:auto!important;height:auto!important;position:relative!important}body.stage-5-active #introduction-modal{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:auto!important;min-height:100vh!important;overflow:visible!important;z-index:1000!important}body.stage-5-active .modal-content{position:relative!important;width:100%!important;max-width:none!important;height:auto!important;min-height:100vh!important;max-height:none!important;padding:0!important;margin:0!important;overflow:visible!important}body.stage-5-active .mode-card{display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;min-height:140px!important}.keyboard-shortcuts-guide{text-align:center;padding:16px 20px;background:#228b220d;border-radius:8px;border:1px solid rgba(34,139,34,.1);max-width:600px;margin:40px auto}.keyboard-shortcuts-guide .guide-title{font-size:.875rem;font-weight:600;color:var(--color-accent-primary);margin-bottom:8px}.keyboard-shortcuts-guide .shortcuts-list{display:flex;justify-content:center;gap:20px;font-size:.8rem;color:var(--color-text-secondary);flex-wrap:wrap}.shortcut-item{display:flex;align-items:center;gap:4px}.shortcut-key{background:#0000001a;padding:3px 8px;border-radius:4px;font-family:monospace;font-weight:600;font-size:.75rem}@media (max-width: 768px){.mode-list{grid-template-columns:1fr 1fr!important;gap:16px!important;max-width:100%!important;padding:0 15px!important}.mode-card{padding:20px 16px!important;min-height:120px!important}#stage-5{padding:40px 20px 100px!important}.keyboard-shortcuts-guide{display:none!important}}@media (max-width: 480px){.mode-list{grid-template-columns:1fr!important;gap:12px!important;max-width:350px!important}.mode-card{padding:18px 16px!important;min-height:100px!important}}[data-theme=dark] .mode-card{background:#ffffff0a!important;border-color:#ffffff1a!important;box-shadow:0 2px 8px #0003!important}[data-theme=dark] .mode-card:hover{background:#228b220f!important;box-shadow:0 8px 25px #0000004d!important}[data-theme=dark] .mode-card.focused{background:#228b2214!important;box-shadow:0 0 0 3px #228b224d,0 8px 25px #0000004d!important}[data-theme=dark] .keyboard-shortcuts-guide{background:#228b221a!important;border-color:#228b2233!important}[data-theme=dark] .shortcut-key{background:#ffffff1a!important}.mode-card .mode-title{font-family:var(--font-display)!important;font-size:1.25rem!important;font-weight:600!important;color:var(--color-text-primary)!important;margin:0 0 8px!important;line-height:1.3!important;text-align:center!important;display:block!important;opacity:1!important;visibility:visible!important}.mode-card .mode-stats{display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;margin-bottom:4px!important;opacity:1!important;visibility:visible!important}.mode-card .stat.highlight{font-size:.875rem!important;font-weight:600!important;color:var(--color-accent-primary)!important;background:#228b221a!important;padding:4px 10px!important;border-radius:20px!important;display:inline-block!important;opacity:1!important;visibility:visible!important}.mode-card .stat-label{font-size:.75rem!important;color:var(--color-text-tertiary)!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:.5px!important;opacity:.7!important;display:inline-block!important;visibility:visible!important}.mode-card .mode-description,.mode-card .mode-action-hint{display:none!important}#film-container{max-width:720px;margin:0 auto;padding:var(--space-8) var(--space-6);min-height:calc(100vh - 100px);display:flex;align-items:center;justify-content:center}.film-card{background:var(--color-bg-elevated);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-8);position:relative;width:100%;max-width:600px;box-shadow:0 2px 8px #0000000f}[data-theme=dark] .film-card{box-shadow:0 2px 8px #0003}.film-content{text-align:center}.film-title{font-family:var(--font-display);font-size:clamp(1.75rem,4.5vw,2.5rem);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-4);line-height:1.2;letter-spacing:-.02em}.film-meta{display:flex;justify-content:center;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);font-size:var(--font-size-base);color:var(--color-text-secondary)}.film-director{font-weight:var(--font-weight-medium)}.film-year{opacity:.7}.film-meta span:not(:last-child):after{content:"•";margin-left:var(--space-3);opacity:.4}.edwards-notes{background:linear-gradient(135deg,#f5f5f0,#ebe8e0);border-left:4px solid var(--color-accent-primary);border-radius:var(--radius-base);padding:var(--space-6);margin-top:var(--space-8);position:relative}[data-theme=dark] .edwards-notes{background:linear-gradient(135deg,#1a1a1a,#222)}.notes-text{color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--font-size-base);line-height:var(--line-height-relaxed);margin:0;font-style:italic;opacity:.9}.bookmark-btn{position:absolute;top:var(--space-4);right:var(--space-4);width:40px;height:40px;background:transparent;border:1px solid rgba(0,0,0,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;font-size:18px;color:var(--color-text-tertiary);z-index:10}[data-theme=dark] .bookmark-btn{border-color:#ffffff1a}.bookmark-btn:hover{transform:scale(1.1);border-color:var(--color-accent-primary);color:var(--color-accent-primary)}.bookmark-btn.bookmarked{background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary)}.bookmark-btn:focus{outline:2px solid var(--color-accent-primary);outline-offset:2px}.app-header{background:#fffffffa;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.06);padding:var(--space-4) var(--space-6);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;height:60px}[data-theme=dark] .app-header{background:#000000fa;border-bottom-color:#ffffff0f}.back-btn{background:transparent;border:none;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;font-weight:var(--font-weight-medium);display:flex;align-items:center;gap:var(--space-1);border-radius:var(--radius-base)}.back-btn:hover{background:#0000000a;color:var(--color-accent-primary)}[data-theme=dark] .back-btn:hover{background:#ffffff0a}.header-mode-dropdown{background:transparent;border:1px solid rgba(0,0,0,.1);border-radius:var(--radius-base);padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:all .2s ease;font-weight:var(--font-weight-medium);min-width:150px}[data-theme=dark] .header-mode-dropdown{border-color:#ffffff1a}.header-mode-dropdown:hover,.header-mode-dropdown:focus{border-color:var(--color-accent-primary);outline:none}#film-counter{text-align:center;font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-weight:var(--font-weight-medium);padding:var(--space-3);opacity:.6}@media (max-width: 768px){#film-container{padding:var(--space-4);min-height:calc(100vh - 60px)}.film-card{padding:var(--space-8) var(--space-6);border-radius:var(--radius-base)}.film-title{font-size:clamp(1.5rem,5vw,2rem)}.edwards-notes{padding:var(--space-5);margin-top:var(--space-6)}.bookmark-btn{width:36px;height:36px;font-size:16px}.app-header{padding:var(--space-3) var(--space-4);height:56px}.back-btn{padding:var(--space-2);font-size:var(--font-size-xs)}.header-mode-dropdown{padding:var(--space-2);font-size:var(--font-size-xs);min-width:120px}}@media (hover: none) and (pointer: coarse){.film-card{-webkit-tap-highlight-color:transparent}.bookmark-btn:active{transform:scale(.95)}.back-btn:active{background:#00000014}}.first-use-hint{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);font-size:var(--font-size-sm);z-index:1000;animation:fadeInOut 4s ease-out forwards;pointer-events:none}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(10px)}20%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(10px)}}.film-nav-cues,.film-context-panel,.viewing-stats,.context-btn,.random-btn,.film-actions,.film-nav-hints,.nav-hint{display:none!important}.film-card{animation:subtle-fade-in .3s ease-out}@keyframes subtle-fade-in{0%{opacity:0}to{opacity:1}}.film-title,.film-meta,.notes-text{user-select:text;-webkit-user-select:text}*:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}@media print{.app-header,.bookmark-btn,#film-counter{display:none!important}.film-card{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid}}@media (max-width: 768px){.keyboard-shortcuts-guide{display:none!important}}@media (max-width: 768px){#stage-5{padding:30px 20px 80px!important}.mode-list{grid-template-columns:1fr 1fr!important;gap:12px!important;max-width:100%!important;padding:0 10px!important}.mode-card{padding:18px 16px!important;min-height:88px!important;border-radius:10px!important;-webkit-tap-highlight-color:rgba(34,139,34,.1);touch-action:manipulation}.mode-card:active{transform:scale(.97)!important;background:#228b2214!important;transition:all .1s ease!important}.mode-card .mode-title{font-size:1.05rem!important;line-height:1.2!important;margin-bottom:6px!important}.mode-card .stat.highlight{font-size:.8rem!important;padding:3px 8px!important}}@media (max-width: 480px){.mode-list{grid-template-columns:1fr!important;gap:10px!important;max-width:320px!important;margin:0 auto!important}.mode-card{padding:20px 16px!important;min-height:72px!important}.mode-card .mode-title{font-size:.95rem!important}.challenging-content-card .content-warning small{padding:4px 10px!important;font-size:.75rem!important}}@media (max-width: 768px){.selection-guidance .guidance-text:after{content:" • Tap any mode to explore";font-weight:400}.mobile-touch-hint{display:block!important;text-align:center;margin-top:20px;padding:12px 16px;background:#228b220d;border-radius:8px;color:var(--color-text-secondary);font-size:.85rem}.mobile-touch-hint:before{content:"👆 ";margin-right:4px}}@media (max-width: 768px){.film-card{padding:24px 20px!important;border-radius:12px!important;margin:20px 0!important}.bookmark-btn{width:48px!important;height:48px!important;border-radius:24px!important;font-size:1.4rem!important;top:16px!important;right:16px!important;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.bookmark-btn:active{transform:scale(.9)!important;background:var(--color-accent-primary)!important;color:#fff!important}.film-title{font-size:1.4rem!important;line-height:1.3!important;margin-bottom:12px!important}.film-meta{gap:12px!important;margin-bottom:16px!important}.film-director,.film-year{font-size:.95rem!important}.edwards-notes{padding:16px!important;border-radius:8px!important;margin-top:16px!important}.notes-text{font-size:.9rem!important;line-height:1.5!important}.viewing-stats{margin-top:20px!important;padding:12px 16px!important;background:#00000005!important;border-radius:8px!important;text-align:center!important;gap:12px!important}.films-viewed,.streak{font-size:.8rem!important}}@media (max-width: 768px){.film-card:after{content:"Swipe up/down to browse films";position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:.7rem;color:var(--color-text-tertiary);opacity:.6;padding:4px 8px;background:#ffffffe6;border-radius:4px;pointer-events:none;animation:fadeInOut 3s ease-in-out}.film-card:not(:first-of-type):after{display:none}@keyframes fadeInOut{0%,70%,to{opacity:0}10%,60%{opacity:.6}}}@media (max-width: 768px){body.stage-5-active{overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;scroll-behavior:smooth!important}body.stage-5-active:after{content:"";position:fixed;right:4px;top:50%;transform:translateY(-50%);width:3px;height:40px;background:linear-gradient(to bottom,transparent,var(--color-accent-primary),transparent);border-radius:2px;opacity:.3;z-index:1000;pointer-events:none}}@media (max-width: 768px){.stage-header .stage-heading{font-size:clamp(1.6rem,6vw,2.2rem)!important;line-height:1.2!important;margin-bottom:16px!important}.stage-header .stage-intro{font-size:1rem!important;line-height:1.4!important;margin-bottom:12px!important}.stage-header .stage-number{font-size:.8rem!important;margin-bottom:24px!important}}@media (max-width: 768px){button,.mode-card,.bookmark-btn,[role=button]{min-height:44px!important;min-width:44px!important}.mode-card:focus-visible{outline:3px solid var(--color-accent-primary)!important;outline-offset:2px!important}.mobile-only-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}}@media (max-width: 768px){[data-theme=dark] .mode-card{border-color:#ffffff26!important}[data-theme=dark] .mode-card:active{background:#228b221f!important}[data-theme=dark] .mobile-touch-hint{background:#228b2214!important}[data-theme=dark] .viewing-stats{background:#ffffff08!important}}@media (max-width: 768px){.mode-card{will-change:transform}.mode-card:active{animation:none!important}@media (prefers-reduced-motion: reduce){.mode-card,.film-card,.bookmark-btn{animation:none!important;transition:none!important}}}@media (max-width: 768px){.desktop-only{display:none!important}.mobile-only{display:block!important}}.skip-links{position:absolute;top:-100px;left:0;z-index:10000}.skip-link{position:absolute;top:0;left:0;background:var(--color-bg-primary);color:var(--color-text-primary);padding:8px 16px;text-decoration:none;font-weight:600;border:2px solid var(--color-accent);border-radius:4px;transform:translateY(-100%);transition:transform .2s ease-in-out}.skip-link:focus{transform:translateY(0);outline:3px solid var(--color-focus);outline-offset:2px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.keyboard-navigation-active *:focus{outline:3px solid var(--color-focus)!important;outline-offset:2px!important;border-radius:4px}.keyboard-navigation-active .mode-card:focus,.keyboard-navigation-active .mode-card.keyboard-focused{outline:3px solid var(--color-focus)!important;outline-offset:4px!important;box-shadow:0 0 0 6px rgba(var(--color-focus-rgb),.2)!important;transform:translateY(-2px)}.keyboard-navigation-active button:focus{outline:3px solid var(--color-focus)!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(var(--color-focus-rgb),.15)!important}.accessibility-controls{position:fixed;top:20px;right:20px;z-index:9999;display:flex;gap:8px;background:var(--color-bg-secondary);padding:8px;border-radius:8px;border:1px solid var(--color-border);box-shadow:0 4px 12px #0000001a}.accessibility-toggle{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:6px;padding:8px 12px;cursor:pointer;font-size:16px;line-height:1;transition:all .2s ease}.accessibility-toggle:hover{background:var(--color-bg-hover);transform:translateY(-1px)}.accessibility-toggle:focus{outline:2px solid var(--color-focus);outline-offset:2px}[data-high-contrast=true]{--color-bg-primary: #000000;--color-bg-secondary: #1a1a1a;--color-bg-tertiary: #2d2d2d;--color-bg-hover: #333333;--color-text-primary: #ffffff;--color-text-secondary: #e0e0e0;--color-text-muted: #cccccc;--color-accent: #ffff00;--color-accent-hover: #ffff33;--color-border: #666666;--color-focus: #00ffff;--color-focus-rgb: 0, 255, 255;--color-error: #ff6666;--color-success: #66ff66;--color-warning: #ffcc66}[data-high-contrast=true] .mode-card{border:2px solid var(--color-border)!important;background:var(--color-bg-secondary)!important;box-shadow:none!important}[data-high-contrast=true] .mode-card:hover{border-color:var(--color-accent)!important;background:var(--color-bg-hover)!important}[data-high-contrast=true] .film-card{border:2px solid var(--color-border)!important;background:var(--color-bg-secondary)!important;box-shadow:none!important}[data-high-contrast=true] button{border:2px solid var(--color-border)!important;background:var(--color-bg-primary)!important;color:var(--color-text-primary)!important}[data-high-contrast=true] button:hover{border-color:var(--color-accent)!important;background:var(--color-bg-hover)!important}[data-high-contrast=true] .intro-stage{background:var(--color-bg-primary)!important;border:1px solid var(--color-border)!important}[data-reduced-motion=true] *,[data-reduced-motion=true] *:before,[data-reduced-motion=true] *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}[data-reduced-motion=true] .mode-card,[data-reduced-motion=true] .film-card{transform:none!important}[data-reduced-motion=true] .loon-logo{animation:none!important}.focus-trap-boundary{outline:2px dashed var(--color-focus);outline-offset:4px}input:invalid,select:invalid,textarea:invalid{border-color:var(--color-error);box-shadow:0 0 0 2px #f003}input:invalid+.error-message,select:invalid+.error-message,textarea:invalid+.error-message{display:block;color:var(--color-error);font-size:.875rem;margin-top:4px}button:disabled,button[aria-disabled=true]{opacity:.6;cursor:not-allowed;pointer-events:none}button[aria-pressed=true]{background:var(--color-accent);color:var(--color-bg-primary)}[aria-busy=true]{position:relative;pointer-events:none}[aria-busy=true]:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mode-card[aria-selected=true]{background:var(--color-accent);color:var(--color-bg-primary);border-color:var(--color-accent)}.mode-card[tabindex="0"]{cursor:pointer}.mode-card:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.accessibility-announcement{position:fixed;top:20px;left:50%;transform:translate(-50%);background:var(--color-bg-primary);color:var(--color-text-primary);padding:12px 24px;border:2px solid var(--color-accent);border-radius:8px;z-index:10000;max-width:80%;text-align:center;box-shadow:0 4px 12px #00000026;opacity:0;animation:slideInAnnouncement .3s ease-out forwards}@keyframes slideInAnnouncement{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (pointer: coarse){button,.mode-card,.bookmark-btn,[role=button]{min-height:44px;min-width:44px}}[data-high-contrast=true] *:focus{outline:4px solid var(--color-focus)!important;outline-offset:2px!important;background:var(--color-bg-hover)!important}@media print{.skip-links,.accessibility-controls,.accessibility-announcement{display:none!important}.mode-card,.film-card{border:1px solid #000!important;break-inside:avoid}}@media screen and (max-width: 0){.decorative-element{display:none}}.error-state{border-color:var(--color-error)!important;background:#ff00001a!important}.success-state{border-color:var(--color-success)!important;background:#00ff001a!important}.current-page,[aria-current=page]{background:var(--color-accent);color:var(--color-bg-primary);font-weight:600}.current-page:before,[aria-current=page]:before{content:"Current: ";font-weight:400;position:absolute;left:-10000px}@media (max-width: 768px){.accessibility-controls{top:10px;right:10px;scale:.9}.skip-link{font-size:.875rem;padding:6px 12px}.keyboard-navigation-active .mode-card:focus{outline-offset:2px!important;box-shadow:0 0 0 4px rgba(var(--color-focus-rgb),.2)!important}}@keyframes touchFeedbackPulse{0%{transform:scale(0);opacity:1}50%{transform:scale(1);opacity:.8}to{transform:scale(1.5);opacity:0}}@keyframes swipeIndicatorShow{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}.gesture-feedback-overlay{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9999;display:none}.swipe-indicator{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;font-weight:600;color:var(--color-accent);text-shadow:0 0 4px rgba(0,0,0,.3);transition:all .1s ease;-webkit-user-select:none;user-select:none}.swipe-indicator.swipe-right{right:20px;animation:swipeRightPulse 1s ease-in-out infinite}.swipe-indicator.swipe-left{left:20px;animation:swipeLeftPulse 1s ease-in-out infinite}@keyframes swipeRightPulse{0%,to{transform:translateY(-50%) translate(0);opacity:.7}50%{transform:translateY(-50%) translate(-5px);opacity:1}}@keyframes swipeLeftPulse{0%,to{transform:translateY(-50%) translate(0);opacity:.7}50%{transform:translateY(-50%) translate(5px);opacity:1}}.touch-feedback{position:fixed;width:40px;height:40px;border-radius:50%;background:rgba(var(--color-accent-rgb, 34, 139, 34),.2);border:2px solid var(--color-accent, #228B22);pointer-events:none;z-index:10000;animation:touchFeedbackPulse .3s ease-out}.swipe-direction-indicator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-bg-primary);color:var(--color-text-primary);padding:12px 24px;border-radius:8px;border:2px solid var(--color-accent);font-weight:600;font-size:16px;z-index:10001;pointer-events:none;opacity:0;animation:swipeIndicatorShow .5s ease-out;box-shadow:0 4px 12px #00000026}#film-container{touch-action:manipulation;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.gesture-active,.gesture-active *{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}.mobile-gesture-hint{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--color-bg-secondary);color:var(--color-text-secondary);padding:8px 16px;border-radius:20px;font-size:.875rem;z-index:1000;opacity:0;animation:gestureHintFadeIn .5s ease-out forwards;pointer-events:none}@keyframes gestureHintFadeIn{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:.8;transform:translate(-50%) translateY(0)}}.mobile-gesture-hint.fade-out{animation:gestureHintFadeOut .5s ease-out forwards}@keyframes gestureHintFadeOut{0%{opacity:.8;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(20px)}}[data-high-contrast=true] .touch-feedback{background:#ffff004d;border-color:#ff0}[data-high-contrast=true] .swipe-direction-indicator{background:#000;color:#fff;border-color:#ff0}[data-high-contrast=true] .swipe-indicator{color:#ff0;text-shadow:0 0 4px rgba(0,0,0,.8)}[data-reduced-motion=true] .touch-feedback,[data-reduced-motion=true] .swipe-direction-indicator,[data-reduced-motion=true] .swipe-indicator{animation:none!important;transition:none!important}[data-reduced-motion=true] .mobile-gesture-hint{animation:none!important;opacity:.8}.film-card{position:relative;overflow:hidden}.gesture-progress{position:absolute;bottom:0;left:0;height:3px;background:var(--color-accent);transition:width .1s ease;z-index:10;opacity:0}.gesture-progress.active{opacity:1}@media (max-width: 768px){#film-container{min-height:60vh;padding:20px}.film-card{padding:24px 20px;margin:0;border-radius:12px}.bookmark-btn{min-width:44px;min-height:44px;padding:12px;border-radius:50%}.film-content{padding:16px 0}.film-title{font-size:1.5rem;line-height:1.3;margin-bottom:12px}.film-meta{font-size:1rem;margin-bottom:16px}.viewing-stats{position:fixed;bottom:20px;right:20px;background:var(--color-bg-secondary);padding:8px 12px;border-radius:20px;font-size:.75rem;opacity:.8;z-index:100}}@media (max-width: 768px) and (orientation: landscape){.mobile-gesture-hint{bottom:10px;font-size:.75rem;padding:6px 12px}.viewing-stats{bottom:10px;right:10px;font-size:.7rem;padding:6px 10px}}@supports (-webkit-touch-callout: none){#film-container{-webkit-touch-callout:none;-webkit-user-select:none}.film-card{-webkit-tap-highlight-color:transparent}}@media (hover: none) and (pointer: coarse){.touch-feedback{background:rgba(var(--color-accent-rgb, 34, 139, 34),.3);border-width:3px}.swipe-direction-indicator{padding:14px 28px;font-size:18px}}