:root{--reel-ink:#17221f;--reel-paper:#f4f1e8;--reel-muted:#737d75;--reel-line:#d9ddd2;--reel-acid:#dbf36a;--reel-coral:#f18b68;--reel-blue:#9ed2d1;--reel-dark:#172521}
body.habab-reels-page{background:var(--reel-paper);color:var(--reel-ink);font-family:Manrope,Arial,sans-serif}
.reels-header{max-width:1440px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 42px;margin:0 auto;border-bottom:1px solid var(--reel-line)}.reels-header .brand{color:var(--reel-ink);font-size:.9rem;font-weight:800;letter-spacing:.08em;text-decoration:none}.reels-header .brand span{display:block;font-size:.62rem;font-weight:500;letter-spacing:.03em;color:#778178}.reels-header nav{display:flex;gap:22px}.reels-header nav a{font-size:.82rem;color:#536057;text-decoration:none}
.reels-shell{max-width:1440px;padding:34px 42px 74px;margin:0 auto}
.reels-heading{max-width:740px;padding:0 0 35px 12px}.reels-back{display:inline-block;margin-bottom:31px;color:#59645c;font-size:.82rem;text-decoration:none}.reels-kicker,.index-label,.note-label,.player-topline,.portrait-top,.portrait-bottom,.timeline-labels,.duration-label,.format-label{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}
.reels-kicker{font-size:.68rem;color:#728078;margin:0 0 13px}.reels-heading h1{font-size:clamp(3rem,7vw,6.6rem);letter-spacing:-.085em;line-height:.9;margin:0;font-weight:700}.reels-heading h1 em{font-weight:500;color:#7a857a}.reels-lede{font-size:1rem;line-height:1.65;color:#5f6c64;max-width:540px;margin:23px 0 0}
.reels-workbench{display:grid;grid-template-columns:minmax(170px, .76fr) minmax(400px,1.42fr) minmax(230px,.9fr);gap:26px;align-items:start;border-top:1px solid var(--reel-line);padding-top:25px}
.reels-index{padding-top:3px}.index-label,.note-label{font-size:.63rem;color:#718078;margin:0 0 14px}.reel-list{display:grid;gap:8px}.reel-choice{width:100%;border:1px solid transparent;background:transparent;text-align:left;padding:12px 13px;display:grid;grid-template-columns:35px 1fr;gap:10px;cursor:pointer;color:var(--reel-ink);border-radius:3px;font:inherit}.reel-choice:hover{background:#eaece2}.reel-choice[aria-current="true"]{background:var(--reel-dark);color:#f5f3eb}.choice-no{font:500 .7rem 'DM Mono',monospace;color:#87938a;padding-top:3px}.reel-choice[aria-current="true"] .choice-no{color:var(--reel-acid)}.choice-title{font-weight:700;font-size:.84rem;line-height:1.3}.choice-meta{grid-column:2;color:#89948b;font: .62rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em}.index-note{font-size:.72rem;color:#778178;line-height:1.55;margin:18px 10px 0 13px}
.reel-player{min-width:0}.player-topline{height:28px;display:flex;align-items:center;justify-content:space-between;font-size:.62rem;color:#778078}.illustration-mark{display:flex;align-items:center;gap:7px}.illustration-mark i{width:7px;height:7px;background:var(--reel-coral);border-radius:50%;display:inline-block}
.portrait-frame{--frame-accent:var(--reel-acid);position:relative;width:min(100%,460px);aspect-ratio:9/16;margin:0 auto;background:#24332e;overflow:hidden;color:#f3f0e7;display:flex;flex-direction:column;isolation:isolate}.portrait-frame:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 44%,#495a4b 0,#2b3a34 43%,#1b2824 100%)}
.portrait-top,.portrait-bottom{padding:21px 22px 0;display:flex;align-items:center;justify-content:space-between;font-size:.58rem;letter-spacing:.12em;color:#c3ccbe}.frame-time{color:var(--frame-accent)}.house-scene{position:absolute;inset:12% 4% 20%;display:flex;align-items:center;justify-content:center}.house-scene svg{width:100%;height:100%;overflow:visible}.scene-caption{position:absolute;bottom:8%;left:22px;right:22px;min-height:72px;border-top:1px solid #80908466;padding-top:14px;display:grid;grid-template-columns:48px 1fr;gap:9px;align-items:start}.scene-caption span{font: .61rem 'DM Mono',monospace;color:var(--frame-accent);padding-top:4px}.scene-caption strong{font-size:clamp(.85rem,2.1vw,1.12rem);line-height:1.3;max-width:290px}.portrait-bottom{position:absolute;bottom:18px;left:0;right:0;padding:0 22px;font-size:.5rem;color:#8e9c90}
.scene-svg .room{fill:#34463e;stroke:#aebcaa;stroke-width:2}.scene-svg .room-label{fill:#d7ded3;font:500 15px 'DM Mono',monospace;letter-spacing:1px}.scene-svg .zone{fill:#dbf36a;fill-opacity:.14;stroke:#dbf36a;stroke-opacity:.9;stroke-width:2;stroke-dasharray:5 6}.scene-svg .person{fill:#f1efe2;stroke:#182622;stroke-width:3}.scene-svg .person-detail{fill:none;stroke:#f1efe2;stroke-width:6;stroke-linecap:round}.scene-svg .person-group{transition:transform .45s ease}.scene-svg .device{fill:#1d2b27;stroke:#cbd4c9;stroke-width:2}.scene-svg .device-active{fill:#dff36e;stroke:#f7ffd5;filter:drop-shadow(0 0 9px #def36c99)}.scene-svg .device-alert{fill:#f18b68;stroke:#ffe1d5;filter:drop-shadow(0 0 9px #f18b6899)}.scene-svg .wire{stroke:#dff36e;stroke-width:2;stroke-dasharray:6 7;fill:none;opacity:.95}.scene-svg .bubble{fill:#f2f0e6;stroke:#26332d;stroke-width:2}.scene-svg .bubble-text{fill:#1a2823;font:600 14px Manrope,Arial,sans-serif}.scene-svg .device-text{fill:#e3e9dd;font:500 12px 'DM Mono',monospace}.scene-svg .signal{stroke:#dbf36a;stroke-width:3;fill:none;stroke-dasharray:4 4}
.scene-svg .pet-group{fill:#f18b68;stroke:#182622;stroke-width:3;stroke-linejoin:round;transition:transform .45s ease}.scene-svg .door{fill:none;stroke:#bbc8b6;stroke-width:5}.scene-svg .door-open{stroke:#f18b68;filter:drop-shadow(0 0 7px #f18b6899)}
body.habab-reels-page{margin:0}
.player-controls{max-width:460px;margin:14px auto 0;display:grid;grid-template-columns:42px 34px 1fr 45px;gap:8px;align-items:center}.play-button,.icon-button{height:36px;border:1px solid #bfc8bc;border-radius:50%;background:transparent;color:var(--reel-ink);cursor:pointer;font-size:.85rem}.play-button{background:var(--reel-dark);border-color:var(--reel-dark);color:var(--reel-acid)}.icon-button{font-size:1.25rem}.timeline-wrap{min-width:0}.timeline-wrap input{width:100%;accent-color:#25372f;cursor:pointer;height:14px}.timeline-labels{display:flex;justify-content:space-between;font-size:.52rem;color:#7c877e;gap:4px}.duration-label{font-size:.58rem;text-align:right;color:#788379}
.scene-jumps{display:flex;gap:6px;max-width:460px;margin:12px auto 0;overflow:auto;padding-bottom:4px}.scene-jump{border:1px solid var(--reel-line);background:transparent;border-radius:20px;padding:6px 9px;white-space:nowrap;color:#536057;font: .61rem 'DM Mono',monospace;cursor:pointer}.scene-jump[aria-current="true"]{background:#dce8b2;border-color:#c2d58a;color:#233129}
.reel-notes{border-left:1px solid var(--reel-line);padding:3px 0 4px 20px}.reel-notes h2{font-size:1.45rem;line-height:1.1;letter-spacing:-.045em;margin:0 0 9px}.reel-hook{font-size:.84rem;line-height:1.55;color:#5f6a62;margin:0 0 24px}.script-block{border-top:1px solid var(--reel-line);padding:14px 0}.script-block h3{margin:0 0 8px;font:500 .61rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:#778178}.script-block p{font-size:.8rem;line-height:1.6;margin:0}.subtitle-block ol{padding:0;margin:0;list-style:none;display:grid;gap:7px}.subtitle-block li{display:grid;grid-template-columns:38px 1fr;gap:7px;font-size:.75rem;line-height:1.4;color:#59655d}.subtitle-block time{font: .6rem 'DM Mono',monospace;color:#879087;padding-top:2px}.script-meta{display:grid;gap:5px;border-top:1px solid var(--reel-line);padding-top:12px;font: .58rem 'DM Mono',monospace;text-transform:uppercase;color:#788278;line-height:1.4}
.reels-disclosure{display:flex;gap:13px;max-width:820px;margin:38px auto 0;padding:15px 19px;background:#e8ebe0;color:#526057}.disclosure-icon{flex:0 0 23px;height:23px;border-radius:50%;background:#34463c;color:#e6f37c;text-align:center;font:700 .8rem/23px Manrope}.reels-disclosure p{font-size:.75rem;line-height:1.55;margin:0}.reels-disclosure strong{color:#26342d}
.story-cta{display:inline-flex;align-items:center;margin-top:14px;padding:10px 12px;background:var(--reel-dark);color:var(--reel-acid);text-decoration:none;font-size:.7rem;font-weight:700;line-height:1.35}.story-cta:hover{background:#2e463b}
.advertising-reels-link{display:inline-flex;padding:9px 13px;background:#e8efe0;color:#24352d;font-size:.86rem;font-weight:700;text-decoration:none}.advertising-reels-link:hover{background:#d8e6ca}
.habab-reels-page .footer{max-width:1440px;margin:0 auto;display:flex;flex-wrap:wrap;gap:22px;padding:22px 42px;border-top:1px solid var(--reel-line);font-size:.74rem;color:#718078}.habab-reels-page .footer a{color:#536057;text-decoration:none}
@media(max-width:980px){.reels-shell{padding:26px 25px 56px}.reels-workbench{grid-template-columns:minmax(150px,.72fr) minmax(360px,1.3fr);gap:18px}.reel-notes{grid-column:1/-1;border-left:0;border-top:1px solid var(--reel-line);padding:20px 0 0;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:14px 24px}.reel-notes>.note-label{grid-column:1/-1;margin-bottom:-8px}.reel-notes h2{grid-column:1}.reel-hook{grid-column:1}.script-block:first-of-type{grid-column:2;grid-row:2/4;border-top:0;padding-top:0}.subtitle-block{grid-column:3;grid-row:2/4;border-top:0;padding-top:0}.script-meta{grid-column:1/-1;display:flex;gap:24px}}
@media(max-width:650px){.reels-shell{padding:20px 17px 45px}.reels-heading{padding:0 0 24px 2px}.reels-back{margin-bottom:24px}.reels-heading h1{font-size:clamp(3.1rem,16vw,5.1rem)}.reels-lede{font-size:.9rem;margin-top:17px}.reels-workbench{display:flex;flex-direction:column;gap:17px;padding-top:17px}.reels-index{width:100%}.index-label{margin-bottom:8px}.reel-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.reel-choice{padding:8px 8px;grid-template-columns:30px 1fr;gap:6px;min-height:62px}.choice-title{font-size:.74rem}.choice-meta{font-size:.55rem}.index-note{display:none}.reel-player{width:100%}.player-topline{height:25px}.portrait-frame{width:min(100%,390px)}.player-controls,.scene-jumps{width:min(100%,390px)}.reel-notes{display:block;width:100%;padding-top:18px}.reel-notes h2{font-size:1.4rem}.reel-hook{margin-bottom:18px}.script-block:first-of-type{border-top:1px solid var(--reel-line);padding-top:14px}.subtitle-block{padding-top:14px}.script-meta{display:grid;gap:5px}.reels-disclosure{margin-top:25px;padding:13px 14px}.reels-header{padding:12px 17px}.reels-header nav{gap:12px}.reels-header nav a{font-size:.73rem}.habab-reels-page .footer{padding:18px 17px;gap:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Recording mode: open with ?record=1&reel=01&autoplay=0 in a 1080×1920 viewport. */
html.reel-record-mode,html.reel-record-mode body{width:1080px!important;height:1920px!important;min-width:1080px!important;min-height:1920px!important;overflow:hidden!important;background:#1b2824!important;margin:0!important}
html.reel-record-mode .reels-header,html.reel-record-mode .reels-heading,html.reel-record-mode .reels-index,html.reel-record-mode .reel-notes,html.reel-record-mode .reels-disclosure,html.reel-record-mode .footer,html.reel-record-mode .player-topline,html.reel-record-mode .player-controls,html.reel-record-mode .scene-jumps{display:none!important}
html.reel-record-mode body>.page-shell{width:1080px!important;height:1920px!important;max-width:none!important;padding:0!important;margin:0!important;gap:0!important}
html.reel-record-mode .reels-shell{width:1080px!important;height:1920px!important;max-width:none!important;padding:0!important;margin:0!important}
html.reel-record-mode .reels-workbench{display:block!important;border:0!important;padding:0!important;margin:0!important}
html.reel-record-mode .reel-player{width:1080px!important;height:1920px!important}
html.reel-record-mode .portrait-frame{width:1080px!important;height:1920px!important;max-width:none!important;aspect-ratio:auto!important;margin:0!important}
html.reel-record-mode .portrait-top{padding:72px 72px 0;font-size:26px}
html.reel-record-mode .house-scene{inset:12% 5% 22%}
html.reel-record-mode .scene-caption{left:72px;right:72px;bottom:8%;min-height:190px;padding-top:35px;grid-template-columns:115px 1fr;gap:20px}
html.reel-record-mode .scene-caption span{font-size:22px;padding-top:12px}
html.reel-record-mode .scene-caption strong{font-size:48px;max-width:760px}
html.reel-record-mode .portrait-bottom{bottom:60px;padding:0 72px;font-size:20px}