:root{--ink:#171616;--bg:#161616;--paper:#f3e7ce;--red:#f14a3e;--yellow:#f4dc53;--light:#fff6dc;--muted:#b8ada1;--border:#5f5549;color-scheme:dark;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--paper)}body{overscroll-behavior:none}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}button:disabled{opacity:.38;cursor:not-allowed}[hidden],.hidden{display:none!important}.app{min-height:100vh;min-height:100dvh;background:linear-gradient(137deg,#1d1a18,#101013)}.masthead{height:64px;padding:0 max(15px,env(safe-area-inset-left));display:flex;align-items:center;gap:12px;border-bottom:2px solid #6e624f;background:#151414e6;position:relative;z-index:2}.brand-sticker{background:var(--yellow);border:2px solid #0c0d0f;box-shadow:3px 3px 0 var(--red);width:42px;height:40px;color:#161616;font:900 22px Impact,'Arial Black',sans-serif;display:flex;align-items:center;justify-content:center;transform:rotate(-4deg)}.brand-sticker span{font-size:12px;align-self:start}.brand-copy{display:flex;flex-direction:column}.brand-copy b{font:900 clamp(16px,2.5vw,20px) Impact,'Arial Black',sans-serif;letter-spacing:.035em}.brand-copy b span{color:var(--yellow)}.brand-copy small{font-size:7px;letter-spacing:.14em;color:#b9ac9a}.edition-badge{margin-left:auto;font:900 9px/1.4 monospace;letter-spacing:.07em;border:1px dashed #c9bfa6;padding:5px 9px;text-align:center}.icon-btn{background:#272320;border:1px solid #6f5f50;color:var(--paper);min-width:42px;height:42px;font-size:26px}.intro{max-width:1380px;margin:auto;min-height:calc(100dvh - 64px);position:relative;padding:18px clamp(16px,4.5vw,65px) 26px;isolation:isolate;background:radial-gradient(ellipse at 18% 65%,#5c2726bb,transparent 43%),radial-gradient(ellipse at 75% 35%,#3c352a66,transparent 43%)}.intro:before{content:'';z-index:-1;position:absolute;inset:0;pointer-events:none;opacity:.4;background:repeating-linear-gradient(105deg,transparent 0 8px,#ede0bf0c 8px 9px),repeating-linear-gradient(0deg,transparent 0 3px,#0008 4px 5px)}.ripped-heading{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #887962;padding:0 0 12px;font-size:10px;color:#d3bf9c;letter-spacing:.16em;font-weight:850}.hero-layout{display:grid;grid-template-columns:minmax(240px,.88fr) minmax(260px,1fr);align-items:center;gap:clamp(22px,5vw,75px);margin-top:clamp(20px,4vw,48px)}.cover-stage{width:100%;max-width:500px;position:relative;justify-self:center;transform:rotate(-2deg);padding:11px 9px 25px}.cover-stage:before{content:'';position:absolute;inset:0;background:#e9d8b5;transform:rotate(2deg);box-shadow:13px 15px 0 #080809ad;clip-path:polygon(0 0,100% 0,98% 95%,95% 100%,0 98%)}.cover-poster{position:relative;box-shadow:0 10px 20px #000a}.cover-poster img{width:100%;height:auto;display:block;border:3px solid #181617}.stamp{position:absolute;background:var(--red);color:#fff1ce;box-shadow:4px 4px 0 #151515;z-index:1;transform:rotate(-12deg);font:900 15px/1 Impact,'Arial Black',sans-serif;text-align:center;padding:9px 13px}.stamp-left{left:-5px;top:8%;font-size:12px}.stamp-right{right:-5%;top:72%;transform:rotate(8deg);font-size:27px;border:3px solid #fff}.tape-label{position:absolute;bottom:0;left:18%;right:13%;transform:rotate(2deg);background:#f2db8d;color:#292323;text-align:center;padding:9px 6px;letter-spacing:.1em;font-size:10px;font-weight:950;box-shadow:1px 1px 1px #0008}.copy-stage{padding:5px 0}.eyebrow{display:inline-block;color:var(--yellow);font:900 11px/1.4 monospace;letter-spacing:.1em}.copy-stage h1{font:900 clamp(58px,7vw,108px)/.92 Impact,'Arial Black',sans-serif;letter-spacing:.008em;margin:24px 0 24px;color:#fff4da;filter:drop-shadow(5px 7px 0 #030203)}.copy-stage h1 span,.copy-stage h1 em,.copy-stage h1 strong{display:block;font-weight:900}.copy-stage h1 span{font-size:.79em}.copy-stage h1 em{font-style:normal;color:var(--yellow);transform:rotate(-2deg);width:max-content}.copy-stage h1 strong{color:var(--red);transform:rotate(-3deg);width:max-content}.note-paper{background:var(--paper);color:#1b1a19;box-shadow:5px 6px 0 #070606;padding:16px 19px;max-width:475px;font:bold 17px/1.35 Georgia,serif;transform:rotate(-2deg);border-left:7px solid var(--red);clip-path:polygon(0 0,100% 2%,99% 100%,2% 99%)}.description{line-height:1.75;font-size:14px;max-width:530px;margin-top:25px;color:#d5c7b7}.status-tape{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:bold 10px/1.5 monospace;letter-spacing:.075em;padding:13px 0;border-top:1px dashed #83765b;border-bottom:1px dashed #83765b}.dot{width:10px;height:10px;border-radius:50%;background:var(--red)}.tag-access{color:#19181b;background:var(--yellow);padding:4px 6px;transform:rotate(-1deg)}.hero-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.primary-btn,.secondary-btn{padding:13px 19px;min-height:46px;border-radius:0;font-size:12px;letter-spacing:.025em;font-weight:950;text-transform:uppercase}.primary-btn{background:var(--red);color:white;border:2px solid #151515;box-shadow:4px 4px 0 var(--yellow)}.primary-btn span{margin-left:14px}.secondary-btn{background:#191617;color:#f2e3ca;border:1px solid #918269}.hint{font-size:11px;color:#d4c5a7;line-height:1.5}.credit{font:900 11px monospace;color:#b7a995;letter-spacing:.06em;margin:28px 0 0}.credit strong{color:#fff0b7}.footer-scraps{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #6b604e;margin-top:36px;padding-top:12px;color:#ab9880;font-size:9px;letter-spacing:.06em}.reader{height:calc(100dvh - 64px);min-height:450px;width:100%;display:flex;flex-direction:column;align-items:center;padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:7px;background:radial-gradient(ellipse at 50% 30%,#39312c,transparent 65%),#171515}.reader-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:min(100%,1300px);min-height:42px}.reader-title{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.04em}.scribble{display:inline-block;padding:6px;background:var(--yellow);color:#181616;font:900 10px monospace;transform:rotate(-4deg)}.tools{display:flex;gap:5px}.tool-btn{padding:10px 12px;background:#231f1f;border:1px solid #756651;color:var(--paper);font-size:11px;font-weight:850;min-height:38px}.stage{position:relative;width:100%;flex:1;min-height:0;display:flex;justify-content:center;align-items:center;overflow:hidden;border:2px solid #66584b;background:repeating-linear-gradient(150deg,#191618 0 9px,#1d1a1d 10px 11px);touch-action:pan-y}.stage:before{content:'';position:absolute;inset:7px;border:1px dashed #b0a18133;pointer-events:none}.page-frame{position:relative;aspect-ratio:1229/1536;height:100%;max-width:100%;box-shadow:0 13px 35px #000c;background:#eee5d1;overflow:hidden;touch-action:pan-y}.page-img,.paper-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}.under-page{z-index:1}.static-page{z-index:2}.paper-canvas{z-index:3;display:none}.page-frame.flipping .static-page{visibility:hidden}.page-frame.flipping .paper-canvas{display:block}.stage-arrow{position:absolute;z-index:6;top:50%;transform:translateY(-50%);border:1px solid #e4c57a;color:#fff3d4;background:#121011cc;width:45px;height:64px;font-size:40px}.stage-arrow.prev{left:clamp(0px,3vw,36px)}.stage-arrow.next{right:clamp(0px,3vw,36px)}.locked-sheet{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:22px;color:#161514;background:linear-gradient(170deg,#e9dcbc,#f2e4cb 70%,#d2baa1)}.locked-sheet:before{content:'';position:absolute;inset:12px;border:3px dashed #b09c78;pointer-events:none}.locked-sheet:after{content:'TOP SECRET • FAUZAN STORIES • ISSUE 01';position:absolute;bottom:7%;font:900 9px monospace;color:#7d6851;letter-spacing:.08em}.locked-cross{position:absolute;left:10%;top:8%;font:900 46px Impact;color:#a79b82;transform:rotate(-15deg)}.locked-tag{background:#201b1a;color:#f3dfb5;font:900 clamp(9px,1.5vw,13px) monospace;letter-spacing:.08em;padding:9px 13px;transform:rotate(-4deg)}.lock-icon{font-size:clamp(40px,9vh,110px);color:#e53d36;line-height:1.1}.locked-sheet h2{font:900 clamp(25px,5vh,58px)/1 Impact,'Arial Black',sans-serif;margin:10px 0}.locked-sheet p{font-size:clamp(11px,1.7vh,15px);line-height:1.4;max-width:310px}.locked-sheet .primary-btn{font-size:clamp(9px,1.5vh,12px);min-height:39px;padding:8px 14px}.locked-sheet .text-link{font-size:10px;color:#534339}.reader-controls{width:min(100%,1300px);display:flex;justify-content:space-between;align-items:center;gap:7px;min-height:51px}.page-btn{padding:10px 13px;border:1px solid #76624e;background:#252020;color:#eadcbd;font-weight:950;font-size:10px;white-space:nowrap;min-height:42px}.page-btn.red{background:var(--red);color:white;border-color:#e54d46}.counter{flex:1;max-width:160px;text-align:center;font:900 12px monospace}.progress-track{height:3px;background:#6c5a4b;margin-top:7px}.progress-track>div{height:100%;background:var(--yellow);width:0;transition:width .2s}.reader-foot{width:min(100%,1300px);display:flex;justify-content:space-between;align-items:center;gap:10px;color:#a9957c;font-size:9px;font-weight:850;letter-spacing:.06em}.foot-btn{background:none;border:0;color:var(--yellow);font-size:10px;font-weight:900}.reader-credit{font-size:8px;margin:0;color:#9b8b72}.ending{min-height:calc(100dvh - 64px);max-width:900px;margin:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:50px 24px;text-align:center}.big-asterisk{font-size:100px;color:var(--red);line-height:1}.ending h2{font:900 clamp(55px,10vw,100px)/.94 Impact,'Arial Black',sans-serif;margin:20px 0}.ending h2 em{font-style:normal;color:var(--yellow)}.ending p{font-size:17px;line-height:1.6;max-width:500px}.modal{border:3px solid #d3bb84;background:#211d1d;color:var(--paper);width:min(92vw,510px);max-height:86dvh;overflow-y:auto;padding:24px;box-shadow:12px 12px 0 #0007}.modal::backdrop,.zoom-dialog::backdrop{background:#070508df;backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.modal-head h2{font:900 30px Impact,'Arial Black',sans-serif;margin:0}.modal-close{background:var(--red);border:1px solid black;min-width:40px;min-height:40px;font-size:25px;color:white}.modal-note{font-size:12px;line-height:1.6;color:#d7c4a8}.toc-items{display:flex;flex-direction:column;gap:9px;margin:19px 0}.toc-item{width:100%;display:flex;align-items:center;gap:15px;min-height:66px;border:1px solid #776751;background:#2b2422;color:var(--paper);text-align:left;padding:10px}.toc-item.selected{border-color:var(--yellow)}.toc-item .toc-number{font:900 30px Impact;color:var(--yellow);width:50px}.toc-item b{font-size:13px}.toc-item small{display:block;margin-top:5px;font-size:10px;color:#c4ab8b}.text-link{background:none;color:#e9c982;text-decoration:underline;text-underline-offset:4px;border:0;padding:10px;font-size:12px;font-weight:850}.audio-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.volume-label{display:flex;justify-content:space-between;font:900 11px monospace;margin:18px 0 10px}#volumeRange{width:100%;accent-color:var(--red)}.upload-audio{display:block;margin:20px 0 9px;background:#e9d7a2;color:#151415;cursor:pointer;text-align:center;padding:14px;font-size:12px;font-weight:950}.checkbox-label{display:block;font-size:12px;margin:15px 0}.field-label{display:flex;flex-direction:column;gap:7px;margin:16px 0;font:900 11px monospace;color:#e6c889}.field-label input{background:#120f10;color:#fff1df;border:1px solid #8c715b;border-radius:0;padding:14px 12px;min-height:48px;font-size:16px}.login-actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px;margin-top:13px}.retry-image{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid white;background:#af231c;color:white;font-size:13px;padding:15px}.zoom-dialog{padding:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;background:#0b0a0b;color:var(--paper);border:0;overflow:hidden}.zoom-top{height:60px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 15px;background:#211b1c;font:900 11px monospace}.zoom-tools{display:flex;align-items:center;gap:7px}.zoom-tools button{padding:10px;border:1px solid #6d5e50;background:#2f2828;color:#f9e8cd;min-width:35px}.zoom-surface{height:calc(100dvh - 93px);width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;touch-action:none}.zoom-surface img{height:100%;width:auto;max-width:100%;object-fit:contain;transform-origin:center center;user-select:none;pointer-events:none;will-change:transform}.zoom-tip{height:30px;text-align:center;font-size:9px;color:#ad997f;letter-spacing:.03em;margin:0}.toast{pointer-events:none;position:fixed;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(30px);opacity:0;background:#e9dfbb;color:#171616;z-index:50;padding:13px 17px;border-left:5px solid var(--red);box-shadow:0 10px 30px #0009;max-width:calc(100vw - 30px);font-size:12px;font-weight:800;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:760px){.masthead{height:55px}.intro{padding:12px 16px 30px}.ripped-heading{font-size:8px}.hero-layout{grid-template-columns:1fr;margin-top:20px;gap:18px}.cover-stage{max-width:min(76vw,345px);padding-bottom:17px}.cover-stage .stamp{font-size:12px}.cover-stage .stamp-right{font-size:22px}.cover-stage .tape-label{padding:5px;font-size:8px}.copy-stage{text-align:center}.copy-stage h1{font-size:clamp(55px,14vw,95px);margin:16px 0 21px}.copy-stage h1 em,.copy-stage h1 strong{margin-left:auto;margin-right:auto}.note-paper{font-size:16px;margin:auto}.description{font-size:13px}.hero-buttons{justify-content:center}.status-tape{justify-content:center}.footer-scraps{flex-direction:column;text-align:center;gap:8px}.reader{height:calc(100dvh - 55px)}.reader-title strong{display:none}.reader-head{min-height:38px}.reader-controls{gap:5px}.page-btn{font-size:9px;padding:8px;min-height:40px}.reader-foot span{font-size:8px}.stage-arrow{width:31px;height:56px;background:#14101499;font-size:32px}.reader-foot{font-size:8px}.reader-credit{font-size:7px}}
@media(max-width:390px){.brand-copy small{font-size:6px}.reader-controls .page-btn{font-size:8px;padding:7px 6px}.tool-btn{min-width:38px;padding:9px 7px}.tool-btn span{display:none}.counter{font-size:10px}.locked-sheet{padding:15px}.locked-sheet:before{inset:5px}.locked-sheet:after{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}