.fullscreen-button{position:fixed;top:var(--space-4);left:var(--space-4);z-index:1000;background:#2838424d;border:none;border-radius:var(--radius-lg);padding:var(--space-2);cursor:pointer;transition:all var(--transition-normal);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#d4af3799}.fullscreen-button:hover{background:#28384299;color:#d4af37e6;transform:var(--hover-lift)}.fullscreen-button:active{transform:var(--active-press)}.fullscreen-button:focus{outline:none;box-shadow:var(--focus-glow)}.fullscreen-button svg{width:18px;height:18px;transition:transform var(--transition-normal)}.fullscreen-button:hover svg{transform:scale(1.1)}:root{--clr-primary-dark: #283842;--clr-primary-light: #E4E2DD;--clr-primary-light-dark: #B8B6B1;--clr-accent-gold: #D4AF37;--clr-accent-silver: #C0C0C0;--clr-accent-bronze: #CD7F32;--clr-neutral-100: #FFFFFF;--clr-neutral-200: #F8F9FA;--clr-neutral-300: #E9ECEF;--clr-neutral-400: #DEE2E6;--clr-neutral-500: #ADB5BD;--clr-neutral-600: #6C757D;--clr-neutral-700: #495057;--clr-neutral-800: #343A40;--clr-neutral-900: #212529;--clr-success: #28A745;--clr-warning: #FFC107;--clr-error: #DC3545;--clr-info: #17A2B8;--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.4rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-size-6xl: 3.75rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--font-family-primary: "Sorts Mill Goudy", serif;--font-family-secondary: "Special Elite", cursive;--font-family-mono: "Courier New", monospace;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--letter-spacing-tight: -.025em;--letter-spacing-normal: 0;--letter-spacing-wide: .025em;--letter-spacing-wider: .05em;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out;--transition-slow: .35s ease-in-out;--transition-bounce: .3s cubic-bezier(.68, -.55, .265, 1.55);--transition-elastic: .4s cubic-bezier(.175, .885, .32, 1.275);--animation-duration-short: .2s;--animation-duration-medium: .4s;--animation-duration-long: .6s;--hover-lift: translateY(-2px);--active-press: translateY(0) scale(.98);--focus-glow: 0 0 0 3px rgba(212, 175, 55, .3);--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-full: 9999px}[lang=ar],.arabic-text{direction:rtl;text-align:right;unicode-bidi:bidi-override}.arabic-text{font-family:Arial,Tahoma,sans-serif;line-height:var(--line-height-relaxed)}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}body{color:var(--clr-primary-dark);background-color:var(--clr-primary-light);font-family:var(--font-family-primary);cursor:default;font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);letter-spacing:var(--letter-spacing-normal);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}canvas{position:fixed;top:0;left:0;z-index:-1}a{text-decoration:none;color:var(--clr-primary-light);transition:color var(--transition-fast)}a:hover{color:var(--clr-accent-gold)}button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit;transition:all var(--transition-fast)}.container{--max-width: 1200px;--padding: var(--space-4);width:min(var(--max-width),100% - (var(--padding) * 2));height:100%;margin-inline:auto}.nav-wrapper{--padding: var(--space-8);margin-top:var(--space-8);display:flex}.nav-buttons{display:flex;gap:var(--space-8);width:100%;align-items:center}.nav-buttons>*:first-child{margin-right:auto}.nav-buttons>*:last-child{margin-left:auto}.dialogue-button{margin:0 auto}.audio-toggle-btn{margin-left:auto}@media screen and (width < 576px){.nav-wrapper{justify-content:center}.nav-buttons{flex-direction:column;gap:var(--space-4)}.nav-buttons>*:first-child,.nav-buttons>*:last-child{margin:0}.dialogue-button{margin:0;order:-1}.audio-toggle-btn,.btn:not(.dialogue-button):not(.outro-button):not(#read-letter-btn):not(.intro-close):not(.end-button){display:none!important}}.outro-button{display:none!important;text-transform:capitalize}#outro,#credits{display:none}.modal{top:0;left:0;position:fixed;z-index:1000;overflow:auto;width:100%;height:100%;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:backdrop-filter var(--transition-normal)}#intro.modal.clickable-backdrop{cursor:pointer}#intro.modal .modal-content{cursor:default;height:auto!important}#outro{background-color:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal i{font-style:italic}.modal-content{background-color:var(--clr-primary-light);background-image:linear-gradient(135deg,var(--clr-primary-light) 0%,var(--clr-neutral-200) 100%);padding-inline:var(--space-8);margin:var(--space-4) auto;border-radius:var(--radius-lg);height:auto;box-shadow:var(--shadow-2xl);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative}#intro .modal-content,#outro .modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-width:95vw;overflow:hidden;display:flex;flex-direction:column;min-height:90vh!important;justify-content:space-between}#credits .modal-content{width:90%;height:90%;max-width:none;margin:5% auto;display:flex;flex-direction:column;background-color:var(--clr-primary-dark);background-image:linear-gradient(135deg,var(--clr-primary-dark) 0%,var(--clr-neutral-800) 100%);color:var(--clr-primary-light)}#credits .modal-body{flex:1;overflow-y:auto;font-style:italic;font-size:var(--font-size-xl)}#credits .modal-body h3{font-style:normal;font-weight:700;color:var(--clr-primary-light)}#credits .modal-header,#credits .close{color:var(--clr-primary-light)}.close-container{display:flex;justify-content:flex-end;position:absolute;top:var(--space-4);right:var(--space-4);z-index:10}.close{color:var(--clr-primary-dark);font-size:var(--font-size-5xl);caret-color:transparent;transition:all var(--transition-fast);width:var(--space-12);height:var(--space-12);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);min-height:44px;min-width:44px}.close:hover,.close:focus-visible{color:var(--clr-accent-gold);cursor:pointer;background-color:#d4af371a;transform:scale(1.1)}.modal-header{font-size:var(--font-size-6xl);font-weight:200;letter-spacing:var(--letter-spacing-wider);text-shadow:0 1px 2px rgba(0,0,0,.05);margin-bottom:var(--space-4);margin-top:var(--space-4);font-family:var(--font-family-primary);color:var(--clr-primary-dark);text-align:center}.modal-narration{display:flex;justify-content:center;align-items:center;margin-bottom:var(--space-6);padding:var(--space-2) 0}.modal-body-visible{display:flex;justify-content:center;align-items:center;flex:1;width:100%;min-height:60vh}.read-letter-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:60vh}.modal-body-visible .modal-body,.modal-body-visible .modal-column{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.always-hovered-btn{padding:var(--space-4) var(--space-10);border-radius:var(--radius-lg);font-size:var(--font-size-xl);transition:all var(--transition-normal);cursor:pointer;background:#000!important;color:#2c2c2c;border:4px solid #d4af37;box-shadow:0 8px 32px #d4af3766,0 0 20px #d4af374d;letter-spacing:var(--letter-spacing-wide);font-weight:700;position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.1);transform:scale(1.05)}.always-hovered-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .8s;animation:shimmer 2s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.always-hovered-btn:hover{transform:scale(1.1)!important;box-shadow:0 12px 40px #d4af3799,0 0 30px #d4af3766;background:none!important;border-color:silver}.always-hovered-btn:active{transform:scale(.95);box-shadow:0 4px 16px #d4af374d;transition:all var(--transition-fast)}.play-narration-btn{padding:var(--space-3) var(--space-8);border-radius:var(--radius-md);font-size:var(--font-size-lg);transition:all var(--transition-normal);cursor:pointer;background:linear-gradient(135deg,var(--clr-primary-dark) 0%,var(--clr-neutral-800) 100%);color:var(--clr-primary-light);border:3px solid var(--clr-primary-dark);box-shadow:var(--shadow-xl),0 0 15px #e4e2dd4d;letter-spacing:var(--letter-spacing-wide);font-weight:600;position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}.play-narration-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#e4e2dd4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;pointer-events:none}.play-narration-btn:hover{box-shadow:var(--shadow-2xl),0 0 25px #e4e2dd80;background:linear-gradient(135deg,var(--clr-primary-dark) 0%,var(--clr-neutral-800) 100%);color:var(--clr-primary-light);border-color:var(--clr-primary-dark)}.play-narration-btn:active{box-shadow:var(--shadow-lg),0 0 15px #e4e2dd4d;transition:all var(--transition-fast)}.play-narration-btn:active:before{width:300px;height:300px;transition:width .3s,height .3s}.play-narration-btn.playing{background:linear-gradient(135deg,var(--clr-neutral-600) 0%,var(--clr-neutral-500) 100%);border-color:var(--clr-neutral-600);cursor:not-allowed}.play-narration-btn.playing .play-icon{animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.play-icon{font-size:var(--font-size-base);line-height:1}.play-text{font-size:var(--font-size-sm)}.modal-body{display:grid;grid-template-columns:1fr 1fr;gap:0;font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);overflow-y:auto;overflow-x:hidden;flex:1;min-height:60vh!important;padding-right:var(--space-2)}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:#0000001a;border-radius:var(--radius-full)}.modal-body::-webkit-scrollbar-thumb{background:var(--clr-accent-gold);border-radius:var(--radius-full);opacity:.7}.modal-body::-webkit-scrollbar-thumb:hover{background:var(--clr-accent-gold);opacity:1}#intro .modal-body{font-size:var(--font-size-2xl);align-items:center;justify-content:center;flex:1;word-wrap:break-word;overflow-wrap:break-word}#outro .modal-body{align-items:start;flex:1;font-size:var(--font-size-xl);position:relative;line-height:1.5}#outro .modal-body i{line-height:2!important}#outro .modal-column{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin:auto;position:relative;min-height:200px}.modal-footer{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;margin-top:0;padding:4px 0;border-top:none;flex-shrink:0;position:relative;min-height:100px;overflow:visible;width:100%}.modal-footer.show{border-top:1px solid var(--clr-primary-dark)}#intro .modal-footer.show{display:flex;padding:4px 0;visibility:visible;opacity:1}#intro .close-container{display:none}#outro .modal-footer{flex-direction:row;gap:var(--space-4);justify-content:center}#audio-loading-container{display:flex;justify-content:center;align-items:center;width:100%;padding:var(--space-4) 0;min-height:60px;flex:1 1 100%}#audio-loading-container[style*="display: none"]{display:none;flex:0 0 0;width:0;padding:0;margin:0;min-height:0;height:0;overflow:hidden}#audio-loading-container .loading-complete-button{margin:0 auto;min-height:44px;padding:var(--space-3) var(--space-8);box-sizing:border-box;position:relative;z-index:10;overflow:visible}#continue-button-container{justify-content:center;align-items:center;width:100%;padding:0;margin:0;flex:1 1 100%;text-align:center;position:relative;overflow:visible;min-height:36px}#continue-button-container.show{display:flex!important}#continue-button-container .loading-complete-button{margin:0 auto;min-height:28px;padding:8px 20px;box-sizing:border-box;position:relative;z-index:10;overflow:visible;display:block}#continue-button-container .always-hovered-btn{transform:scale(1.05);display:block;visibility:visible;opacity:1}#continue-button-container .always-hovered-btn:hover{transform:scale(1.1)}.continue-button{padding:var(--space-3) var(--space-8);border-radius:var(--radius-md);font-size:var(--font-size-lg);transition:all var(--transition-normal);cursor:pointer;background:linear-gradient(135deg,var(--clr-primary-dark) 0%,var(--clr-neutral-800) 100%);color:var(--clr-primary-light);border:3px solid var(--clr-primary-dark);box-shadow:var(--shadow-xl),0 0 15px #e4e2dd4d;letter-spacing:var(--letter-spacing-wide);font-weight:600;position:relative;overflow:hidden}.continue-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#e4e2dd4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;pointer-events:none}.continue-button:hover{box-shadow:var(--shadow-2xl),0 0 25px #e4e2dd80;background:linear-gradient(135deg,var(--clr-primary-dark) 0%,var(--clr-neutral-800) 100%);color:var(--clr-primary-light);border-color:var(--clr-primary-dark)}.continue-button:active{box-shadow:var(--shadow-lg),0 0 15px #e4e2dd4d;transition:all var(--transition-fast)}.continue-button:active:before{width:300px;height:300px;transition:width .3s,height .3s}.download-button{padding:var(--space-3) var(--space-8);border-radius:var(--radius-md);font-size:var(--font-size-lg);transition:all var(--transition-normal);cursor:pointer;background:linear-gradient(135deg,var(--clr-accent-gold) 0%,var(--clr-accent-bronze) 100%);color:var(--clr-neutral-900);border:1px solid var(--clr-accent-gold);box-shadow:var(--shadow-md);letter-spacing:var(--letter-spacing-wide);font-weight:500;position:relative;overflow:hidden}.download-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#d4af374d;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;pointer-events:none}.download-button:hover{box-shadow:var(--shadow-lg);background:linear-gradient(135deg,var(--clr-accent-silver) 0%,var(--clr-accent-gold) 100%)}.download-button:active{box-shadow:var(--shadow-md);transition:all var(--transition-fast)}.download-button:active:before{width:300px;height:300px;transition:width .3s,height .3s}@media screen and (width < 892px){.modal .container{--max-width: 768px}.modal-body{grid-template-columns:1fr}.note-container{justify-content:center!important;align-items:center!important;padding:var(--space-8) var(--space-4)}.note-image{transform:rotate(-8deg)}.note-image:hover{transform:rotate(-5deg) scale(1.05)}}@media screen and (width < 768px){.modal-content{margin:var(--space-2);padding:var(--space-6);overflow-y:auto}.modal-header{font-size:var(--font-size-4xl)}.modal-narration{margin-bottom:var(--space-4)}.play-narration-btn{padding:var(--space-4) var(--space-6);font-size:var(--font-size-base);min-height:44px}.modal-body{gap:var(--space-6);margin-block:var(--space-6)}#intro .modal-body{font-size:var(--font-size-lg);word-wrap:break-word;overflow-wrap:break-word}.intro-text-container{font-size:var(--font-size-base);line-height:1.5}.modal-footer{gap:var(--space-3);margin-top:var(--space-6)}.continue-button,.download-button{padding:var(--space-4) var(--space-6);font-size:var(--font-size-base);min-height:44px}#continue-button-container{padding:0;margin:0}#continue-button-container .loading-complete-button{padding:8px 20px;font-size:var(--font-size-base);min-height:28px}.btn:hover,.btn-dark:hover,.audio-toggle-btn:hover,.continue-button:hover,.download-button:hover{transform:none}.btn:active,.btn-dark:active,.audio-toggle-btn:active,.continue-button:active,.download-button:active{transform:scale(.95)}}.postscript,.time-counter{font-size:var(--font-size-sm);color:var(--clr-neutral-600);font-style:italic;margin-top:var(--space-4)}#outro .time-counter+.postscript{margin-top:var(--space-1)}#outro .time-counter{width:500px;display:inline-block}.modal-image{width:100%;margin-inline:auto;caret-color:transparent}#outro .modal-image{width:70%;align-self:center;margin:auto!important}.intro-text-container{min-height:200px;line-height:1.6;position:relative;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;max-width:100%;box-sizing:border-box}.intro-text-container i{font-style:italic}.intro-text-container p{margin-bottom:1rem;word-break:keep-all;overflow-wrap:break-word}.note-container{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:flex-end;padding:var(--space-4)}.note-image{width:19rem;height:auto;transform:rotate(-8deg);filter:drop-shadow(var(--shadow-lg));transition:all var(--transition-normal);border-radius:var(--radius-md)}.note-image:hover{transform:rotate(-5deg) scale(1.05);filter:drop-shadow(var(--shadow-xl))}#background{position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(#533,#000);pointer-events:none;z-index:-2}#background-flash{position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(white,var(--clr-primary-light));opacity:0;pointer-events:none;z-index:9999}#background-flash.fade-out{transition:opacity var(--transition-slow);opacity:0}.btn{color:var(--clr-primary-light);padding:var(--space-3) var(--space-8) var(--space-2);background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 100%);border:1px solid var(--clr-primary-light);border-radius:var(--radius-md);transition:all var(--transition-normal);letter-spacing:var(--letter-spacing-wide);font-weight:500;box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:relative;overflow:hidden;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;pointer-events:none}.btn:hover,.btn:focus-visible{color:var(--clr-primary-dark);background:linear-gradient(135deg,var(--clr-primary-light) 0%,var(--clr-neutral-200) 100%)}.btn:active{box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.btn:active:before{width:300px;height:300px;transition:width .3s,height .3s}.btn:focus{outline:none}.btn-dark{color:var(--clr-primary-dark);padding:var(--space-3) var(--space-8) var(--space-2);background:linear-gradient(135deg,transparent 0%,rgba(40,56,66,.1) 100%);border:1px solid var(--clr-primary-dark);border-radius:var(--radius-md);transition:all var(--transition-normal);letter-spacing:var(--letter-spacing-wide);font-weight:500;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}.btn-dark:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#2838424d;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;pointer-events:none}.btn-dark:hover,.btn-dark:focus-visible{color:var(--clr-primary-light);background:linear-gradient(135deg,var(--clr-primary-dark) 0%,var(--clr-neutral-800) 100%)}.btn-dark:active{box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.btn-dark:active:before{width:300px;height:300px;transition:width .3s,height .3s}.btn-dark:focus{outline:none}.dialogue-button{background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 100%)!important;color:var(--clr-primary-light)!important;border:2px solid var(--clr-accent-gold)!important;box-shadow:var(--shadow-lg)!important;font-weight:600!important;text-shadow:0 1px 2px rgba(0,0,0,.1)!important;position:relative!important;overflow:hidden!important}.dialogue-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#d4af374d;border-radius:50%;transform:translate(-50%,-50%);transition:width .2s,height .2s;pointer-events:none}.dialogue-button:hover,.dialogue-button:focus-visible{background:linear-gradient(135deg,var(--clr-primary-light) 0%,var(--clr-neutral-200) 100%)!important;color:var(--clr-primary-dark)!important;border-color:var(--clr-accent-gold)!important;box-shadow:var(--shadow-xl)!important}.dialogue-button:active{box-shadow:var(--shadow-lg)!important;transition:none!important}.dialogue-button:active:before{width:300px;height:300px;transition:width .1s,height .1s}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.audio-toggle-btn{padding:var(--space-3) var(--space-8) var(--space-2);border-radius:var(--radius-md);transition:all var(--transition-normal);background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 100%);border:1px solid var(--clr-primary-light);color:var(--clr-primary-light);letter-spacing:var(--letter-spacing-wide);font-weight:500;position:relative;overflow:hidden;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}.audio-toggle-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;pointer-events:none}.audio-toggle-btn:hover{background:linear-gradient(135deg,var(--clr-primary-light) 0%,var(--clr-neutral-200) 100%);color:var(--clr-primary-dark);box-shadow:var(--shadow-md)}.audio-toggle-btn:active{box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.audio-toggle-btn:active:before{width:300px;height:300px;transition:width .3s,height .3s}.audio-controls{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,var(--clr-primary-light) 0%,var(--clr-neutral-200) 100%);border-radius:var(--radius-xl);padding:var(--space-8);min-width:350px;max-width:450px;z-index:1000;display:none;box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--clr-primary-dark);box-shadow:var(--shadow-2xl),0 0 30px #0003}.audio-controls-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8);border-bottom:2px solid var(--clr-primary-dark);padding-bottom:var(--space-4);position:relative}.audio-controls-header h3{margin:0;font-size:var(--font-size-xl);color:var(--clr-primary-dark);letter-spacing:var(--letter-spacing-wide);font-weight:500}.audio-close-btn{background:none;border:none;font-size:var(--font-size-3xl);cursor:pointer;color:var(--clr-primary-dark);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);transition:all var(--transition-fast);width:var(--space-10);height:var(--space-10);display:flex;align-items:center;justify-content:center}.audio-close-btn:hover{background-color:#2838421a;transform:scale(1.1)}.audio-controls-content{display:flex;flex-direction:column;gap:var(--space-8)}.audio-control-group{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);transition:all var(--transition-normal)}.audio-control-group label{font-weight:500;color:var(--clr-primary-dark);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;margin-bottom:var(--space-2)}.volume-slider{width:100%;height:6px;border-radius:var(--radius-full);background:var(--clr-neutral-300);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:all var(--transition-fast)}.volume-slider::-webkit-slider-track{background:transparent;border:none;border-radius:var(--radius-full)}.volume-slider::-moz-range-track{background:transparent;border:none;border-radius:var(--radius-full)}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--clr-primary-dark);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.1);background:var(--clr-accent-gold)}.volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--clr-primary-dark);cursor:pointer;border:none;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.volume-slider::-moz-range-thumb:hover{transform:scale(1.1);background:var(--clr-accent-gold)}.volume-control-wrapper{position:relative;display:flex;align-items:center;gap:var(--space-3)}.volume-indicator{width:40px;height:4px;background:var(--clr-neutral-300);border-radius:var(--radius-full);overflow:hidden;flex-shrink:0}.volume-bar{height:100%;background:var(--clr-primary-dark);border-radius:var(--radius-full);transition:width var(--transition-normal)}.volume-value{font-size:var(--font-size-sm);color:var(--clr-primary-dark);text-align:right;font-weight:500;letter-spacing:var(--letter-spacing-wide)}.audio-control-buttons{display:flex;gap:var(--space-4);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid rgba(40,56,66,.2)}.mute-btn{flex:1;padding:var(--space-2) var(--space-4);border:1px solid var(--clr-primary-dark);background:transparent;color:var(--clr-primary-dark);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-wide);font-weight:500}.mute-btn:hover{background:var(--clr-primary-dark);color:var(--clr-primary-light);transform:translateY(-1px)}.mute-icon{margin-right:var(--space-1)}@media screen and (max-width: 480px){.audio-controls{min-width:280px;margin:var(--space-4);padding:var(--space-6)}.audio-control-buttons{flex-direction:column}.audio-control-group{padding:var(--space-3)}.volume-control-wrapper{gap:var(--space-2)}.volume-indicator{width:30px}.mute-btn{padding:var(--space-3) var(--space-4);min-height:44px}}.loading-bar-container{margin:0;text-align:center;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1)}.loading-bar{width:100%;height:6px;background-color:#fff3;border-radius:var(--radius-full);overflow:hidden;box-shadow:inset 0 1px 2px #0000001a}.loading-bar-fill{height:100%;background:linear-gradient(90deg,var(--clr-accent-gold),var(--clr-accent-bronze));width:0%;transition:width var(--transition-normal);border-radius:var(--radius-full);box-shadow:0 0 10px #d4af3780}.loading-text{font-size:var(--font-size-xs);color:var(--clr-primary-dark);font-weight:500;letter-spacing:var(--letter-spacing-wide);line-height:1}#audio-loading-container{margin:0;padding:var(--space-3) var(--space-8);background:transparent;border-radius:var(--radius-lg);opacity:1;visibility:visible;transition:opacity var(--transition-slow),visibility var(--transition-slow);height:60px;overflow:hidden;position:relative;width:100%;display:flex;align-items:center;justify-content:center}.loading-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.loading-content p{font-size:var(--font-size-sm);margin:0;line-height:1;font-weight:500;color:var(--clr-primary-dark)}#audio-loading-container.fade-out{opacity:0;visibility:hidden}.loading-complete-button{opacity:0;transform:translateY(10px);transition:opacity var(--transition-normal),transform var(--transition-normal);position:relative;z-index:1}.loading-complete-button.show{opacity:1;transform:translateY(0)}html{scroll-behavior:smooth}.btn:hover,.btn-dark:hover,.audio-toggle-btn:hover,.dialogue-button:hover,.continue-button:hover,.download-button:hover{transform:var(--hover-lift) scale(1.02);box-shadow:var(--shadow-lg);transition:all var(--transition-bounce)}.btn:active,.btn-dark:active,.audio-toggle-btn:active,.dialogue-button:active,.continue-button:active,.download-button:active{transform:var(--active-press);transition:all var(--transition-fast)}.btn:focus-visible,.btn-dark:focus-visible,.audio-toggle-btn:focus-visible,.dialogue-button:focus-visible,.continue-button:focus-visible,.download-button:focus-visible{outline:none;box-shadow:var(--focus-glow);transform:var(--hover-lift)}.success-state{animation:successPulse var(--animation-duration-medium) ease-out}@keyframes successPulse{0%{transform:scale(1);box-shadow:var(--shadow-md)}50%{transform:scale(1.05);box-shadow:0 0 20px #28a84566}to{transform:scale(1);box-shadow:var(--shadow-md)}}.error-state{animation:errorShake var(--animation-duration-medium) ease-in-out}@keyframes errorShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.progress-indicator{position:relative;overflow:hidden}.progress-indicator:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progressShimmer 2s infinite}@keyframes progressShimmer{0%{left:-100%}to{left:100%}}.completion-celebration{animation:celebrationBounce var(--animation-duration-long) var(--transition-elastic)}@keyframes celebrationBounce{0%{transform:scale(.3) rotate(0);opacity:0}50%{transform:scale(1.1) rotate(180deg);opacity:1}to{transform:scale(1) rotate(360deg);opacity:1}}.modal.fade-out{animation:modalFadeOut var(--animation-duration-medium) ease-in}@keyframes modalFadeOut{0%{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.btn.loading,.btn-dark.loading{position:relative;color:transparent;pointer-events:none}.btn.loading:after,.btn-dark.loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:buttonSpinner var(--animation-duration-medium) linear infinite}@keyframes buttonSpinner{to{transform:rotate(360deg)}}.volume-slider:hover{transform:scaleY(1.2);transition:transform var(--transition-fast)}.volume-slider::-webkit-slider-thumb:hover,.volume-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:var(--shadow-lg);transition:all var(--transition-bounce)}.audio-control-group:hover{transform:translate(5px);transition:transform var(--transition-normal)}.mute-btn:hover{transform:var(--hover-lift);box-shadow:var(--shadow-md);transition:all var(--transition-bounce)}.close:hover{transform:scale(1.1) rotate(90deg);transition:all var(--transition-bounce)}.close:active{transform:scale(.9) rotate(90deg);transition:all var(--transition-fast)}::selection{background:#d4af374d;color:var(--clr-primary-dark)}*{transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.ripple{position:absolute;border-radius:50%;background:#fff9;transform:scale(0);animation:ripple var(--animation-duration-medium) linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}