/* The landing's tape shelf and CRT; Paimon's night/cream palette for quiet help. */
:root{color-scheme:dark;background:#0b0b0c}
@font-face{font-family:Anton;src:url(/fonts/Anton.woff2) format('woff2');font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/Archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Mono;src:url(/fonts/JetBrainsMono.woff2) format('woff2');font-display:swap}
.mod-guide{--ink:#0b0b0c;--paper:#f2efe6;--yellow:#ffd400;--muted:#b5b3a9;background:var(--ink);color:var(--paper);font:16px/1.55 Archivo,system-ui,sans-serif;margin:0}
.mod-guide *,.mod-guide *:before,.mod-guide *:after{box-sizing:border-box}.mod-guide img{display:block;max-width:100%}.mod-guide a{color:inherit}.mod-guide :focus-visible{outline:3px solid #ffd400;outline-offset:5px}.mod-guide ::selection{color:#0b0b0c;background:#ffd400}
.mod-guide .skip{position:fixed;top:-80px;left:15px;padding:12px;background:#ffd400;color:#0b0b0c;z-index:40}.mod-guide .skip:focus{top:8px}
.mod-guide main,.mod-footer{max-width:1190px;margin:0 auto;padding:0 24px}.mod-bar{position:sticky;top:0;z-index:30;min-height:64px;display:flex;align-items:center;gap:24px;padding:10px max(24px,calc((100% - 1142px)/2));background:#0b0b0cf7;border-bottom:1px solid #383932}
.mod-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 17px/1 Archivo,Arial,sans-serif;letter-spacing:.08em;white-space:nowrap}.mod-brand b{background:var(--paper);color:#0b0b0c;padding:4px 5px}.mod-back{text-decoration:none;font:11px Mono,monospace;color:var(--muted)!important;margin-left:10px}
.mod-help{margin-left:auto;display:flex;align-items:center;gap:9px;text-decoration:none;padding:4px 13px 4px 5px;border:1px solid #d3bc8e55;border-radius:30px;background:#232746;font-size:12px;white-space:nowrap}.mod-help img{border-radius:50%;border:1px solid #d3bc8e;width:30px;height:30px}.mod-help b{color:#f0dcae}.mod-help:hover{border-color:#f0dcae}
.mod-hero{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:42px 0 34px;border-bottom:1px solid #383932;isolation:isolate}.mod-kicker{font:11px Mono,monospace;letter-spacing:.12em;color:#29e6ff;margin:0 0 14px}.mod-intro h1{font:clamp(54px,7vw,92px)/.98 Anton,Impact,sans-serif;margin:0;letter-spacing:.015em}.mod-intro h1 em{color:#ffd400;font-style:normal}.mod-intro>p:not(.mod-kicker){font-size:18px;line-height:1.55;margin:19px 0}.mod-start{display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:13px 19px;background:#ffd400;color:#0b0b0c!important;font:900 13px/1.4 Archivo,Arial,sans-serif;text-decoration:none;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));transition:transform .15s,filter .15s}.mod-start:hover{transform:translateY(-2px);filter:brightness(1.08)}
.mod-tapes{display:flex;justify-content:center;align-items:flex-end;gap:16px;padding:32px 0 8px;position:relative}.mod-tapes:after{content:'';position:absolute;bottom:0;height:9px;width:100%;background:linear-gradient(#616368,#1b1c21);box-shadow:0 8px 16px #000}
.tape{--color:#ffd400;position:relative;width:89px;height:240px;text-decoration:none;display:flex;flex-direction:column;align-items:center;padding:24px 8px 18px;background:linear-gradient(90deg,#0005,transparent 12%,transparent 86%,#0008),repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 12px),var(--color);color:#0b0b0c!important;border:8px solid #151617;border-top-width:26px;border-bottom-width:28px;box-shadow:3px 3px 0 #060607,7px 4px 18px #0008;transition:transform .18s}
.tape small{position:absolute;top:-20px;background:#f2efe6;padding:0 5px;font:700 11px Mono,monospace}.tape b{writing-mode:vertical-rl;transform:rotate(180deg);font:22px Anton,Impact,sans-serif;letter-spacing:.025em;flex:1}.tape span{position:absolute;bottom:-22px;color:var(--color);font:9px Mono,monospace}.tape:hover{transform:translateY(-10px)}.tape.cyan{--color:#29e6ff;height:208px}.tape.pink{--color:#ff4f8b;height:222px}.tape.violet{--color:#b69cff;height:196px}
.mod-caution{display:flex;align-items:center;gap:12px;padding:16px 0;color:var(--muted);font-size:12px}.mod-caution>span{display:grid;place-items:center;width:22px;height:22px;border:1px solid #d3bc8e;color:#f0dcae;font-weight:800;flex:none}.mod-caution p{margin:0}.mod-caution a{color:#f0dcae}.mod-caution small{margin-left:auto;white-space:nowrap;font:9px Mono,monospace}
.mod-steps{list-style:none;margin:8px 0 0;padding:0;counter-reset:step}.mod-step{--accent:#ffd400;position:relative;display:grid;grid-template-columns:70px minmax(0,1fr);border:1px solid #34362e;border-left:0;margin-bottom:22px;background:linear-gradient(110deg,#ffffff03,transparent 65%),#121316;scroll-margin-top:82px;counter-increment:step}.mod-step:nth-child(2){--accent:#29e6ff}.mod-step:nth-child(3){--accent:#ff4f8b}.mod-step:nth-child(4){--accent:#b69cff}.step-spine{background:var(--accent);color:#0b0b0c;display:flex;flex-direction:column;align-items:center;padding:24px 0;gap:18px}.step-spine b{font:35px/.95 Anton,Impact,sans-serif}.step-spine span{writing-mode:vertical-rl;transform:rotate(180deg);font:10px Mono,monospace;letter-spacing:.12em}
.step-main{padding:29px 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:36px;align-items:center;min-width:0}.step-copy{min-width:0}.step-copy h2{font:clamp(27px,3vw,39px)/1.09 Anton,Impact,sans-serif;margin:0 0 15px;letter-spacing:.015em}.step-copy h2 small{display:block;font:10px Mono,monospace;letter-spacing:.07em;color:var(--accent);margin-bottom:10px}.step-copy p{margin:0 0 15px;max-width:42ch}.step-copy .step-note{font-size:12px;color:var(--muted);margin:12px 0 0}.step-copy strong{font-weight:800}.step-copy a:not(.mod-start){text-decoration-thickness:1px;text-underline-offset:4px}.step-copy .mod-start{background:var(--accent);width:100%;max-width:320px}.step-visual{min-width:0;margin:0}.step-visual figcaption{font:10px/1.65 Mono,monospace;color:#9aa0b5;margin-top:10px}.step-visual figcaption a{color:#a5c8ff}
.install-window{background:#191c28;border:1px solid #d3bc8e5c;border-radius:13px;box-shadow:0 16px 32px #0005;overflow:hidden}.window-title{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid #d3bc8e33;font:11px Mono,monospace;color:#b6bfd6}.window-title i{background:#a5c8ff;width:7px;height:7px;border-radius:50%}.install-file{padding:25px 22px;display:flex;align-items:center;gap:16px}.file-icon{width:48px;height:56px;border:1px solid #a5c8ff;color:#a5c8ff;display:grid;place-items:center;font:13px Mono,monospace;flex:none;background:#a5c8ff0b;clip-path:polygon(0 0,70% 0,100% 24%,100% 100%,0 100%)}.install-file b{display:block;font-size:18px}.install-file span{font-size:12px;color:#9aa0b5}.install-pick{margin:0 22px 23px;border:1px solid #f0dcae;background:#f0dcae0d;color:#f0dcae;padding:13px 16px;font-size:15px;font-weight:800;display:flex;justify-content:space-between}.install-pick span{font-size:11px;align-self:center;color:#a5c8ff}
.crt-frame{position:relative;padding:12px;border:1px solid #52545b;border-radius:21px 21px 16px 16px;background:linear-gradient(135deg,#46474b,#151618 20%,#111213 78%,#33363a);box-shadow:0 15px 28px #0006}.crt-screen{position:relative;border:3px solid #090a09;border-radius:10px;overflow:hidden;display:block}.crt-screen img{width:100%;height:auto}.crt-screen:after{content:'';position:absolute;left:18.5%;top:75.5%;width:15%;height:16%;border:2px solid #29e6ff;box-shadow:0 0 0 2px #0b0b0c88;pointer-events:none}.crt-knobs{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:9px 2px 0;font:9px Mono,monospace;color:#86e8c0}.crt-knobs i{width:14px;height:14px;border:1px solid #55585a;border-radius:50%;background:linear-gradient(130deg,#777,#111);box-shadow:1px 1px 3px #000}.crt-screen:hover{border-color:#29e6ff}
.folder-diagram{background:#191c28;border:1px solid #d3bc8e55;border-radius:13px;overflow:hidden}.folder-path{padding:13px 17px;font:11px Mono,monospace;background:#232746;color:#f0dcae;display:flex;gap:8px;align-items:center}.folder-path img{width:18px;height:18px;object-fit:contain}.folder-tree{padding:20px 21px;list-style:none;margin:0;font:13px/1.8 Mono,monospace}.folder-tree li{padding-left:20px;position:relative}.folder-tree li:before{content:'└';position:absolute;left:0;color:#9aa0b5}.folder-tree>li{padding-left:0}.folder-tree>li:before{content:''}.folder-tree ul{list-style:none;padding:0 0 0 12px}.folder-tree .folder-target{color:#ffd400}.folder-tree .folder-mod{color:#e7a1b0}.folder-tree .folder-file{color:#9aa0b5;font-size:11px}.folder-footer{padding:11px 18px;border-top:1px solid #d3bc8e33;font:11px/1.5 Mono,monospace;color:#7fe3d6}.folder-tools{display:flex;gap:8px;align-items:center;font-size:12px;color:#b5b3a9}.folder-tools img{width:21px;height:21px;object-fit:contain}
.key-scene{background:radial-gradient(ellipse at top,#36405855,transparent 70%),#191c28;border:1px solid #d3bc8e55;border-radius:13px;padding:29px 18px 23px;text-align:center}.key-scene kbd{display:inline-grid;place-items:center;width:122px;height:91px;border:1px solid #777b91;border-bottom:8px solid #555a72;border-radius:13px;font:39px Mono,monospace;background:linear-gradient(135deg,#424960,#222636);box-shadow:0 12px 25px #0006;color:#f0dcae}.key-scene p{font-size:13px;color:#9aa0b5;margin:20px 0 0}.key-tags{display:flex;justify-content:center;gap:16px;margin-top:15px;font:11px Mono,monospace;color:#a5c8ff}.key-tags b{font-weight:400;color:#f0dcae}
.mod-finish{display:flex;align-items:center;gap:17px;border:1px solid #d3bc8e66;background:radial-gradient(ellipse at top right,#59619933,transparent),#1b1d2a;padding:24px 27px;border-radius:15px;margin:34px 0}.mod-finish img{border-radius:50%;border:1px solid #f0dcae}.mod-finish h2{font-size:22px;margin:0 0 3px}.mod-finish p{color:#a8b9d8;font-size:13px;margin:0}.mod-finish .mod-start{margin-left:auto;background:#f0dcae;white-space:nowrap}
.mod-extras{padding:0 0 25px}.mod-extras details{border-top:1px solid #383932;scroll-margin-top:85px}.mod-extras summary{padding:20px 4px;cursor:pointer;font-size:16px;font-weight:750;list-style:none;display:flex;gap:12px;align-items:center}.mod-extras summary:after{content:'+';font:21px Mono,monospace;color:#ffd400;margin-left:auto}.mod-extras details[open] summary:after{content:'−'}.mod-extras details[open] summary{color:#ffd400}.extra-content{padding:0 27px 23px;color:var(--muted);font-size:14px;max-width:900px}.extra-content p{margin:0 0 14px}.extra-content ul{padding-left:19px}.extra-content li{margin:8px 0}.extra-content a{color:#f2efe6;text-underline-offset:4px}.extra-content strong{color:#f2efe6}.extra-content code{font:12px Mono,monospace;color:#a5c8ff;overflow-wrap:anywhere}
.mod-footer{padding-top:23px;padding-bottom:30px;border-top:1px solid #383932;color:#9aa0b5;font-size:11px}.mod-footer nav{display:flex;flex-wrap:wrap;gap:12px 25px;color:#f2efe6;margin-bottom:16px}.mod-footer p{max-width:98ch;line-height:1.7;margin:8px 0}.mod-footer a{text-underline-offset:3px}
/* Each cassette opens only when its reader needs the smaller steps. */
.mod-step:has(>.step-details) .step-spine{grid-row:1/span 2}
.step-details{grid-column:2;min-width:0;margin:0 32px 26px;border-top:1px solid #3b3f43}
.step-details>summary{display:flex;align-items:center;gap:12px;min-height:58px;padding:16px 0;cursor:pointer;list-style:none;color:var(--paper);font-size:14px;font-weight:750}
.step-details>summary::-webkit-details-marker{display:none}.step-details>summary>span{display:flex;align-items:center;gap:10px}.step-details>summary>span:before{content:'+';display:grid;place-items:center;flex:none;width:23px;height:23px;border:1px solid #6c717d;color:var(--accent);font:17px/1 Mono,monospace}.step-details[open]>summary>span:before{content:'−';border-color:var(--accent);background:#ffffff05}.step-details>summary small{margin-left:auto;font:10px/1.5 Mono,monospace;color:#9aa0b5;text-align:right}.step-details[open]>summary{color:var(--accent)}
.detail-body{padding:4px 0 0}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;list-style:none;padding:0;margin:0 0 24px}.detail-grid>li{display:flex;align-items:flex-start;gap:12px;padding:15px;border:1px solid #343943;background:#191c2866;min-width:0}.detail-grid>li>span{flex:none;font:21px/1 Anton,Impact,sans-serif;color:var(--accent);padding-top:2px}.detail-grid>li>div{min-width:0}.detail-grid h3{font:750 15px/1.35 Archivo,system-ui,sans-serif;margin:0 0 7px;color:var(--paper)}.detail-grid p{font-size:13px;line-height:1.65;color:#bec4d1;margin:0;overflow-wrap:anywhere}.detail-body a{color:#e8edf7;text-underline-offset:4px}.detail-body strong{color:var(--paper)}.detail-body code{font:11px/1.6 Mono,monospace;overflow-wrap:anywhere;color:#a5c8ff}
.detail-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 18px}.detail-images:has(>.detail-image:only-child){grid-template-columns:minmax(0,1fr);max-width:750px}.detail-image{margin:0;min-width:0}.detail-image>a{display:block;padding:7px;border:1px solid #515660;border-radius:9px;background:linear-gradient(135deg,#33363a,#17191c 55%);transition:border-color .15s}.detail-image>a:hover{border-color:var(--accent)}.detail-image img{width:auto;max-width:100%;height:auto;max-height:500px;margin:0 auto;object-fit:contain;background:#0b0b0c;border-radius:4px}.step-visual .detail-image img{width:100%;height:auto;max-height:none;aspect-ratio:auto;margin:0}.detail-image figcaption{font:10px/1.7 Mono,monospace;color:#aab2c7;margin-top:9px;overflow-wrap:anywhere}.detail-tip{margin:0;padding:12px 15px;border-left:2px solid var(--accent);background:#24283a66;color:#bcc5d9;font-size:13px;line-height:1.65}
.step-copy a.banana-cta{display:grid;grid-template-columns:37px minmax(0,1fr) 17px;align-items:center;gap:12px;width:100%;max-width:340px;margin:22px 0 0;padding:15px 14px;background:linear-gradient(110deg,#cbe74712,transparent 65%),#191c19;border:1px solid #a6b25b70;box-shadow:0 5px 0 #090a09;text-decoration:none;transition:transform .15s,border-color .15s}.banana-cta .banana-mark{display:grid;place-items:center;height:44px;color:#d7e66e;border:1px solid #d7e66e77;font:800 15px/1 Mono,monospace;letter-spacing:-.06em;background:repeating-linear-gradient(0deg,transparent 0 7px,#d7e66e0b 7px 8px)}.banana-cta small,.banana-cta strong,.banana-cta em{display:block}.banana-cta small{font:8px/1.5 Mono,monospace;letter-spacing:.055em;color:#bac48f;margin-bottom:4px}.banana-cta strong{font:800 17px/1.25 Archivo,system-ui,sans-serif;color:var(--paper)}.banana-cta em{font:11px/1.5 Archivo,system-ui,sans-serif;color:#bac48f;font-style:normal;margin-top:5px}.banana-cta>b{font:24px/1 Archivo,Arial,sans-serif;color:#d7e66e}.step-copy a.banana-cta:hover{border-color:#d7e66e;transform:translateY(-2px)}
.banana-guide .mod-intro h1{font-size:clamp(43px,5.65vw,70px);line-height:1.04;letter-spacing:.005em}.banana-guide .mod-kicker{color:#d7e66e}.banana-context>span{font:9px Mono,monospace;width:27px;height:27px;flex:none;color:#d7e66e;border-color:#a6b25b}.banana-context p{max-width:77ch}
@media(max-width:950px){.step-details{margin-left:24px;margin-right:24px}.detail-grid{gap:12px}.detail-grid>li{padding:13px;gap:10px}.detail-grid h3{font-size:14px}.detail-images{gap:13px}.banana-guide .mod-hero{gap:25px}.banana-guide .mod-intro h1{font-size:clamp(39px,5.5vw,58px)}}
@media(max-width:720px){.step-details{margin:0 19px 22px}.step-details>summary{flex-wrap:wrap;gap:5px 10px;min-height:59px}.step-details>summary small{font-size:9px}.detail-grid{grid-template-columns:1fr;gap:10px;margin-bottom:19px}.detail-grid>li{padding:13px}.detail-grid h3{font-size:14px}.detail-grid p{font-size:13px}.detail-images{grid-template-columns:1fr;gap:19px}.detail-image img{aspect-ratio:auto;max-height:500px}.detail-image figcaption{font-size:9px}.detail-tip{font-size:12px;padding:11px 12px}.step-copy a.banana-cta{max-width:none;grid-template-columns:32px minmax(0,1fr) 14px;gap:10px;padding:13px 11px}.banana-cta strong{font-size:16px}.banana-cta .banana-mark{height:39px;font-size:13px}.banana-cta small{font-size:7px}.banana-guide .mod-intro h1{font-size:clamp(38px,8.5vw,55px)}.banana-guide .mod-intro h1 br{display:block}.banana-guide .mod-tapes{gap:10px}.banana-guide .tape{width:calc((100% - 30px)/4)}.banana-guide .tape b{font-size:14px}.banana-guide .tape span{font-size:7px}}
@media(max-width:370px){.step-details{margin-left:14px;margin-right:14px}.step-details>summary{align-items:flex-start;flex-direction:column}.step-details>summary small{margin-left:33px;text-align:left}.banana-guide .mod-intro h1{font-size:38px}.banana-cta strong{font-size:14px}}
@media(max-width:950px){.mod-tapes{gap:10px}.tape{width:73px;height:210px}.tape.cyan{height:188px}.tape.pink{height:200px}.tape.violet{height:174px}.step-main{padding:24px;gap:25px}.mod-step{grid-template-columns:54px 1fr}.step-spine b{font-size:29px}.mod-finish{flex-wrap:wrap}.mod-finish .mod-start{margin-left:75px}}
@media(max-width:720px){.mod-bar{gap:14px;padding:10px 16px;min-height:58px}.mod-brand{font-size:14px;gap:7px}.mod-brand img{width:22px;height:22px}.mod-back{margin-left:0;font-size:10px}.mod-help{font-size:10px;padding-right:8px;gap:5px}.mod-help img{width:25px;height:25px}.mod-guide main,.mod-footer{padding-left:17px;padding-right:17px}.mod-hero{grid-template-columns:1fr;gap:21px;padding:28px 0 26px}.mod-intro h1 br{display:none}.mod-intro h1{font-size:56px}.mod-intro>p:not(.mod-kicker){font-size:16px;margin:15px 0}.mod-intro>p:not(.mod-kicker) br{display:none}.mod-tapes{justify-content:flex-start;padding:16px 0 8px;gap:12px}.tape{height:114px;width:calc((100% - 36px)/4);border-width:5px;border-top-width:21px;border-bottom-width:24px;padding:7px 3px;max-width:115px}.tape.cyan{height:106px}.tape.pink{height:110px}.tape.violet{height:99px}.tape b{font-size:15px;writing-mode:horizontal-tb;transform:none;display:flex;align-items:center;text-align:center;line-height:1.12}.tape small{top:-18px;font-size:10px}.tape span{bottom:-19px;font-size:8px}.mod-caution{align-items:flex-start;font-size:11px;padding:15px 0;gap:10px}.mod-caution small{display:none}.mod-step{grid-template-columns:38px 1fr;scroll-margin-top:74px}.step-spine{padding:23px 0;gap:16px}.step-spine b{font-size:27px}.step-spine span{font-size:9px}.step-main{grid-template-columns:1fr;padding:23px 19px;gap:24px}.step-copy h2{font-size:30px}.step-copy p{font-size:15px;margin-bottom:13px}.step-copy .mod-start{max-width:none;min-height:46px}.step-visual figcaption{font-size:9px}.install-file{padding:21px 17px;gap:12px}.install-file b{font-size:17px}.install-pick{margin-left:17px;margin-right:17px;font-size:13px;padding:12px}.install-pick span{font-size:9px}.window-title{font-size:10px}.folder-tree{font-size:12px;padding:18px 13px}.folder-path{padding:12px;font-size:10px}.folder-footer{font-size:10px;padding:10px 13px}.folder-tools{font-size:11px}.key-scene{padding:22px 15px}.key-scene kbd{height:78px;width:111px;font-size:34px}.mod-finish{padding:21px 17px;gap:12px}.mod-finish img{width:43px;height:43px}.mod-finish h2{font-size:18px}.mod-finish p{font-size:12px}.mod-finish .mod-start{margin-left:0;width:100%;font-size:12px;min-height:45px}.mod-extras summary{font-size:14px;padding:19px 0;line-height:1.5}.extra-content{padding:0 0 19px;font-size:13px}.mod-footer{font-size:10px}}
@media(max-width:370px){.mod-brand span{font-size:12px}.mod-back{display:none}.mod-intro h1{font-size:49px}.step-main{padding:21px 14px}.step-copy h2{font-size:27px}.install-pick span{display:none}.folder-tree .folder-file{font-size:10px}}
@media(prefers-reduced-motion:reduce){.mod-guide *{transition:none!important;animation:none!important}.tape:hover,.mod-start:hover{transform:none}}