/* Brother & Sister Story: a bright archival system, separate from the
   romantic/cinematic Love Page. Display type is compact and bureaucratic;
   personal notes switch to a bookish serif. */
.sib-scope{--sib-paper:#f4f0e5;--sib-ink:#17233c;--sib-accent:#ff5b35;--sib-theme-accent:#ff5b35;--sib-second:#2962ff;--sib-soft:#ffd95a;box-sizing:border-box;width:100vw;margin:-1.5rem 0 0 calc(50% - 50vw);overflow:clip;color:var(--sib-ink);background:var(--sib-paper);font-family:"Trebuchet MS","Segoe UI",sans-serif;line-height:1.65}
.sib-scope *,.sib-scope *:before,.sib-scope *:after{box-sizing:border-box}
.sib-scope h1,.sib-scope h2,.sib-scope h3,.sib-scope p{margin-top:0}
.sib-scope h1,.sib-scope h2,.sib-scope h3{font-family:"Arial Black","Trebuchet MS",sans-serif;letter-spacing:-.045em;line-height:.98}
.sib-scope a{color:inherit}.sib-scope button,.sib-scope input,.sib-scope textarea,.sib-scope select{font:inherit}
.sib-eyebrow,.sib-chapter,.sib-module-label{display:block;margin-bottom:1rem;font-size:.76rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.sib-button{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:3.4rem;padding:.8rem 1.25rem;border:2px solid var(--sib-ink);border-radius:0;color:var(--sib-ink);font-weight:900;text-decoration:none;box-shadow:6px 6px 0 var(--sib-ink);transition:transform .18s,box-shadow .18s}.sib-button:hover{color:var(--sib-ink);transform:translate(3px,3px);box-shadow:3px 3px 0 var(--sib-ink)}
.sib-button-primary{background:var(--sib-soft)}.sib-button-dark{background:var(--sib-ink);color:var(--sib-paper);border-color:var(--sib-ink);box-shadow:6px 6px 0 var(--sib-accent)}.sib-button-dark:hover{color:var(--sib-paper)}
.sib-back,.sib-text-link{font-weight:900;text-decoration-thickness:2px;text-underline-offset:4px}
.sib-alert{max-width:1180px;margin:1rem auto;padding:1rem 1.25rem;border:2px solid #a42424;background:#fff0ea;font-weight:700}.sib-alert-success{border-color:#23633b;background:#e7f6e8}

/* Hub */
.sib-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.9fr);gap:5vw;align-items:center;min-height:690px;padding:6rem max(5vw,calc((100vw - 1240px)/2));background-color:var(--sib-paper);background-image:linear-gradient(rgba(23,35,60,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(23,35,60,.055) 1px,transparent 1px);background-size:36px 36px;border-bottom:3px solid var(--sib-ink)}
.sib-hero:before{content:"ARCHIVE 12";position:absolute;top:2rem;right:4vw;font:900 .72rem/1 "Trebuchet MS",sans-serif;letter-spacing:.2em;writing-mode:vertical-rl}
.sib-hero-copy{position:relative;z-index:2}.sib-hero-copy h1{max-width:730px;font-size:clamp(3.2rem,6.2vw,6.8rem)}.sib-hero-lead{max-width:660px;font-size:clamp(1.05rem,1.5vw,1.32rem)}
.sib-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin:2rem 0}.sib-proof{display:flex;gap:.7rem 1.5rem;flex-wrap:wrap;padding:0;list-style:none;font-size:.85rem;font-weight:900;text-transform:uppercase}.sib-proof li:before{content:"✓";margin-right:.4rem;color:var(--sib-second)}
.sib-hero-archive{position:relative;min-height:500px;filter:drop-shadow(0 24px 22px rgba(23,35,60,.18))}.sib-folder{position:absolute;width:310px;height:360px;padding:3.4rem 2rem 2rem;border:3px solid var(--sib-ink);box-shadow:12px 12px 0 var(--sib-ink)}.sib-folder:before{content:"";position:absolute;top:-35px;left:-3px;width:130px;height:35px;border:3px solid var(--sib-ink);border-bottom:0;background:inherit}.sib-folder small,.sib-folder span{display:block;font-weight:900;letter-spacing:.12em}.sib-folder strong{display:block;margin:4rem 0 1rem;font:900 4rem/1 "Arial Black",sans-serif}.sib-folder-then{top:72px;left:10px;transform:rotate(-7deg);background:var(--sib-second);color:#fff}.sib-folder-now{top:34px;right:0;transform:rotate(8deg);background:var(--sib-accent)}
.sib-thread{position:absolute;z-index:5;right:8%;bottom:90px;width:92%;height:110px;border-bottom:12px solid var(--sib-soft);border-radius:50%;transform:rotate(-8deg)}.sib-thread:after{content:"";position:absolute;right:8%;bottom:-25px;width:46px;height:46px;border:9px double var(--sib-ink);border-radius:50%;background:var(--sib-accent)}
.sib-sticker{position:absolute;z-index:7;display:grid;place-items:center;width:92px;height:92px;border:3px solid var(--sib-ink);border-radius:50%;background:var(--sib-soft);font-weight:900;text-align:center;line-height:1.05}.sib-sticker-one{top:0;left:28%;transform:rotate(13deg)}.sib-sticker-two{right:2%;bottom:8px;background:#fff;transform:rotate(-9deg)}.sib-case-label{position:absolute;z-index:8;bottom:0;left:17%;padding:.65rem 1rem;background:var(--sib-ink);color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.15em;transform:rotate(2deg)}
.sib-band{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;padding:1.2rem max(4vw,calc((100vw - 1240px)/2));border-bottom:3px solid var(--sib-ink);background:var(--sib-soft)}.sib-band>div{margin-right:auto}.sib-band span,.sib-band strong{display:block}.sib-band>div span{font-size:.68rem;font-weight:900;letter-spacing:.14em}.sib-direction{padding:.45rem .75rem;border:2px solid var(--sib-ink);background:var(--sib-paper);font-size:.78rem;font-weight:900}
.sib-section,.sib-how,.sib-more{max-width:1280px;margin:0 auto;padding:7rem 2rem}.sib-section-head{max-width:780px;margin-bottom:3rem}.sib-section-head h2,.sib-feature-intro h2{font-size:clamp(2.4rem,4.2vw,4.8rem)}.sib-section-head p{max-width:650px;font-size:1.08rem}
.sib-occasion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.sib-occasion-card{position:relative;min-height:320px;padding:1.4rem;border:3px solid var(--sib-ink);background:#fff;text-decoration:none;box-shadow:7px 7px 0 var(--sib-ink);transition:transform .2s,background .2s}.sib-occasion-card:hover{color:var(--sib-ink);transform:translate(-4px,-4px);background:color-mix(in srgb,var(--occasion) 14%,#fff)}.sib-file-no{display:block;padding-bottom:1rem;border-bottom:2px dashed var(--sib-ink);font-size:.7rem;font-weight:900;letter-spacing:.14em}.sib-occasion-card i{display:block;margin:2.4rem 0 1.2rem;font-style:normal;font-size:2.2rem}.sib-occasion-card h3{font-size:1.55rem}.sib-occasion-card b{position:absolute;bottom:1.2rem;left:1.4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.sib-feature-spread{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;padding:7rem max(5vw,calc((100vw - 1280px)/2));background:var(--sib-ink);color:var(--sib-paper)}.sib-feature-intro{align-self:start;position:sticky;top:2rem}.sib-feature-intro p{max-width:500px;font-size:1.1rem}.sib-file-stack{display:grid;gap:.8rem}.sib-file-stack article{display:grid;grid-template-columns:70px 1fr;gap:1rem;align-items:center;padding:1.5rem;border:2px solid var(--sib-paper);background:rgba(255,255,255,.04);transition:transform .2s,background .2s}.sib-file-stack article:hover{transform:translateX(-8px);background:rgba(255,255,255,.1)}.sib-file-stack article>b{font-size:1.4rem;color:var(--sib-soft)}.sib-file-stack h3{margin-bottom:.4rem;font-size:1.5rem}.sib-file-stack p{margin:0;color:rgba(244,240,229,.75)}
.sib-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.sib-how-grid article{padding-top:1.5rem;border-top:5px solid var(--sib-accent)}.sib-how-grid article:nth-child(2){border-color:var(--sib-second)}.sib-how-grid article:nth-child(3){border-color:var(--sib-soft)}.sib-how-grid article>span{display:grid;place-items:center;width:42px;height:42px;margin-bottom:1.5rem;border:2px solid var(--sib-ink);border-radius:50%;font-weight:900}.sib-how-grid h3{font-size:1.4rem}
.sib-final-cta{padding:7rem 2rem;text-align:center;background:var(--sib-second);color:#fff;border-top:3px solid var(--sib-ink)}.sib-final-cta>span{font-size:.72rem;font-weight:900;letter-spacing:.18em}.sib-final-cta h2{max-width:900px;margin:1rem auto 2rem;font-size:clamp(2.7rem,5vw,5.8rem)}.sib-final-cta .sib-button{color:var(--sib-ink)}

/* Shared SEO blocks are deliberately restyled to belong to the product. */
.sib-scope .pwb-seo-content,.sib-scope .pwb-faq{max-width:1160px;margin:0 auto;padding:4rem 2rem}.sib-scope .pwb-content-block{margin-bottom:2rem;padding:2rem;border-left:7px solid var(--sib-second);background:rgba(255,255,255,.55)}.sib-scope .pwb-content-block h2{font-size:2rem}.sib-scope .pwb-content-block .lead{font-size:1.15rem}.sib-scope .pwb-content-block table{width:100%;border-collapse:collapse}.sib-scope .pwb-content-block th,.sib-scope .pwb-content-block td{padding:.75rem;border:1px solid rgba(23,35,60,.25);text-align:left}.sib-scope .accordion-item{border:2px solid var(--sib-ink);border-radius:0!important;background:transparent}.sib-scope .accordion-button{background:var(--sib-paper);color:var(--sib-ink);font-weight:900}.sib-scope .accordion-button:not(.collapsed){background:var(--sib-soft);color:var(--sib-ink)}

/* Occasion landing */
.sib-occasion-hero{display:grid;grid-template-columns:1.05fr .75fr;gap:6vw;align-items:center;min-height:620px;padding:6rem max(5vw,calc((100vw - 1240px)/2));border-bottom:3px solid var(--sib-ink);background:radial-gradient(circle at 90% 0,color-mix(in srgb,var(--sib-accent) 22%,transparent),transparent 35%),var(--sib-paper)}.sib-occasion-hero h1{margin-top:2rem;font-size:clamp(3rem,5.8vw,6.4rem)}.sib-occasion-hero p{max-width:700px;font-size:1.18rem}.sib-quiet{font-size:.82rem;font-weight:900}
.sib-occasion-file{position:relative;min-height:390px;padding:5rem 2.5rem 2rem;border:3px solid var(--sib-ink);background:#fff;box-shadow:14px 14px 0 var(--sib-ink);transform:rotate(3deg)}.sib-occasion-tab{position:absolute;top:-38px;left:-3px;padding:.6rem 1rem;border:3px solid var(--sib-ink);border-bottom:0;background:var(--sib-accent);font-size:.72rem;font-weight:900;letter-spacing:.12em}.sib-occasion-emoji{position:absolute;top:1.4rem;right:1.5rem;font-size:3rem}.sib-occasion-file small,.sib-occasion-file i{display:block;font-weight:900;letter-spacing:.13em}.sib-occasion-file strong{display:block;margin:.5rem 0 2rem;font:900 clamp(2.2rem,4vw,4rem)/.95 "Arial Black",sans-serif}.sib-occasion-file p{font:italic 1.35rem/1.4 Georgia,serif}.sib-occasion-file i{position:absolute;bottom:1.5rem;font-style:normal;font-size:.7rem}
.sib-direction-picker{display:grid;grid-template-columns:.7fr 1.3fr;gap:4rem;align-items:center;padding:5rem max(5vw,calc((100vw - 1240px)/2));background:var(--sib-ink);color:var(--sib-paper)}.sib-direction-picker h2{font-size:2.5rem}.sib-direction-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.sib-direction-grid a{padding:1rem;border:2px solid var(--sib-paper);text-decoration:none;text-align:center}.sib-direction-grid a:hover{background:var(--sib-soft);color:var(--sib-ink)}.sib-direction-grid b{display:block;font-size:1.5rem}.sib-direction-grid span{font-size:.72rem;font-weight:900}
.sib-occasion-blueprint{padding:7rem max(5vw,calc((100vw - 1240px)/2))}.sib-blueprint-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.sib-blueprint-grid article{padding:2rem;border:3px solid var(--sib-ink);background:#fff}.sib-blueprint-grid span{font-size:.7rem;font-weight:900;letter-spacing:.14em;color:var(--sib-accent)}.sib-blueprint-grid h3{margin:2rem 0 1rem;font-size:1.4rem;line-height:1.15}
.sib-more>div:last-child{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.sib-more a{display:grid;grid-template-columns:50px 1fr 30px;gap:1rem;align-items:center;padding:1.2rem;border:2px solid var(--sib-ink);text-decoration:none;background:#fff}.sib-more a:hover{background:color-mix(in srgb,var(--occasion) 15%,#fff)}.sib-more i{font-style:normal;font-size:2rem}.sib-more strong,.sib-more small{display:block}.sib-more small{opacity:.75}

/* Builder */
.sib-builder{min-height:100vh;padding-bottom:6rem;background-color:var(--sib-paper);background-image:linear-gradient(rgba(23,35,60,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,35,60,.045) 1px,transparent 1px);background-size:32px 32px}.sib-builder-head{display:grid;grid-template-columns:180px 1fr;gap:2rem;padding:3rem max(4vw,calc((100vw - 1320px)/2));border-bottom:3px solid var(--sib-ink);background:var(--sib-paper)}.sib-builder-head>div:nth-child(2){max-width:850px}.sib-builder-head h1{font-size:clamp(2.4rem,4vw,4.6rem)}.sib-builder-progress{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:1rem;border-top:2px solid var(--sib-ink)}.sib-builder-progress span{padding:.8rem .2rem;border-top:8px solid transparent;font-size:.72rem;font-weight:900;opacity:.4}.sib-builder-progress span.is-active{border-top-color:var(--sib-second);opacity:1}.sib-builder-progress b{display:block;font-size:.9rem}
.sib-builder-grid{display:grid;grid-template-columns:minmax(0,780px) minmax(310px,400px);gap:3rem;justify-content:center;align-items:start;padding:4rem 2rem}.sib-builder-form{min-width:0}.sib-builder-panel{display:none;padding:2.3rem;border:3px solid var(--sib-ink);background:#fff;box-shadow:10px 10px 0 var(--sib-ink)}.sib-builder-panel.is-current{display:block;animation:sibPanel .28s ease both}@keyframes sibPanel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.sib-builder-panel h2{font-size:clamp(2.1rem,4vw,3.6rem)}.sib-builder-panel>p{max-width:650px}.sib-chapter{color:var(--sib-second)}
.sib-relation-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:2rem 0}.sib-relation-options input,.sib-theme-choice input,.sib-reaction-row input{position:absolute;opacity:0;pointer-events:none}.sib-relation-options label span{display:grid;place-items:center;min-height:115px;padding:.8rem;border:2px solid var(--sib-ink);cursor:pointer;text-align:center}.sib-relation-options label b{font-size:1.4rem}.sib-relation-options label strong{font-size:.72rem}.sib-relation-options input:checked+span{background:var(--sib-soft);box-shadow:4px 4px 0 var(--sib-ink)}
.sib-fields{display:grid;gap:1rem}.sib-fields.two{grid-template-columns:repeat(2,1fr)}.sib-fields label,.sib-full-label,.sib-award-fields label,.sib-add-memory label{display:grid;gap:.45rem;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.sib-fields input,.sib-fields select,.sib-full-label input,.sib-full-label textarea,.sib-award-fields input,.sib-award-fields textarea,.sib-add-memory input,.sib-add-memory select,.sib-reply-field input,.sib-reply-field textarea{width:100%;padding:.8rem;border:2px solid var(--sib-ink);border-radius:0;background:#fff;color:#17233c;text-transform:none;letter-spacing:normal;outline:none}.sib-fields input:focus,.sib-fields select:focus,.sib-full-label input:focus,.sib-full-label textarea:focus,.sib-award-fields input:focus,.sib-award-fields textarea:focus,.sib-reply-field input:focus,.sib-reply-field textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--sib-second) 28%,transparent)}.sib-full-label{margin-top:1.3rem}.sib-full-label textarea,.sib-award-fields textarea{resize:vertical;line-height:1.55}.sib-full-label textarea{font-family:Georgia,serif;font-size:1rem}.sib-award-fields{display:grid;grid-template-columns:.75fr 1.25fr;gap:1rem;margin-bottom:1.3rem}
.sib-theme-set{margin:2rem 0;border:0;padding:0}.sib-theme-set legend{font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.sib-theme-set>div{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.sib-theme-choice{--demo-paper:#f4f0e5;--demo-ink:#17233c;--demo-accent:#ff5b35;--demo-second:#2962ff;display:grid;grid-template-columns:90px 1fr;gap:.7rem;padding:.8rem;border:2px solid var(--sib-ink);cursor:pointer}.sib-theme-choice strong,.sib-theme-choice small{grid-column:2}.sib-theme-choice small{line-height:1.3}.sib-theme-choice:has(input:checked){box-shadow:5px 5px 0 var(--sib-ink);background:var(--sib-soft)}.sib-theme-demo{grid-row:1/3;display:flex;align-items:end;gap:5px;padding:.5rem;background:var(--demo-paper);border:2px solid var(--demo-ink)}.sib-theme-demo i{display:block;width:28%;height:55%;background:var(--demo-accent)}.sib-theme-demo i:nth-child(2){height:82%;background:var(--demo-second)}.sib-theme-demo i:nth-child(3){height:68%;background:var(--demo-ink)}.sib-theme-film-file{--demo-paper:#eee9da;--demo-ink:#20281f;--demo-accent:#b6482a;--demo-second:#65735b}.sib-theme-pixel-squad{--demo-paper:#11152b;--demo-ink:#f8f2df;--demo-accent:#ff4f8b;--demo-second:#48dcc7}.sib-theme-rakhi-thread{--demo-paper:#fff6e2;--demo-ink:#31204f;--demo-accent:#d9472b;--demo-second:#5636a5}
.sib-upload-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}.sib-upload-pair>div{display:grid;gap:.6rem}.sib-upload{display:grid;place-items:center;min-height:210px;padding:1rem;border:3px dashed var(--sib-ink);background:color-mix(in srgb,var(--sib-soft) 28%,#fff);cursor:pointer;text-align:center}.sib-upload b{font:900 2.1rem/1 "Arial Black",sans-serif}.sib-upload span{font-size:.78rem;font-weight:900}.sib-upload input{max-width:100%;font-size:.76rem}.sib-upload-pair>div>input{padding:.7rem;border:2px solid var(--sib-ink)}.sib-security-note{padding:.8rem;border-left:5px solid var(--sib-second);font-size:.78rem}.sib-publish-note{margin:2rem 0;padding:1rem;border:2px dashed var(--sib-ink);background:color-mix(in srgb,var(--sib-soft) 30%,#fff)}.sib-publish-note p{margin:0}.sib-publish{width:100%}
.sib-builder-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.6rem}.sib-builder-nav button{padding:.6rem 1rem;border:2px solid var(--sib-ink);background:var(--sib-paper);font-weight:900}.sib-builder-nav button:disabled{opacity:.35}.sib-builder-nav span{font-size:.78rem;font-weight:900}
.sib-builder-preview>span{display:block;margin-bottom:.5rem;font-size:.68rem;font-weight:900;letter-spacing:.14em}.sib-preview-slots{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.sib-preview-slots i{position:relative;display:grid;place-items:center;height:92px;overflow:hidden;border:2px solid #fff;background:rgba(255,255,255,.12);font-style:normal;font-weight:900}.sib-preview-slots i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sib-preview-slots i span{position:relative;z-index:2;padding:.18rem .42rem;background:rgba(23,35,60,.72);color:#fff;letter-spacing:.08em}.sib-builder-preview>p{margin:1.7rem 0 0;padding-left:1rem;border-left:4px solid var(--sib-accent);font-size:.82rem}

/* Creator/manage */
.sib-manage,.sib-mine{min-height:100vh;padding:5rem max(3vw,calc((100vw - 1220px)/2));background:var(--sib-paper)}.sib-manage-head{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2.5rem}.sib-manage-head h1,.sib-mine h1{font-size:clamp(2.8rem,5vw,5.5rem)}.sib-share-card{display:grid;grid-template-columns:1fr auto;gap:1.5rem;padding:2rem;border:3px solid var(--sib-ink);background:var(--sib-soft);box-shadow:9px 9px 0 var(--sib-ink)}.sib-share-card span,.sib-share-card strong{display:block}.sib-share-card span{font-size:.68rem;font-weight:900;letter-spacing:.14em}.sib-share-card strong{font-size:1.1rem;overflow-wrap:anywhere}.sib-share-card p{margin:.4rem 0 0}.sib-share-card>button{align-self:center;padding:.8rem 1.2rem;border:2px solid var(--sib-ink);background:#fff;font-weight:900}.sib-share-buttons{grid-column:1/-1;display:flex;gap:.7rem;flex-wrap:wrap}.sib-share-buttons a{padding:.4rem .7rem;border:2px solid var(--sib-ink);background:var(--sib-paper);font-size:.78rem;font-weight:900;text-decoration:none}
.sib-manage-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:3rem 0}.sib-manage-stats article{padding:1.5rem;border-top:5px solid var(--sib-second);background:rgba(255,255,255,.65)}.sib-manage-stats span{font:900 2.3rem/1 "Arial Black",sans-serif}.sib-manage-stats p{margin:.4rem 0 0;font-size:.75rem;font-weight:900;text-transform:uppercase}
.sib-manage-columns{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem}.sib-manage-panel{padding:2rem;border:3px solid var(--sib-ink);background:#fff}.sib-panel-head>span{font-size:.68rem;font-weight:900;letter-spacing:.15em}.sib-panel-head h2{margin:.5rem 0;font-size:2rem}.sib-manage-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.sib-manage-gallery figure{margin:0;border:2px solid var(--sib-ink);background:var(--sib-paper)}.sib-manage-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.sib-manage-gallery figcaption{padding:.7rem}.sib-manage-gallery figcaption b,.sib-manage-gallery figcaption span{display:block}.sib-manage-gallery figcaption b{font-size:.67rem;letter-spacing:.13em}.sib-manage-gallery form{margin-top:.5rem}.sib-manage-gallery button{border:0;background:none;color:#a42424;font-size:.75rem;font-weight:900;text-decoration:underline}.sib-add-memory{display:grid;grid-template-columns:1fr .65fr;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:2px dashed var(--sib-ink)}.sib-add-memory label:nth-child(3),.sib-add-memory button{grid-column:1/-1}.sib-reply-list{display:grid;gap:1rem}.sib-reply-list article{padding:1rem;border:2px solid var(--sib-ink);background:var(--sib-paper)}.sib-reply-list article>div{display:flex;justify-content:space-between}.sib-reply-list article>div span{font-size:1.6rem}.sib-reply-list time{font-size:.68rem;font-weight:900}.sib-reply-list blockquote{margin:1rem 0 0;padding-left:1rem;border-left:4px solid var(--sib-accent);font-family:Georgia,serif}.sib-empty{padding:1.5rem;border:2px dashed var(--sib-ink);background:rgba(255,255,255,.5)}.sib-manage-foot{display:flex;justify-content:space-between;margin-top:3rem;font-weight:900}
.sib-mine header{max-width:850px;margin-bottom:3rem}.sib-mine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.sib-mine-grid article{padding:1.5rem;border:3px solid var(--sib-ink);background:#fff;box-shadow:6px 6px 0 var(--sib-ink)}.sib-mine-grid article>span{font-size:.65rem;font-weight:900;letter-spacing:.12em}.sib-mine-grid h2{margin:1.5rem 0 .7rem;font-size:1.5rem}.sib-mine-grid article>div{display:flex;gap:.5rem;margin:1rem 0}.sib-mine-grid article>div b{padding:.3rem .5rem;background:var(--sib-soft);font-size:.68rem}.sib-mine-grid article>a{font-weight:900}

/* Recipient experience */
.sib-receiver{min-height:100vh;background:var(--sib-paper)}.sib-creator-preview{position:fixed;z-index:50;top:90px;right:1rem;display:flex;gap:.7rem;align-items:center;padding:.65rem .8rem;border:2px solid var(--sib-ink);background:var(--sib-soft);box-shadow:4px 4px 0 var(--sib-ink);font-size:.72rem}.sib-creator-preview a{font-weight:900}.sib-receiver-cover{position:relative;display:grid;place-items:center;align-content:center;min-height:calc(100vh - 70px);padding:5rem 2rem;text-align:center;color:var(--sib-paper);background:var(--sib-ink);overflow:hidden;transition:min-height .5s,opacity .5s}.sib-receiver-cover:before,.sib-receiver-cover:after{content:"";position:absolute;border:2px solid rgba(244,240,229,.35);border-radius:50%}.sib-receiver-cover:before{width:420px;height:420px;left:-180px;top:-160px}.sib-receiver-cover:after{width:520px;height:520px;right:-220px;bottom:-240px}.sib-cover-noise{position:absolute;inset:0;background-image:linear-gradient(rgba(244,240,229,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,240,229,.04) 1px,transparent 1px);background-size:32px 32px}.sib-receiver-cover.is-open{pointer-events:none}
.sib-archive-head{position:relative;padding:8rem max(7vw,calc((100vw - 1000px)/2));border-bottom:3px solid var(--sib-ink);background-image:linear-gradient(rgba(23,35,60,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(23,35,60,.05) 1px,transparent 1px);background-size:34px 34px}.sib-archive-head>span,.sib-archive-head>p{font-size:.7rem;font-weight:900;letter-spacing:.14em}.sib-archive-head>p{position:absolute;top:8rem;right:max(7vw,calc((100vw - 1000px)/2))}.sib-archive-head h1{max-width:900px;margin:3rem 0;font-size:clamp(3.2rem,7vw,7.4rem)}.sib-opening-note{max-width:760px;padding:2rem 0;border-top:3px solid var(--sib-ink);border-bottom:3px solid var(--sib-ink);font:italic clamp(1.15rem,2vw,1.6rem)/1.65 Georgia,serif}.sib-archive-head>small{display:block;margin-top:1rem;font-weight:900}
.sib-module{max-width:1040px;margin:0 auto;padding:8rem 2rem;border-bottom:3px solid var(--sib-ink)}.sib-module h2{font-size:clamp(2.5rem,5vw,5rem)}.sib-module-label{color:var(--sib-second)}[data-reveal]{opacity:0;transform:translateY(35px);transition:opacity .65s,transform .65s}[data-reveal].is-visible{opacity:1;transform:none}
.sib-photo-slot img,.sib-photo-placeholder{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.sib-photo-placeholder{display:grid;place-items:center;background:var(--sib-paper);text-align:center}.sib-photo-slot figcaption{padding:.8rem 0 0;font-family:Georgia,serif;font-style:italic}
.sib-origin p,.sib-chaos p{max-width:760px;font:1.2rem/1.8 Georgia,serif}.sib-chaos{position:relative}.sib-warning{display:inline-block;margin-bottom:1rem;padding:.3rem .7rem;background:var(--sib-accent);color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.12em;transform:rotate(-2deg)}.sib-receiver-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.sib-receiver-gallery figure{margin:0;padding:.8rem;border:3px solid var(--sib-ink);background:#fff}.sib-receiver-gallery figure:nth-child(even){transform:rotate(1.5deg)}.sib-receiver-gallery figure:nth-child(odd){transform:rotate(-1.5deg)}.sib-receiver-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.sib-receiver-gallery figcaption{padding:.7rem .2rem 0;font-family:Georgia,serif}
.sib-redaction{display:block;width:100%;min-height:180px;margin-top:2rem;padding:2rem;border:3px solid var(--sib-ink);background:repeating-linear-gradient(0deg,var(--sib-ink) 0,var(--sib-ink) 22px,#34405a 22px,#34405a 28px);color:#fff}.sib-redaction span{font-size:.72rem;font-weight:900;letter-spacing:.14em}.sib-redaction b{display:none;font:italic 1.35rem/1.65 Georgia,serif}.sib-redaction.is-revealed{background:var(--sib-soft);color:var(--sib-ink)}.sib-redaction.is-revealed span{display:none}.sib-redaction.is-revealed b{display:block}
.sib-award{position:relative;margin-top:7rem;margin-bottom:7rem;padding:6rem 3rem;border:8px double var(--sib-ink);background:color-mix(in srgb,var(--sib-soft) 45%,#fff);text-align:center}.sib-award-seal{display:grid;place-items:center;width:100px;height:100px;margin:-7.5rem auto 2rem;border:4px double var(--sib-ink);border-radius:50%;background:var(--sib-accent);color:#fff;font-size:3rem}.sib-award>span,.sib-award>small{font-size:.7rem;font-weight:900;letter-spacing:.14em}.sib-award h2{max-width:800px;margin:1.5rem auto}.sib-award blockquote{max-width:650px;margin:2rem auto;padding:1.2rem;border-top:2px solid var(--sib-ink);border-bottom:2px solid var(--sib-ink);font:italic 1.1rem/1.65 Georgia,serif}
.sib-pact details{margin-top:2rem;border:3px solid var(--sib-ink);background:var(--sib-second);color:#fff}.sib-pact summary{padding:1.3rem;cursor:pointer;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.sib-pact details>div{padding:2.5rem;border-top:3px solid var(--sib-ink)}.sib-pact details p{font:italic 1.35rem/1.7 Georgia,serif}.sib-pact details span{font-size:.68rem;font-weight:900;letter-spacing:.13em;color:var(--sib-soft)}
.sib-return{max-width:100%;padding-right:max(2rem,calc((100vw - 1000px)/2));padding-left:max(2rem,calc((100vw - 1000px)/2));background:var(--sib-ink);color:var(--sib-paper)}.sib-return .sib-module-label{color:var(--sib-soft)}.sib-return form{max-width:780px}.sib-return fieldset{border:0;padding:0;margin:2rem 0}.sib-return legend,.sib-reply-field>span{display:block;margin-bottom:.7rem;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.sib-reaction-row{display:flex;gap:.7rem;flex-wrap:wrap}.sib-reaction-row span{display:grid;place-items:center;width:58px;height:58px;border:2px solid var(--sib-paper);font-size:1.6rem;cursor:pointer}.sib-reaction-row input:checked+span{background:var(--sib-soft);border-color:var(--sib-soft);box-shadow:4px 4px 0 var(--sib-accent)}.sib-reply-field{display:block;margin:1.5rem 0}.sib-view-message{margin:1rem 0;padding:1rem;border:2px solid var(--sib-soft);color:var(--sib-soft);font-weight:900}.sib-return .sib-empty{border-color:var(--sib-paper);background:rgba(255,255,255,.08)}.sib-receiver-foot{padding:4rem 2rem;text-align:center;background:var(--sib-second);color:#fff}.sib-receiver-foot span{font-size:.68rem;font-weight:900;letter-spacing:.14em}.sib-receiver-foot a{font-weight:900;color:#fff}

/* Dark Pixel Squad theme gets a deliberately console-like surface. */
.sib-receiver.theme-pixel-squad .sib-archive-head,.sib-receiver.theme-pixel-squad .sib-module{color:var(--sib-ink)}.sib-receiver.theme-pixel-squad .sib-archive-head{background-color:var(--sib-paper);background-image:linear-gradient(rgba(248,242,223,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(248,242,223,.05) 1px,transparent 1px)}.sib-receiver.theme-pixel-squad .sib-photo-slot,.sib-receiver.theme-pixel-squad .sib-receiver-gallery figure{background:#1d2342}.sib-receiver.theme-pixel-squad .sib-photo-placeholder{background:#252b4b}.sib-receiver.theme-pixel-squad .sib-origin p,.sib-receiver.theme-pixel-squad .sib-chaos p{color:var(--sib-ink)}

@media (max-width:1000px){.sib-hero{grid-template-columns:1fr;padding-top:5rem}.sib-hero-archive{max-width:620px;width:100%;margin:auto}.sib-feature-spread,.sib-occasion-hero,.sib-direction-picker{grid-template-columns:1fr}.sib-feature-intro{position:static}.sib-direction-grid{grid-template-columns:repeat(2,1fr)}.sib-manage-columns{grid-template-columns:1fr}.sib-mine-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.sib-scope{max-width:100vw}.sib-hero{min-height:auto;padding:4rem 1.2rem}.sib-hero-copy{min-width:0;max-width:100%}.sib-hero-copy h1{max-width:100%;font-size:clamp(2.65rem,13vw,3.2rem);overflow-wrap:anywhere}.sib-hero-archive{min-height:390px}.sib-folder{width:230px;height:280px;padding:2.6rem 1.2rem 1rem}.sib-folder strong{margin:2.5rem 0 1rem;font-size:2.6rem}.sib-folder-then{left:2%}.sib-folder-now{right:2%}.sib-thread{bottom:40px}.sib-occasion-grid,.sib-how-grid,.sib-blueprint-grid{grid-template-columns:1fr}.sib-section,.sib-how,.sib-more{padding:5rem 1.2rem}.sib-feature-spread{padding:5rem 1.2rem}.sib-band>div{width:100%;margin:0;text-align:center}.sib-occasion-hero{padding:5rem 1.2rem}.sib-occasion-hero h1{font-size:clamp(2.65rem,13vw,3.2rem);overflow-wrap:anywhere}.sib-direction-picker,.sib-occasion-blueprint{padding:4rem 1.2rem}.sib-more>div:last-child{grid-template-columns:1fr}.sib-builder-head{grid-template-columns:1fr;padding:2rem 1.2rem}.sib-builder-head h1{overflow-wrap:anywhere}.sib-builder-progress{gap:.25rem}.sib-builder-progress b{font-size:.72rem}.sib-builder-panel{padding:1.4rem;box-shadow:6px 6px 0 var(--sib-ink)}.sib-relation-options{grid-template-columns:repeat(2,1fr)}.sib-fields.two,.sib-theme-set>div,.sib-upload-pair,.sib-award-fields{grid-template-columns:1fr}.sib-manage,.sib-mine{padding:3rem 1rem}.sib-manage-head{align-items:start;flex-direction:column}.sib-share-card{grid-template-columns:1fr}.sib-share-card>button{justify-self:start}.sib-manage-stats{grid-template-columns:1fr 1fr}.sib-manage-gallery{grid-template-columns:1fr}.sib-mine-grid{grid-template-columns:1fr}.sib-manage-foot{gap:1rem;flex-direction:column}.sib-creator-preview{position:relative;top:auto;right:auto;flex-wrap:wrap}.sib-archive-head{padding:6rem 1.2rem}.sib-archive-head>p{position:static}.sib-module{padding:6rem 1.2rem}.sib-receiver-gallery{grid-template-columns:1fr}.sib-photo-slot{transform:none!important}.sib-award{margin-right:1rem;margin-left:1rem;padding:5rem 1.2rem}.sib-return{padding:6rem 1.2rem}.sib-scope .pwb-seo-content,.sib-scope .pwb-faq{padding:3rem 1.2rem}.sib-scope .pwb-content-block{padding:1.2rem;overflow-x:auto}}
@media (max-width:480px){.sib-hero-archive{min-height:330px}.sib-folder{width:190px;height:235px}.sib-folder:before{width:90px;height:28px;top:-28px}.sib-folder strong{font-size:2rem}.sib-folder span{font-size:.7rem}.sib-sticker{width:70px;height:70px;font-size:.7rem}.sib-direction-grid{grid-template-columns:1fr}.sib-builder-progress span{font-size:.58rem}.sib-manage-stats{grid-template-columns:1fr}.sib-add-memory{grid-template-columns:1fr}.sib-add-memory label:nth-child(3),.sib-add-memory button{grid-column:auto}}

.sib-scope :focus-visible{outline:4px solid var(--sib-accent);outline-offset:3px}
.sib-upload-pair>div,.sib-upload,.sib-compact-file,.sib-fields label{min-width:0}
.sib-upload{position:relative;overflow:hidden}
.sib-upload input[type=file],.sib-compact-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sib-upload>strong,.sib-compact-file>b{display:inline-flex;align-items:center;justify-content:center;padding:.48rem .72rem;border:2px solid currentColor;background:var(--sib-paper);color:var(--sib-ink);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.sib-upload>small,.sib-compact-file>small{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;font-weight:700;letter-spacing:0;text-transform:none}
.sib-compact-file{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;align-items:center;width:100%;min-height:50px;padding:.5rem;border:2px solid var(--sib-ink);background:#fff;cursor:pointer;color:#17233c}
.sib-compact-file>b{background:var(--sib-soft)}
.sib-theme-demo{position:relative;display:flex;gap:4px;align-items:flex-end;overflow:hidden;min-height:76px;padding:.55rem;background:var(--demo-paper)}.sib-theme-demo i{display:block;flex:1 1 0;min-width:0;background:var(--demo-second)}.sib-theme-demo i:nth-child(2){background:var(--demo-accent)}
.sib-theme-demo em{position:absolute;inset:auto 8px 8px;height:3px;background:var(--demo-accent)}
.sib-theme-film-file .sib-theme-demo{align-items:center;padding:.7rem .5rem;background:#29271f;background-image:radial-gradient(circle,#eee9da 0 2px,transparent 2.5px);background-position:4px 4px;background-size:12px 12px}
.sib-theme-film-file .sib-theme-demo i{height:44%;border:2px solid #d8c792;background:#65735b}.sib-theme-film-file .sib-theme-demo i:nth-child(2){height:44%;background:#b6482a}.sib-theme-film-file .sib-theme-demo i:nth-child(3){height:44%;background:#eee9da}
.sib-theme-pixel-squad .sib-theme-demo{align-items:center;background:#090c19;background-image:linear-gradient(rgba(72,220,199,.12) 1px,transparent 1px);background-size:100% 5px}
.sib-theme-pixel-squad .sib-theme-demo i{height:18px;box-shadow:4px 4px 0 #000}.sib-theme-pixel-squad .sib-theme-demo i:nth-child(1){height:34px}.sib-theme-pixel-squad .sib-theme-demo i:nth-child(2){height:50px}.sib-theme-pixel-squad .sib-theme-demo i:nth-child(3){height:26px}
.sib-theme-rakhi-thread .sib-theme-demo{display:grid;place-items:center;background:radial-gradient(circle at center,#f4b942 0 9px,#d9472b 10px 14px,transparent 15px),#fff6e2}
.sib-theme-rakhi-thread .sib-theme-demo:before,.sib-theme-rakhi-thread .sib-theme-demo:after{content:"";position:absolute;top:50%;width:42%;height:5px;background:repeating-linear-gradient(90deg,#5636a5 0 5px,#f4b942 5px 10px);transform:translateY(-50%)}.sib-theme-rakhi-thread .sib-theme-demo:before{left:0}.sib-theme-rakhi-thread .sib-theme-demo:after{right:0}.sib-theme-rakhi-thread .sib-theme-demo i{display:none}

/* Film Reel builder and preview: contact sheet, not a folder. */
.sib-builder.theme-film-file{font-family:Georgia,"Times New Roman",serif;background-color:#d7d0bd;background-image:linear-gradient(90deg,rgba(32,40,31,.08) 1px,transparent 1px);background-size:80px 100%}
.sib-builder.theme-film-file h1,.sib-builder.theme-film-file h2,.sib-builder.theme-film-file h3{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.035em}
.sib-builder.theme-film-file .sib-builder-head{background:#e7dfcc;border-bottom:1px solid #20281f}.sib-builder.theme-film-file .sib-builder-progress{border-top:1px solid #20281f}.sib-builder.theme-film-file .sib-builder-progress span{border-top-width:3px;font-family:"Courier New",monospace}.sib-builder.theme-film-file .sib-builder-panel{border:1px solid #20281f;border-radius:3px;background:#eee9da;box-shadow:0 22px 50px rgba(32,40,31,.18)}
.sib-builder.theme-film-file .sib-theme-choice,.sib-builder.theme-film-file .sib-upload,.sib-builder.theme-film-file .sib-compact-file{border-width:1px}.sib-builder.theme-film-file .sib-upload{background:#dbd1b9;border-style:solid}.sib-builder.theme-film-file .sib-upload b{font-family:"Courier New",monospace}.sib-builder.theme-film-file .sib-chapter{font-family:"Courier New",monospace;color:#b6482a}.sib-builder.theme-film-file .sib-preview-slots{padding:13px 0;background-image:radial-gradient(circle,#29271f 0 3px,transparent 3.5px);background-position:0 2px;background-size:18px 100%}.sib-builder.theme-film-file .sib-preview-slots i{border:6px solid #29271f;background:#65735b}

/* Pixel Co-op builder and preview: complete HUD treatment. */
.sib-builder.theme-pixel-squad{font-family:Consolas,"Courier New",monospace;background-color:#090c19;background-image:linear-gradient(rgba(72,220,199,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(72,220,199,.04) 1px,transparent 1px);background-size:100% 6px,32px 32px;color:#f8f2df}
.sib-builder.theme-pixel-squad h1,.sib-builder.theme-pixel-squad h2,.sib-builder.theme-pixel-squad h3{font-family:Consolas,"Courier New",monospace;letter-spacing:-.05em;text-transform:uppercase;text-shadow:3px 3px 0 #000}
.sib-builder.theme-pixel-squad .sib-builder-head{background:#0d1124;border-color:#48dcc7}.sib-builder.theme-pixel-squad .sib-builder-progress{border-color:#48dcc7}.sib-builder.theme-pixel-squad .sib-builder-progress span.is-active{color:#48dcc7;text-shadow:0 0 12px rgba(72,220,199,.7)}
.sib-builder.theme-pixel-squad .sib-builder-panel{border:2px solid #48dcc7;background:#151a34;color:#f8f2df;box-shadow:10px 10px 0 #ff4f8b;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}.sib-builder.theme-pixel-squad .sib-fields input,.sib-builder.theme-pixel-squad .sib-fields select,.sib-builder.theme-pixel-squad .sib-full-label input,.sib-builder.theme-pixel-squad .sib-full-label textarea,.sib-builder.theme-pixel-squad .sib-award-fields input,.sib-builder.theme-pixel-squad .sib-award-fields textarea{border-color:#48dcc7;background:#090c19;color:#f8f2df}.sib-builder.theme-pixel-squad .sib-full-label textarea{font-family:Consolas,"Courier New",monospace}
.sib-builder.theme-pixel-squad .sib-theme-choice,.sib-builder.theme-pixel-squad .sib-upload,.sib-builder.theme-pixel-squad .sib-compact-file{border-color:#48dcc7;background:#0b0f20;color:#f8f2df}.sib-builder.theme-pixel-squad .sib-theme-choice:has(input:checked){background:#27204a;box-shadow:5px 5px 0 #ff4f8b}.sib-builder.theme-pixel-squad .sib-upload>strong,.sib-builder.theme-pixel-squad .sib-compact-file>b{background:#48dcc7;color:#090c19}.sib-builder.theme-pixel-squad .sib-builder-nav button{border-color:#48dcc7;background:#090c19;color:#f8f2df;box-shadow:4px 4px 0 #ff4f8b}.sib-builder.theme-pixel-squad .sib-preview-slots i{border-color:#48dcc7;background:#171d38;box-shadow:inset 0 0 22px rgba(72,220,199,.15)}

/* Rakhi Thread builder and preview: textile, mandala and woven line. */
.sib-builder.theme-rakhi-thread{font-family:"Segoe UI",sans-serif;background-color:#fff6e2;background-image:radial-gradient(circle at 15% 20%,rgba(244,185,66,.18),transparent 26%),radial-gradient(circle at 85% 70%,rgba(86,54,165,.12),transparent 30%)}
.sib-builder.theme-rakhi-thread h1,.sib-builder.theme-rakhi-thread h2,.sib-builder.theme-rakhi-thread h3{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.035em}.sib-builder.theme-rakhi-thread .sib-builder-head{background:linear-gradient(90deg,#fff6e2,#fce8b7);border-bottom:8px double #5636a5}.sib-builder.theme-rakhi-thread .sib-builder-progress{border-color:#d9472b}.sib-builder.theme-rakhi-thread .sib-builder-progress span{border-top-width:4px}.sib-builder.theme-rakhi-thread .sib-builder-panel{border:2px solid #5636a5;border-radius:28px 6px 28px 6px;background:rgba(255,250,235,.96);box-shadow:0 20px 55px rgba(86,54,165,.16)}
.sib-builder.theme-rakhi-thread .sib-theme-choice,.sib-builder.theme-rakhi-thread .sib-upload,.sib-builder.theme-rakhi-thread .sib-compact-file{border-color:#5636a5;border-radius:18px 4px 18px 4px}.sib-builder.theme-rakhi-thread .sib-upload{background:radial-gradient(circle,#fff 0 42%,#fbe8b9 43% 100%)}.sib-builder.theme-rakhi-thread .sib-relation-options label span{border-color:#5636a5;border-radius:50px}.sib-builder.theme-rakhi-thread .sib-builder-nav button{border-radius:999px;border-color:#5636a5;background:#fff6e2;color:#31204f}.sib-builder.theme-rakhi-thread .sib-preview-slots i{border:4px double #5636a5;border-radius:80px 80px 12px 12px;background:#f8e2aa}

/* The editor remains a calm, consistent workspace; theme radios transform only
   the live cover. This prevents Pixel Co-op (or any other theme) from repainting
   the form while still previewing the complete recipient design. */
.sib-builder[class*="theme-"]{--sib-paper:#f4f0e5!important;--sib-ink:#17233c!important;--sib-accent:#ff5b35!important;--sib-theme-accent:#ff5b35!important;--sib-second:#2962ff!important;--sib-soft:#ffd95a!important;font-family:"Trebuchet MS","Segoe UI",sans-serif;color:#17233c;background-color:#f4f0e5;background-image:linear-gradient(rgba(23,35,60,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,35,60,.045) 1px,transparent 1px);background-size:32px 32px}
.sib-builder[class*="theme-"] h1,.sib-builder[class*="theme-"] h2,.sib-builder[class*="theme-"] h3{font-family:"Arial Black","Trebuchet MS",sans-serif;letter-spacing:-.045em;text-transform:none;text-shadow:none}
.sib-builder[class*="theme-"] .sib-builder-head{background:#f4f0e5;border-bottom:3px solid #17233c}
.sib-builder[class*="theme-"] .sib-builder-progress{border-top:2px solid #17233c}.sib-builder[class*="theme-"] .sib-builder-progress span{border-top-width:8px;font-family:inherit}.sib-builder[class*="theme-"] .sib-builder-progress span.is-active{color:#17233c;text-shadow:none}
.sib-builder[class*="theme-"] .sib-builder-panel{border:3px solid #17233c;border-radius:0;background:#fff;color:#17233c;box-shadow:10px 10px 0 #17233c;clip-path:none}
.sib-builder[class*="theme-"] .sib-fields input,.sib-builder[class*="theme-"] .sib-fields select,.sib-builder[class*="theme-"] .sib-full-label input,.sib-builder[class*="theme-"] .sib-full-label textarea,.sib-builder[class*="theme-"] .sib-award-fields input,.sib-builder[class*="theme-"] .sib-award-fields textarea{border:2px solid #17233c;background:#fff;color:#17233c}.sib-builder[class*="theme-"] .sib-full-label textarea{font-family:Georgia,serif}
.sib-builder[class*="theme-"] .sib-theme-choice,.sib-builder[class*="theme-"] .sib-upload,.sib-builder[class*="theme-"] .sib-compact-file{border:2px solid #17233c;border-radius:0;background:#fff;color:#17233c}.sib-builder[class*="theme-"] .sib-theme-choice:has(input:checked){background:#ffd95a;box-shadow:5px 5px 0 #17233c}.sib-builder[class*="theme-"] .sib-upload{border-style:dashed;background:#fff7ca}.sib-builder[class*="theme-"] .sib-upload>strong,.sib-builder[class*="theme-"] .sib-compact-file>b{background:#ffd95a;color:#17233c}.sib-builder[class*="theme-"] .sib-relation-options label span{border:2px solid #17233c;border-radius:0}.sib-builder[class*="theme-"] .sib-builder-nav button{border:2px solid #17233c;border-radius:0;background:#f4f0e5;color:#17233c;box-shadow:none}.sib-builder[class*="theme-"] .sib-chapter{font-family:inherit;color:#2962ff}

/* Recipient opening stage and shared motion. */
.sib-cover-scene{position:absolute;inset:0;pointer-events:none}.sib-cover-scene i,.sib-cover-scene em{position:absolute;display:block}.sib-archive.is-entering .sib-archive-head{animation:sibArchiveEnter .85s cubic-bezier(.16,1,.3,1) both}
.sib-receiver-cover.is-open{animation:sibCoverAway .82s cubic-bezier(.76,0,.24,1) forwards}

.sib-redaction{transition:background .45s,color .45s,transform .3s}.sib-redaction:hover{transform:translateY(-4px)}.sib-redaction.is-revealed{animation:sibRevealNote .5s ease both}.sib-pact details[open]>div{animation:sibRevealNote .55s ease both}


@keyframes sibRevealNote{from{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes sibBlink{50%{opacity:.35}}

/* Archive Pop recipient: folders slide apart and modules land like evidence. */
.sib-receiver.theme-archive-pop .sib-receiver-cover{background:linear-gradient(135deg,#17233c 0 55%,#2962ff 55% 100%)}.sib-receiver.theme-archive-pop .sib-cover-scene i{width:42vw;height:62vh;border:3px solid #fff;box-shadow:12px 12px 0 #0e172a;opacity:.13}.sib-receiver.theme-archive-pop .sib-cover-scene i:nth-child(1){left:-8vw;top:15vh;transform:rotate(-8deg);background:#ff5b35}.sib-receiver.theme-archive-pop .sib-cover-scene i:nth-child(2){right:-6vw;top:7vh;transform:rotate(7deg);background:#ffd95a}.sib-receiver.theme-archive-pop [data-reveal]{transform:translateY(45px) rotate(.6deg)}.sib-receiver.theme-archive-pop [data-reveal].is-visible{transform:none}.sib-receiver.theme-archive-pop .sib-origin,.sib-receiver.theme-archive-pop .sib-chaos{margin-top:4rem;margin-bottom:4rem;padding:5rem;border:3px solid var(--sib-ink);background:#fff;box-shadow:12px 12px 0 var(--sib-ink)}


/* Film Reel recipient: a widescreen documentary with contact sheets. */
.sib-receiver.theme-film-file{font-family:Georgia,"Times New Roman",serif;background:#d8d0bd}.sib-receiver.theme-film-file h1,.sib-receiver.theme-film-file h2,.sib-receiver.theme-film-file h3{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.025em}.sib-receiver.theme-film-file .sib-receiver-cover{color:#f0e6cf;background:#1e1d18}.sib-receiver.theme-film-file .sib-cover-noise{background-image:radial-gradient(rgba(240,230,207,.18) .6px,transparent .8px);background-size:4px 4px;animation:sibFilmGrain .22s steps(2,end) infinite}.sib-receiver.theme-film-file .sib-cover-scene:before,.sib-receiver.theme-film-file .sib-cover-scene:after{content:"";position:absolute;left:0;width:100%;height:24px;background:radial-gradient(circle,#d8d0bd 0 5px,transparent 5.5px);background-size:28px 24px}.sib-receiver.theme-film-file .sib-cover-scene:before{top:14px}.sib-receiver.theme-film-file .sib-cover-scene:after{bottom:14px}.theme-film-file .sib-card-mark{border-radius:2px;background:#b6482a;font-family:"Courier New",monospace}.theme-film-file .sib-card-name{font-weight:400;font-style:italic}.theme-film-file .sib-card-title{color:#5a5342;font-weight:400}.theme-film-file .sib-open-prompt{border-width:1px;background:#eee9da;color:#20281f;font-family:"Courier New",monospace;text-transform:uppercase;letter-spacing:.12em}.sib-receiver.theme-film-file .sib-receiver-cover.is-open{animation:sibFilmAway .85s ease-in forwards}.sib-receiver.theme-film-file .sib-archive-head{color:#eee9da;background:#29271f;background-image:linear-gradient(90deg,transparent 0 9%,rgba(238,233,218,.06) 9% 10%,transparent 10% 90%,rgba(238,233,218,.06) 90% 91%,transparent 91%)}.sib-receiver.theme-film-file .sib-opening-note{border-width:1px;font-family:Georgia,serif}.sib-receiver.theme-film-file .sib-module{max-width:1180px;border-bottom:1px solid #20281f}.sib-receiver.theme-film-file .sib-module-label{font-family:"Courier New",monospace;color:#b6482a}.sib-receiver.theme-film-file .sib-origin,.sib-receiver.theme-film-file .sib-chaos{display:grid;grid-template-columns:.72fr 1.28fr;column-gap:4rem}.sib-receiver.theme-film-file .sib-origin .sib-module-label,.sib-receiver.theme-film-file .sib-chaos .sib-module-label,.sib-receiver.theme-film-file .sib-chaos .sib-warning{grid-column:1/-1}.sib-receiver.theme-film-file .sib-origin p,.sib-receiver.theme-film-file .sib-chaos p{font-family:Georgia,serif}.sib-receiver.theme-film-file .sib-photo-pair{gap:0;padding:32px 18px;background:#29271f;background-image:radial-gradient(circle,#eee9da 0 4px,transparent 4.5px);background-position:0 4px;background-size:28px 100%}.sib-receiver.theme-film-file .sib-photo-slot{border:10px solid #29271f;box-shadow:none;transform:none}.sib-receiver.theme-film-file [data-reveal]{filter:blur(9px);transform:translateX(-40px);transition-duration:.9s}.sib-receiver.theme-film-file [data-reveal].is-visible{filter:none;transform:none}
@keyframes sibFilmGrain{50%{transform:translate(1px,-1px)}}

/* Pixel Co-op recipient: CRT boot, HUD modules and stepped reveals. */
.sib-receiver.theme-pixel-squad{font-family:Consolas,"Courier New",monospace;background:#090c19;color:#f8f2df}.sib-receiver.theme-pixel-squad h1,.sib-receiver.theme-pixel-squad h2,.sib-receiver.theme-pixel-squad h3{font-family:Consolas,"Courier New",monospace;letter-spacing:-.04em;text-transform:uppercase}.sib-receiver.theme-pixel-squad .sib-receiver-cover{background:#060814;color:#f8f2df}.sib-receiver.theme-pixel-squad .sib-cover-noise{background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(72,220,199,.08) 4px 5px)}.sib-receiver.theme-pixel-squad .sib-cover-scene em{left:0;right:0;top:-12%;height:16%;background:linear-gradient(transparent,rgba(72,220,199,.28),transparent);animation:sibScan 2.8s linear infinite}.theme-pixel-squad .sib-card-mark{border-radius:0;border-color:#48dcc7;background:#171d38;color:#ffd34d}.theme-pixel-squad .sib-card-name{color:#ffd34d;text-shadow:5px 5px 0 #ff4f8b}.theme-pixel-squad .sib-card-title{color:#48dcc7;opacity:1}.theme-pixel-squad .sib-open-prompt{border-color:#48dcc7;border-radius:0;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));color:#f8f2df;animation:sibBlink 1.1s steps(2,end) infinite}.sib-receiver.theme-pixel-squad .sib-receiver-cover.is-open{animation:sibPixelAway .82s steps(8,end) forwards}.sib-receiver.theme-pixel-squad .sib-archive{padding:2rem 0;background:#090c19;background-image:linear-gradient(rgba(72,220,199,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(72,220,199,.04) 1px,transparent 1px);background-size:32px 32px}.sib-receiver.theme-pixel-squad .sib-archive-head{max-width:1120px;margin:0 auto 3rem;border:2px solid #48dcc7;background:#12172e;color:#f8f2df;box-shadow:10px 10px 0 #ff4f8b;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}.sib-receiver.theme-pixel-squad .sib-opening-note{border-color:#48dcc7;font-family:Consolas,"Courier New",monospace}.sib-receiver.theme-pixel-squad .sib-module{max-width:1080px;margin:2rem auto;padding:4rem;border:2px solid #48dcc7;background:#12172e;color:#f8f2df;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}.sib-receiver.theme-pixel-squad .sib-module-label{color:#48dcc7}.sib-receiver.theme-pixel-squad .sib-photo-slot,.sib-receiver.theme-pixel-squad .sib-receiver-gallery figure{border-color:#48dcc7;background:#080b18;box-shadow:6px 6px 0 #ff4f8b;transform:none}.sib-receiver.theme-pixel-squad .sib-origin p,.sib-receiver.theme-pixel-squad .sib-chaos p,.sib-receiver.theme-pixel-squad .sib-photo-slot figcaption{font-family:Consolas,"Courier New",monospace;color:#f8f2df}.sib-receiver.theme-pixel-squad .sib-award{border:4px solid #ffd34d;text-align:left}.sib-receiver.theme-pixel-squad .sib-award-seal{margin:-6rem 0 2rem;border-radius:0;border-color:#48dcc7;background:#ff4f8b}.sib-receiver.theme-pixel-squad .sib-pact details{border-color:#48dcc7;background:#080b18}.sib-receiver.theme-pixel-squad .sib-return{max-width:1080px;background:#080b18}.sib-receiver.theme-pixel-squad [data-reveal]{clip-path:inset(0 100% 0 0);opacity:1;transform:none;transition:clip-path .72s steps(9,end)}.sib-receiver.theme-pixel-squad [data-reveal].is-visible{clip-path:inset(0)}
@keyframes sibScan{to{transform:translateY(720%)}}

/* Rakhi Thread recipient: woven line, mandala cover and alternating keepsakes. */
.sib-receiver.theme-rakhi-thread{font-family:"Segoe UI",sans-serif;background:#fff6e2;color:#31204f}.sib-receiver.theme-rakhi-thread h1,.sib-receiver.theme-rakhi-thread h2,.sib-receiver.theme-rakhi-thread h3{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.03em}.sib-receiver.theme-rakhi-thread .sib-receiver-cover{color:#31204f;background:radial-gradient(circle at center,rgba(244,185,66,.24) 0 24%,transparent 24.5%),#fff6e2}.sib-receiver.theme-rakhi-thread .sib-receiver-cover:before,.sib-receiver.theme-rakhi-thread .sib-receiver-cover:after{border:8px double #5636a5}.sib-receiver.theme-rakhi-thread .sib-cover-scene:before,.sib-receiver.theme-rakhi-thread .sib-cover-scene:after{content:"";position:absolute;top:50%;width:46%;height:8px;background:repeating-linear-gradient(90deg,#5636a5 0 8px,#f4b942 8px 16px,#d9472b 16px 24px);animation:sibThreadBreathe 2.4s ease-in-out infinite}.sib-receiver.theme-rakhi-thread .sib-cover-scene:before{left:0}.sib-receiver.theme-rakhi-thread .sib-cover-scene:after{right:0}.theme-rakhi-thread .sib-card-mark{border:4px double #5636a5;background:#f4b942;color:#31204f}.theme-rakhi-thread .sib-card-name{color:#5636a5}.theme-rakhi-thread .sib-card-title{color:#d9472b;opacity:1}.theme-rakhi-thread .sib-open-prompt{border:2px solid #5636a5;background:#5636a5;color:#fff6e2}.sib-receiver.theme-rakhi-thread .sib-receiver-cover.is-open{animation:sibThreadAway .9s ease-in forwards}.sib-receiver.theme-rakhi-thread .sib-archive-head{text-align:center;background:radial-gradient(circle at 50% 0,rgba(244,185,66,.28),transparent 42%),#fff6e2;border-bottom:8px double #5636a5}.sib-receiver.theme-rakhi-thread .sib-archive-head>p{position:static}.sib-receiver.theme-rakhi-thread .sib-opening-note{margin-right:auto;margin-left:auto;border-color:#d9472b}.sib-receiver.theme-rakhi-thread .sib-module{position:relative;max-width:900px;border-bottom:0;border-left:7px solid #5636a5}.sib-receiver.theme-rakhi-thread .sib-module:before{content:"";position:absolute;left:-17px;top:7rem;width:27px;height:27px;border:6px double #5636a5;border-radius:50%;background:#f4b942}.sib-receiver.theme-rakhi-thread .sib-module:nth-child(even){border-right:7px solid #d9472b;border-left:0}.sib-receiver.theme-rakhi-thread .sib-module:nth-child(even):before{right:-17px;left:auto;border-color:#d9472b}.sib-receiver.theme-rakhi-thread .sib-photo-slot{border:8px double #5636a5;border-radius:160px 160px 18px 18px;box-shadow:0 18px 35px rgba(86,54,165,.16);transform:none}.sib-receiver.theme-rakhi-thread .sib-award{border:8px double #5636a5;border-radius:42px;background:#fce8b7}.sib-receiver.theme-rakhi-thread .sib-pact details{border:8px double #5636a5;border-radius:20px;background:#5636a5}.sib-receiver.theme-rakhi-thread .sib-return{max-width:100%;border:0;background:#31204f;color:#fff6e2}.sib-receiver.theme-rakhi-thread [data-reveal]{opacity:0;transform:translateY(35px) scale(.96);transition-duration:.85s}.sib-receiver.theme-rakhi-thread [data-reveal].is-visible{opacity:1;transform:none}
@keyframes sibThreadBreathe{50%{transform:scale(1.06)}}

@media (max-width:760px){.sib-receiver.theme-film-file .sib-origin,.sib-receiver.theme-film-file .sib-chaos{display:block}.sib-receiver.theme-archive-pop .sib-origin,.sib-receiver.theme-archive-pop .sib-chaos{margin-right:1rem;margin-left:1rem;padding:3rem 1.2rem}.sib-receiver.theme-pixel-squad .sib-module{margin:1.25rem .75rem;padding:4rem 1.2rem}.sib-receiver.theme-rakhi-thread .sib-module{margin-right:1.1rem;margin-left:1.1rem;padding-right:1.2rem;padding-left:1.5rem}.sib-receiver.theme-rakhi-thread .sib-module:nth-child(even){padding-right:1.5rem;padding-left:1.2rem}.sib-upload>small{max-width:260px}}


/* ==========================================================================
   OPENING CHOREOGRAPHY, THEME SWATCHES AND SAMPLE PAGES
   --------------------------------------------------------------------------
   Everything below either replaces motion that could not be seen, or styles
   markup that had none. Appended as one block so the cascade order is obvious:
   these rules are meant to win over the earlier definitions of the same thing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The cover, as a fixed overlay.

   Previously the cover was an in-flow 100vh section and its exit animated
   min-height, height and padding. Three things went wrong with that: the
   archive's entrance played underneath a cover that still filled the screen,
   height:auto is not interpolable so the collapse jumped at the midpoint, and
   the script then smooth-scrolled to an animation that had already finished.
   The reader saw no transition at all.

   As an overlay the cover leaves the flow entirely, so the archive is already
   sitting at the top of the document, in view, the whole time. The exit plays
   in front of it and nothing in the layout moves.
   -------------------------------------------------------------------------- */
.sib-receiver.sib-js .sib-receiver-cover{position:fixed;z-index:1400;inset:0;width:100%;height:100vh;height:100dvh;min-height:0;margin:0}
.sib-receiver.sib-js .sib-receiver-cover[hidden]{display:none!important}
.sib-receiver.sib-js.is-sealed .sib-archive{pointer-events:none}
body.sib-scroll-locked{overflow:hidden}

/* Give the cover a subtle idle life so it does not read as a static poster. */
.sib-receiver.sib-js .sib-card-mark{animation:sibMarkIdle 5.5s ease-in-out infinite}
.sib-receiver.sib-js .sib-arrival-line{animation:sibCoverIn .9s cubic-bezier(.16,1,.3,1) both;animation-delay:.06s}
.sib-receiver.sib-js .sib-cover-card{animation:sibCoverIn 1s cubic-bezier(.16,1,.3,1) both;animation-delay:.18s}
.sib-receiver.sib-js .sib-cover-hint{animation:sibCoverIn .9s cubic-bezier(.16,1,.3,1) both;animation-delay:.5s}

@keyframes sibCoverIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes sibMarkIdle{0%,100%{scale:1}50%{scale:1.05}}

/* The button is the one thing a reader has to find, so it gets a soft pulse. */



/* --------------------------------------------------------------------------
   2. Per-theme exits.

   The keyframe names are the originals, redefined here to touch only
   compositing properties — transform, opacity, clip-path, filter. No layout
   property is animated anywhere in this section.
   -------------------------------------------------------------------------- */
.sib-receiver-cover.is-open{animation:sibCoverAway 1.02s cubic-bezier(.7,0,.2,1) forwards}
@keyframes sibCoverAway{
	0%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
	38%{opacity:1;transform:scale(1.03)}
	100%{opacity:0;transform:scale(1.12) translateY(-4vh);clip-path:inset(50% 0 50% 0)}
}

/* Archive Pop: the two folders are pulled off the desk and the file is lifted out. */
.sib-receiver.theme-archive-pop .sib-cover-scene i:nth-child(3){display:none}
.sib-receiver.theme-archive-pop.is-opening .sib-cover-scene i:nth-child(1){animation:sibFolderLeft .78s cubic-bezier(.55,0,.35,1) both}
.sib-receiver.theme-archive-pop.is-opening .sib-cover-scene i:nth-child(2){animation:sibFolderRight .78s cubic-bezier(.55,0,.35,1) both}
@keyframes sibFolderLeft{to{opacity:0;transform:translateX(-72vw) rotate(-24deg)}}
@keyframes sibFolderRight{to{opacity:0;transform:translateX(72vw) rotate(24deg)}}

/* Film Reel: the lens gate closes over the frame and the last of it burns out. */
.sib-receiver.theme-film-file .sib-receiver-cover.is-open{animation:sibFilmAway 1.12s cubic-bezier(.66,0,.3,1) forwards}
@keyframes sibFilmAway{
	0%{opacity:1;filter:none;clip-path:inset(0 0 0 0)}
	45%{opacity:1;filter:sepia(.7) contrast(1.15)}
	78%{opacity:.75;filter:sepia(1) blur(6px) brightness(1.4);clip-path:inset(34% 0 34% 0)}
	100%{opacity:0;filter:sepia(1) blur(16px) brightness(1.8);clip-path:inset(50% 0 50% 0)}
}

/* Pixel Co-op: the tube flashes, collapses to a scanline and goes dark. */
.sib-receiver.theme-pixel-squad .sib-receiver-cover.is-open{animation:sibPixelAway .86s steps(10,end) forwards}
@keyframes sibPixelAway{
	0%{opacity:1;filter:none;transform:scaleY(1) scaleX(1)}
	30%{filter:brightness(3.2) saturate(.2);transform:scaleY(1) scaleX(1)}
	62%{opacity:1;filter:brightness(2);transform:scaleY(.02) scaleX(1)}
	86%{opacity:1;filter:brightness(2.4);transform:scaleY(.012) scaleX(.24)}
	100%{opacity:0;filter:brightness(3);transform:scaleY(.008) scaleX(0)}
}

/* Rakhi Thread: the page draws itself shut into the knot at the centre. */
.sib-receiver.theme-rakhi-thread .sib-receiver-cover.is-open{animation:sibThreadAway 1.12s cubic-bezier(.62,0,.3,1) forwards}
@keyframes sibThreadAway{
	0%{opacity:1;clip-path:circle(140% at 50% 46%);transform:none}
	60%{opacity:1;clip-path:circle(26% at 50% 46%);transform:rotate(4deg) scale(.98)}
	100%{opacity:0;clip-path:circle(0% at 50% 46%);transform:rotate(10deg) scale(.9)}
}
.sib-receiver.theme-rakhi-thread.is-opening .sib-cover-scene:before{animation:sibThreadPullLeft .95s cubic-bezier(.62,0,.3,1) both}
.sib-receiver.theme-rakhi-thread.is-opening .sib-cover-scene:after{animation:sibThreadPullRight .95s cubic-bezier(.62,0,.3,1) both}
@keyframes sibThreadPullLeft{to{transform:translateX(38%) scaleX(.12)}}
@keyframes sibThreadPullRight{to{transform:translateX(-38%) scaleX(.12)}}

/* --------------------------------------------------------------------------
   3. The archive arriving underneath.
   -------------------------------------------------------------------------- */
.sib-archive.is-entering .sib-archive-head{animation:sibArchiveEnter .95s cubic-bezier(.16,1,.3,1) both}
@keyframes sibArchiveEnter{from{opacity:0;transform:translateY(54px) scale(.985)}to{opacity:1;transform:none}}

/* Reveals: staggered, and directional per theme. --sib-stagger is set by the
   observer so each child of a module lands a beat after the one above it. */
[data-reveal]{opacity:0;transform:translateY(35px);transition:opacity .65s,transform .65s,filter .65s,clip-path .65s}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal].is-visible>*:not(.sib-particles){animation:sibChildIn .62s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--sib-stagger,0ms)}
@keyframes sibChildIn{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}

/* --------------------------------------------------------------------------
   4. Ambient particles.

   One shared layer per host element; every bit removes itself on animationend,
   so a page left open does not accumulate nodes.
   -------------------------------------------------------------------------- */
.sib-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}.sib-particles.is-viewport{position:fixed;z-index:1300}
.sib-module,.sib-archive,.sib-redaction,.sib-pact details{position:relative}
.sib-bit{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:var(--tint);animation:sibFall var(--dur) linear var(--delay) both}
.sib-bit-scrap{border-radius:2px}
.sib-bit-mote{border-radius:50%;opacity:.75}
.sib-bit-pixel{border-radius:0;box-shadow:0 0 8px currentColor}
.sib-bit-petal{border-radius:50% 12% 50% 12%}
@keyframes sibFall{
	0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
	12%{opacity:1}
	100%{opacity:0;transform:translate3d(var(--drift),108vh,0) rotate(var(--spin))}
}

/* --------------------------------------------------------------------------
   5. Reading progress.
   -------------------------------------------------------------------------- */
.sib-progress{position:fixed;z-index:1200;top:0;left:0;right:0;height:5px;background:rgba(0,0,0,.12);opacity:0;transition:opacity .4s;pointer-events:none}
.sib-receiver.is-open .sib-progress{opacity:1}
.sib-progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--sib-accent),var(--sib-second),var(--sib-soft))}
.sib-receiver.theme-pixel-squad .sib-progress{background:rgba(72,220,199,.14)}

/* --------------------------------------------------------------------------
   6. Photo frames: a small parallax tilt on pointer devices.
   -------------------------------------------------------------------------- */
[data-tilt]{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
@media (hover:hover){
	.sib-photo-slot[data-tilt]:hover,.sib-receiver-gallery figure[data-tilt]:hover{
		transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(14px);
		z-index:4;
	}
}
.sib-photo-slot img,.sib-receiver-gallery img{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sib-photo-slot[data-tilt]:hover img,.sib-receiver-gallery figure[data-tilt]:hover img{transform:scale(1.035)}

/* --------------------------------------------------------------------------
   7. Redaction strip and the sealed pact.
   -------------------------------------------------------------------------- */
.sib-redaction{position:relative;overflow:hidden;cursor:pointer}
.sib-redaction:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%)}
.sib-redaction:hover:before{animation:sibSheen 1.1s ease-out}
@keyframes sibSheen{to{transform:translateX(120%)}}
.sib-redaction.is-revealed{animation:sibRevealNote .55s cubic-bezier(.16,1,.3,1) both}
.sib-pact summary{position:relative;transition:letter-spacing .3s,background .3s}
.sib-pact summary:hover{letter-spacing:.18em}
.sib-pact details[open] summary{background:rgba(0,0,0,.16)}

/* The award seal lands like a stamp when its module scrolls in. */
.sib-award.is-visible .sib-award-seal{animation:sibStamp .72s cubic-bezier(.2,1.5,.4,1) both;animation-delay:.18s}
@keyframes sibStamp{0%{opacity:0;scale:2.6;rotate:-22deg}60%{opacity:1;scale:.92;rotate:4deg}100%{opacity:1;scale:1;rotate:0deg}}

/* --------------------------------------------------------------------------
   8. Builder — the four style swatches.

   Each swatch now paints from its own palette. Previously --demo-* was defined
   once, in the archive-pop values, and never overridden, so all four previews
   showed the same orange accent regardless of the theme they described.
   -------------------------------------------------------------------------- */
.sib-theme-choice.sib-theme-archive-pop{--demo-paper:#f4f0e5;--demo-ink:#17233c;--demo-accent:#ff5b35;--demo-second:#2962ff;--demo-soft:#ffd95a}
.sib-theme-choice.sib-theme-film-file{--demo-paper:#29271f;--demo-ink:#eee9da;--demo-accent:#b6482a;--demo-second:#65735b;--demo-soft:#d8c792}
.sib-theme-choice.sib-theme-pixel-squad{--demo-paper:#090c19;--demo-ink:#f8f2df;--demo-accent:#ff4f8b;--demo-second:#48dcc7;--demo-soft:#ffd34d}
.sib-theme-choice.sib-theme-rakhi-thread{--demo-paper:#fff6e2;--demo-ink:#31204f;--demo-accent:#d9472b;--demo-second:#5636a5;--demo-soft:#f4b942}
.sib-theme-choice{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.sib-theme-choice:hover{transform:translateY(-3px)}
.sib-theme-demo em{position:absolute;inset:auto 8px 8px;height:3px;background:var(--demo-accent)}

/* Archive Pop: three taped file cards behind a tab. */
.sib-theme-archive-pop .sib-theme-demo{align-items:flex-end;background:var(--demo-paper);background-image:linear-gradient(rgba(23,35,60,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(23,35,60,.08) 1px,transparent 1px);background-size:9px 9px}
.sib-theme-archive-pop .sib-theme-demo i{border:2px solid var(--demo-ink)}
.sib-theme-archive-pop .sib-theme-demo i:nth-child(1){height:56%;background:var(--demo-accent)}
.sib-theme-archive-pop .sib-theme-demo i:nth-child(2){height:74%;background:var(--demo-soft)}
.sib-theme-archive-pop .sib-theme-demo i:nth-child(3){height:44%;background:var(--demo-second)}

/* Film Reel: a strip of frames between sprocket holes. */
.sib-theme-film-file .sib-theme-demo{align-items:center;background:var(--demo-paper);background-image:radial-gradient(circle,var(--demo-ink) 0 2px,transparent 2.5px);background-position:4px 4px;background-size:12px 12px}
.sib-theme-film-file .sib-theme-demo i{height:44%;border:2px solid var(--demo-soft);background:var(--demo-second)}
.sib-theme-film-file .sib-theme-demo i:nth-child(2){background:var(--demo-accent)}
.sib-theme-film-file .sib-theme-demo i:nth-child(3){background:var(--demo-ink)}

/* Pixel Co-op: three HUD bars over scanlines. */
.sib-theme-pixel-squad .sib-theme-demo{align-items:flex-end;background:var(--demo-paper);background-image:linear-gradient(rgba(72,220,199,.14) 1px,transparent 1px);background-size:100% 5px}
.sib-theme-pixel-squad .sib-theme-demo i{box-shadow:3px 3px 0 #000}
.sib-theme-pixel-squad .sib-theme-demo i:nth-child(1){height:48%;background:var(--demo-second)}
.sib-theme-pixel-squad .sib-theme-demo i:nth-child(2){height:74%;background:var(--demo-accent)}
.sib-theme-pixel-squad .sib-theme-demo i:nth-child(3){height:34%;background:var(--demo-soft)}

/* Rakhi Thread: a medallion with the woven line running through it. */
.sib-theme-rakhi-thread .sib-theme-demo{display:grid;place-items:center;padding:0;background:radial-gradient(circle at center,var(--demo-soft) 0 9px,var(--demo-accent) 10px 14px,transparent 15px),var(--demo-paper)}
.sib-theme-rakhi-thread .sib-theme-demo i{display:none}
.sib-theme-rakhi-thread .sib-theme-demo em{inset:auto;top:50%;left:0;right:0;height:5px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,var(--demo-second) 0 5px,var(--demo-soft) 5px 10px)}
.sib-theme-rakhi-thread .sib-theme-demo:before{content:"";position:absolute;z-index:2;width:22px;height:22px;border:4px double var(--demo-second);border-radius:50%;background:var(--demo-soft)}

/* A file picker should say so once a file is chosen. */
.sib-upload.has-file,.sib-compact-file.has-file{border-style:solid;box-shadow:inset 0 0 0 2px var(--sib-second)}
.sib-theme-samples{margin:1rem 0 0;font-size:.82rem;font-weight:700}
.sib-theme-samples a{font-weight:900;text-underline-offset:4px}
.sib-preview-slots{position:relative;z-index:2;width:100%}
.sib-preview-slots i.has-photo span{opacity:0}
@keyframes sibPreviewSwap{0%{opacity:.1;filter:blur(10px);scale:.94}55%{opacity:1;filter:none;scale:1.03}100%{opacity:1;filter:none;scale:1}}

/* --------------------------------------------------------------------------
   10. Sample archives.
   -------------------------------------------------------------------------- */
.sib-sample-flag{position:fixed;z-index:1500;left:50%;bottom:1rem;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;justify-content:center;max-width:min(94vw,720px);padding:.7rem 1rem;border:3px solid #17233c;background:#ffd95a;color:#17233c;box-shadow:6px 6px 0 #17233c;font-size:.78rem;transform:translateX(-50%)}
.sib-sample-flag b{font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.sib-sample-flag a{font-weight:900;color:#17233c;text-underline-offset:4px}
.sib-sample-note{max-width:760px;padding:1rem 1.2rem;border-left:5px solid var(--sib-soft);background:rgba(255,255,255,.08);font-size:.95rem}
.sib-sample-reply{max-width:760px;margin-top:1.5rem;padding:1.6rem;border:2px solid currentColor;background:rgba(255,255,255,.07)}
.sib-sample-reply>div{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem}
.sib-sample-reply>div span{display:grid;place-items:center;width:52px;height:52px;border:2px solid currentColor;font-size:1.6rem}
.sib-sample-reply>div b{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.sib-sample-reply blockquote{margin:1rem 0 0;padding-left:1.1rem;border-left:4px solid var(--sib-soft);font:italic 1.05rem/1.7 Georgia,serif}
.sib-sample-outro .sib-sample-actions{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0}
.sib-sample-outro .sib-button{background:var(--sib-soft);cursor:pointer}
.sib-sample-switch{margin-top:2.5rem;padding-top:2rem;border-top:2px solid currentColor}
.sib-sample-switch>span{display:block;margin-bottom:1rem;font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.sib-sample-switch>div{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.sib-sample-switch a{display:grid;gap:.3rem;padding:1rem;border:2px solid currentColor;text-decoration:none}
.sib-sample-switch a:hover{background:rgba(255,255,255,.1)}
.sib-sample-switch b{font-size:.95rem}
.sib-sample-switch small{font-size:.72rem;line-height:1.4;opacity:.8}

/* The strip that appears under the FAQs on the hub and every occasion page. */
.sib-samples-strip{max-width:1280px;margin:0 auto;padding:6rem 2rem}
.sib-samples-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.sib-sample-card{--demo-paper:#f4f0e5;--demo-ink:#17233c;--demo-accent:#ff5b35;--demo-second:#2962ff;--demo-soft:#ffd95a;display:grid;align-content:start;gap:.55rem;padding:1rem;border:3px solid var(--sib-ink);background:#fff;color:var(--sib-ink);text-decoration:none;box-shadow:7px 7px 0 var(--sib-ink);transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.sib-sample-card:hover{color:var(--sib-ink);transform:translate(-4px,-4px);box-shadow:11px 11px 0 var(--sib-ink)}
.sib-sample-card strong{font-size:1.15rem}
.sib-sample-card small{font-size:.8rem;line-height:1.45}
.sib-sample-card em{font-size:.76rem;font-style:normal;line-height:1.45;opacity:.75}
.sib-sample-card b{margin-top:.35rem;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--sib-second)}
.sib-sample-meta{display:flex;gap:.4rem;flex-wrap:wrap;font-size:.66rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.sib-sample-meta span{padding:.22rem .5rem;border:2px solid var(--sib-ink)}
.sib-sample-demo{position:relative;display:flex;gap:4px;align-items:flex-end;overflow:hidden;height:104px;padding:.55rem;background:var(--demo-paper)}
.sib-sample-demo i{display:block;flex:1 1 0;min-width:0;background:var(--demo-second)}
.sib-sample-demo em{position:absolute;inset:auto 8px 8px;height:3px;background:var(--demo-accent);opacity:1}
.sib-samples-all{margin-top:2rem;text-align:center}

/* Each card previews its own theme, using the same palettes as the builder. */
.sib-sample-card.sib-theme-archive-pop{--demo-paper:#f4f0e5;--demo-ink:#17233c;--demo-accent:#ff5b35;--demo-second:#2962ff;--demo-soft:#ffd95a}
.sib-sample-card.sib-theme-film-file{--demo-paper:#29271f;--demo-ink:#eee9da;--demo-accent:#b6482a;--demo-second:#65735b;--demo-soft:#d8c792}
.sib-sample-card.sib-theme-pixel-squad{--demo-paper:#090c19;--demo-ink:#f8f2df;--demo-accent:#ff4f8b;--demo-second:#48dcc7;--demo-soft:#ffd34d}
.sib-sample-card.sib-theme-rakhi-thread{--demo-paper:#fff6e2;--demo-ink:#31204f;--demo-accent:#d9472b;--demo-second:#5636a5;--demo-soft:#f4b942}
.sib-sample-card.sib-theme-archive-pop .sib-sample-demo{background-image:linear-gradient(rgba(23,35,60,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(23,35,60,.08) 1px,transparent 1px);background-size:11px 11px}
.sib-sample-card.sib-theme-archive-pop .sib-sample-demo i{border:2px solid var(--demo-ink)}
.sib-sample-card.sib-theme-archive-pop .sib-sample-demo i:nth-child(1){height:58%;background:var(--demo-accent)}
.sib-sample-card.sib-theme-archive-pop .sib-sample-demo i:nth-child(2){height:78%;background:var(--demo-soft)}
.sib-sample-card.sib-theme-archive-pop .sib-sample-demo i:nth-child(3){height:46%;background:var(--demo-second)}
.sib-sample-card.sib-theme-film-file .sib-sample-demo{align-items:center;background-image:radial-gradient(circle,var(--demo-ink) 0 2px,transparent 2.5px);background-position:5px 5px;background-size:14px 14px}
.sib-sample-card.sib-theme-film-file .sib-sample-demo i{height:46%;border:2px solid var(--demo-soft);background:var(--demo-second)}
.sib-sample-card.sib-theme-film-file .sib-sample-demo i:nth-child(2){background:var(--demo-accent)}
.sib-sample-card.sib-theme-film-file .sib-sample-demo i:nth-child(3){background:var(--demo-ink)}
.sib-sample-card.sib-theme-pixel-squad .sib-sample-demo{background-image:linear-gradient(rgba(72,220,199,.16) 1px,transparent 1px);background-size:100% 5px}
.sib-sample-card.sib-theme-pixel-squad .sib-sample-demo i{box-shadow:3px 3px 0 #000}
.sib-sample-card.sib-theme-pixel-squad .sib-sample-demo i:nth-child(1){height:50%;background:var(--demo-second)}
.sib-sample-card.sib-theme-pixel-squad .sib-sample-demo i:nth-child(2){height:78%;background:var(--demo-accent)}
.sib-sample-card.sib-theme-pixel-squad .sib-sample-demo i:nth-child(3){height:36%;background:var(--demo-soft)}
.sib-sample-card.sib-theme-rakhi-thread .sib-sample-demo{display:grid;place-items:center;padding:0;background:radial-gradient(circle at center,var(--demo-soft) 0 12px,var(--demo-accent) 13px 19px,transparent 20px),var(--demo-paper)}
.sib-sample-card.sib-theme-rakhi-thread .sib-sample-demo i{display:none}
.sib-sample-card.sib-theme-rakhi-thread .sib-sample-demo em{inset:auto;top:50%;left:0;right:0;height:6px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,var(--demo-second) 0 6px,var(--demo-soft) 6px 12px)}
.sib-sample-card.sib-theme-rakhi-thread .sib-sample-demo:before{content:"";position:absolute;z-index:2;width:30px;height:30px;border:5px double var(--demo-second);border-radius:50%;background:var(--demo-soft)}

/* The gallery page. */
.sib-samples-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.75fr);gap:5vw;align-items:center;padding:6rem max(5vw,calc((100vw - 1240px)/2));border-bottom:3px solid var(--sib-ink);background-color:var(--sib-paper);background-image:linear-gradient(rgba(23,35,60,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(23,35,60,.055) 1px,transparent 1px);background-size:36px 36px}
.sib-samples-hero h1{font-size:clamp(2.8rem,5.6vw,5.6rem)}
.sib-samples-legend{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0;padding:0;list-style:none}
.sib-samples-legend li{padding:1.2rem;border:3px solid var(--sib-ink);background:#fff;box-shadow:6px 6px 0 var(--sib-ink)}
.sib-samples-legend b{display:block;font:900 2.6rem/1 "Arial Black",sans-serif;color:var(--sib-second)}
.sib-samples-legend span{font-size:.78rem;font-weight:700}
.sib-samples-inside{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;padding:7rem max(5vw,calc((100vw - 1280px)/2));background:var(--sib-ink);color:var(--sib-paper)}
.sib-samples-files{display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
.sib-samples-files li{display:grid;grid-template-columns:64px 1fr;gap:1rem;align-items:start;padding:1.1rem;border:2px solid rgba(244,240,229,.35)}
.sib-samples-files b{font:900 1.5rem/1 "Arial Black",sans-serif;color:var(--sib-soft)}
.sib-samples-files h3{margin:0 0 .3rem;font-size:1.15rem}
.sib-samples-files p{margin:0;font-size:.88rem;opacity:.85}

/* --------------------------------------------------------------------------
   11. Responsive and reduced motion.
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
	.sib-samples-hero,.sib-samples-inside{grid-template-columns:1fr}
	.sib-samples-grid{grid-template-columns:repeat(2,1fr)}
	.sib-sample-switch>div{grid-template-columns:1fr}
}
@media (max-width:760px){
	.sib-samples-strip{padding:4rem 1.2rem}
	.sib-samples-grid{grid-template-columns:1fr}
	.sib-samples-hero,.sib-samples-inside{padding:4rem 1.2rem}
	.sib-sample-flag{left:0;right:0;bottom:0;max-width:100%;border-width:3px 0 0;box-shadow:none;transform:none;text-align:center}
	.sib-progress{height:4px}
}


/* ==========================================================================
   12. WHY THE EFFECTS WERE NOT VISIBLE, AND THE FIXES
   ========================================================================== */

/* --------------------------------------------------------------------------
   12a. Full-bleed without a phantom scrollbar.

   .sib-scope escapes Bootstrap's <main class="container"> with width:100vw.
   100vw counts the scrollbar, so on every desktop the section was about 15px
   wider than the visible page: a horizontal scrollbar, a hairline of stray
   background down the right edge, and every centred hero sitting fractionally
   off-centre.

   overflow-x:clip rather than hidden, because hidden turns <body> into a
   scroll container and breaks position:sticky — which the builder preview and
   the feature intro both rely on.
   -------------------------------------------------------------------------- */
body:has(.sib-scope){overflow-x:clip}
.sib-scope{margin-bottom:-1.5rem}

/* --------------------------------------------------------------------------
   12a-ii. Why .sib-scope clips rather than hides.

   overflow:hidden establishes a scroll container. Every position:sticky
   descendant then sticks relative to *that* box — and since it is sized by its
   own content and never scrolls, sticky silently resolves to static. Both
   sticky elements in this feature sit inside .sib-scope, so neither had ever
   worked: the builder's live cover preview scrolled away the moment the reader
   started filling in the form beside it, and the feature intro on the hub did
   the same.

   overflow:clip crops identically but does not create a scroll container, so
   sticky resolves against the viewport as intended. The clipping this rule was
   added for is unchanged.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   12b. The cover must never strand the reader.

   The inline flag in view.php makes the cover a fixed overlay before first
   paint, which is what stops it flashing through the layout. If the behaviour
   bundle then fails to arrive, that overlay has no working button and the page
   is unusable. The script sets .sib-ready once its listeners are bound, and
   the inline failsafe withdraws .sib-js when that never happens — the cover
   falls back to an ordinary in-flow section above the archive.
   -------------------------------------------------------------------------- */
.sib-receiver.sib-js:not(.sib-ready) .sib-receiver-cover{cursor:progress}

/* --------------------------------------------------------------------------
   12c. Reduced motion: less movement, not less design.

   The rule here used to be `.sib-scope *{animation:none!important;transition:
   none!important}`. Any reader whose system reports reduced motion — on
   Windows 11 that is simply Settings > Accessibility > Visual effects >
   Animation effects switched off, a common preference and one many machines
   ship with — was served a page with no transition, no reveal, no hover
   feedback and no opening sequence anywhere at all. It read as an unfinished
   page rather than a considered one, which is the opposite of respecting the
   preference.

   The preference is about vestibular safety, so what has to go is movement:
   travel, parallax, spin, scale. A cross-fade and a colour change carry no
   motion signal and are explicitly fine, so they stay. The page still feels
   alive; nothing slides, flies or zooms.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
	/* Motion-based decoration goes entirely. */
	body:not(.sib-motion-full) .sib-particles,
	body:not(.sib-motion-full) .sib-cover-scene,
	body:not(.sib-motion-full) .sib-cover-noise{display:none!important}
	/* Anything that travels, spins or scales is pinned to its resting state. */
	body:not(.sib-motion-full) .sib-scope *{scroll-behavior:auto!important}
	body:not(.sib-motion-full) .sib-receiver.sib-js .sib-card-mark,
	body:not(.sib-motion-full) .sib-award.is-visible .sib-award-seal,
	body:not(.sib-motion-full) .theme-pixel-squad .sib-open-prompt{animation:none!important}
	body:not(.sib-motion-full) [data-tilt]{transform:none!important}
	body:not(.sib-motion-full) .sib-redaction:hover{transform:none!important}
	body:not(.sib-motion-full) .sib-redaction:hover:before{animation:none!important}
	body:not(.sib-motion-full) .sib-pact summary:hover{letter-spacing:.12em}
	body:not(.sib-motion-full) .sib-button:hover,
	body:not(.sib-motion-full) .sib-occasion-card:hover,
	body:not(.sib-motion-full) .sib-sample-card:hover,
	body:not(.sib-motion-full) .sib-theme-choice:hover{transform:none!important}
	/* What remains is a fade. The entrances keep their timing, so the page
	   still resolves in a deliberate order — it simply no longer travels. */
	body:not(.sib-motion-full) .sib-receiver.sib-js .sib-arrival-line,
	body:not(.sib-motion-full) .sib-receiver.sib-js .sib-cover-card,
	body:not(.sib-motion-full) .sib-receiver.sib-js .sib-cover-hint{
		animation-name:sibFadeOnly!important;animation-duration:.45s!important
	}
	body:not(.sib-motion-full) .sib-receiver-cover.is-open{animation:sibFadeOut .42s ease forwards!important}
	body:not(.sib-motion-full) .sib-archive.is-entering .sib-archive-head{animation:sibFadeOnly .5s ease both!important}
	body:not(.sib-motion-full) [data-reveal]{opacity:0;transform:none!important;filter:none!important;clip-path:none!important;transition:opacity .5s ease!important}
	body:not(.sib-motion-full) [data-reveal].is-visible{opacity:1}
	body:not(.sib-motion-full) [data-reveal].is-visible>*:not(.sib-particles){animation-name:sibFadeOnly!important;animation-duration:.45s!important}
	body:not(.sib-motion-full) .sib-redaction.is-revealed{animation:sibFadeOnly .4s ease both!important}
	body:not(.sib-motion-full) .sib-builder-panel.is-current{animation:sibFadeOnly .3s ease both!important}
	/* The cover card and the photo viewer, folded in from section 16 so
	   that one block decides what reduced motion means for this feature. */
	/* The card still opens, it simply does not perform. */
	body:not(.sib-motion-full) .sib-cover-card.is-opening .sib-card-flap,
	body:not(.sib-motion-full) .sib-cover-card.is-opening .sib-card-letter,
	body:not(.sib-motion-full) .sib-cover-card.is-opening .sib-card-object,
	body:not(.sib-motion-full) .sib-cover-card.is-opening .sib-card-tie i,
	body:not(.sib-motion-full) .sib-cover-card.is-opening .sib-card-tie:after{animation:sibFadeOut .4s ease forwards!important}
	body:not(.sib-motion-full) .sib-cover-card:hover .sib-card-object,
	body:not(.sib-motion-full) .sib-cover-card:focus-visible .sib-card-object{transform:none!important}
	body:not(.sib-motion-full) .sib-open-pulse{animation:none!important}
	body:not(.sib-motion-full) .sib-lightbox.is-open .sib-lightbox-slide figcaption{animation:sibFadeOnly .4s ease both!important}
	body:not(.sib-motion-full) .sib-lightbox-close:hover,
	body:not(.sib-motion-full) .sib-lightbox-nav:hover{transform:none!important}
	body:not(.sib-motion-full) .sib-photo-zoom{opacity:1;transform:none}


	/* The offer to turn the full opening back on is only shown to someone
	   whose system actually asked for less. */
	body:not(.sib-motion-full) .sib-motion-note{display:flex}
}
@keyframes sibFadeOnly{from{opacity:0}to{opacity:1}}
@keyframes sibFadeOut{from{opacity:1}to{opacity:0}}

/* --------------------------------------------------------------------------
   12d. Mobile: the themes were being hidden rather than adapted.

   Two rules did most of the damage. `.sib-cover-scene i{opacity:.08!important}`
   faded every theme's cover scenery to the point of invisibility, so all four
   themes arrived as the same near-blank rectangle on a phone. And the builder
   preview went position:static beneath a four-chapter form — roughly two
   thousand pixels below the theme picker, so choosing a theme on mobile
   appeared to do nothing whatsoever.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
	/* Scenery scaled for the smaller canvas instead of faded out of it. */
	.sib-cover-scene i{opacity:.16!important}
	.sib-receiver.theme-archive-pop .sib-cover-scene i{width:62vw;height:38vh}
	.sib-receiver.theme-archive-pop .sib-cover-scene i:nth-child(1){left:-16vw;top:8vh}
	.sib-receiver.theme-archive-pop .sib-cover-scene i:nth-child(2){right:-14vw;top:54vh}
	.sib-receiver.theme-film-file .sib-cover-scene:before,
	.sib-receiver.theme-film-file .sib-cover-scene:after{height:17px;background-size:20px 17px}
	.sib-receiver.theme-rakhi-thread .sib-cover-scene:before,
	.sib-receiver.theme-rakhi-thread .sib-cover-scene:after{width:32%;height:6px}

	/* The cover fits the visible viewport. 100vh on a phone measures past the
	   browser chrome, which pushed the open button under the URL bar. */
	.sib-receiver.sib-js .sib-receiver-cover{padding:3.5rem 1.2rem}
	.sib-receiver-cover{min-height:100svh}
	

	/* The modules were measured for a desktop column. Six rem of padding above
	   and below each of eight files is most of a phone screen spent on nothing. */
	.sib-module{padding:3.5rem 1.2rem}
	.sib-archive-head{padding:4rem 1.2rem}
	.sib-archive-head h1{margin:1.5rem 0;font-size:clamp(2.3rem,10vw,3.2rem)}
	.sib-module h2{font-size:clamp(1.8rem,7.5vw,2.4rem)}
	.sib-origin p,.sib-chaos p{font-size:1.05rem}
	.sib-award{margin:3.5rem 1rem;padding:3.5rem 1.2rem}
	.sib-award-seal{width:74px;height:74px;margin:-5.3rem auto 1.5rem;font-size:2.1rem}
	.sib-photo-pair{gap:2.5rem;margin-top:2rem}
	.sib-opening-note{font-size:1.02rem}
	.sib-progress{height:4px}

	/* The sample banner is fixed to the bottom edge, so the closing strip needs
	   room to clear it rather than sitting underneath. */
	.sib-receiver:has(.sib-sample-flag) .sib-receiver-foot{padding-bottom:8rem}
	.sib-receiver:has(.sib-sample-flag) .sib-sample-outro{padding-bottom:5rem}
}

@media (max-width:1000px){
	/* Preview above the form and pinned, so the theme picker in chapter two
	   changes something the reader can actually see while picking. */
	.sib-builder-grid{display:flex;flex-direction:column;padding:1.5rem 1rem}
	
	.sib-builder-form{width:100%;max-width:780px;margin:0 auto}
	
	
}

/* ==========================================================================
   13. THE COVER AS A PHYSICAL OBJECT
   --------------------------------------------------------------------------
   The cover used to be a full-bleed section that faded or wiped away — a page
   transition, not an opening. Wish Link gets this right by building an actual
   card: a perspective wrapper, a preserve-3d object, a backing card offset
   behind it, a printed face, a hinged flap and a letter that rises out. The
   same construction is used here, and each of the four themes dresses those
   parts as a different object.
   ========================================================================== */

.sib-receiver-cover{display:grid;place-items:center;align-content:center;gap:0}
.sib-arrival-line{position:relative;z-index:2;max-width:26ch;margin:0 0 1.6rem;font-size:.82rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.sib-cover-hint{position:relative;z-index:2;margin-top:1.5rem;font-size:.72rem;opacity:.6}

.sib-cover-card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:auto;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;perspective:1400px}
.sib-card-object{position:relative;display:block;width:min(78vw,21rem);aspect-ratio:.72;transform-style:preserve-3d;filter:drop-shadow(0 30px 38px rgba(0,0,0,.34));transition:transform .4s cubic-bezier(.16,1,.3,1),filter .4s}
.sib-cover-card:hover .sib-card-object,
.sib-cover-card:focus-visible .sib-card-object{transform:translateY(-.6rem) rotateX(4deg);filter:drop-shadow(0 44px 50px rgba(0,0,0,.42))}
.sib-cover-card[disabled]{cursor:default}

/* The card sitting behind, which is what gives the object thickness. */
.sib-card-back{position:absolute;inset:.55rem -.4rem -.55rem .5rem;background:var(--sib-accent);transform:translateZ(-2px) rotate(1.6deg)}

/* The document that rises out from under the lid as it swings. */
.sib-card-letter{position:absolute;z-index:2;left:50%;top:16%;display:grid;align-content:start;gap:7px;width:78%;height:82%;padding:1.5rem 1.1rem;background:linear-gradient(180deg,#fffdf8,#f3ece0);box-shadow:0 14px 26px rgba(0,0,0,.26);opacity:0;transform:translate(-50%,34%)}
.sib-card-letter i{display:block;height:5px;border-radius:2px;background:rgba(23,35,60,.17)}
.sib-card-letter i:nth-child(2){width:82%}
.sib-card-letter i:nth-child(3){width:64%}
.sib-card-letter i:nth-child(4){width:88%}

.sib-card-face{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:2rem 1.5rem;color:var(--sib-ink);background:var(--sib-paper);backface-visibility:hidden}
.sib-card-face:before{content:"";position:absolute;inset:.7rem;border:2px solid currentColor;opacity:.2;pointer-events:none}
.sib-card-corner{position:absolute;width:3.2rem;height:3.2rem;border:solid currentColor;opacity:.35}
.sib-card-corner-a{top:1rem;left:1rem;border-width:3px 0 0 3px}
.sib-card-corner-b{right:1rem;bottom:1rem;border-width:0 3px 3px 0}
.sib-card-kicker{position:relative;z-index:2;font-size:.58rem;font-weight:900;letter-spacing:.16em;opacity:.62}
.sib-card-mark{position:relative;z-index:2;display:grid;place-items:center;width:3.1rem;height:3.1rem;margin:1rem 0 .9rem;border:2px solid currentColor;border-radius:50%;background:var(--sib-accent);color:#fff;font:900 .8rem/1 "Arial Black",sans-serif}
.sib-card-for{position:relative;z-index:2;margin:0;font-size:.56rem;font-weight:900;letter-spacing:.15em;opacity:.72}
.sib-card-name{position:relative;z-index:2;max-width:11ch;margin:.35rem 0 0;font:900 clamp(2rem,8.5vw,3rem)/.92 "Arial Black","Trebuchet MS",sans-serif;letter-spacing:-.04em;overflow-wrap:anywhere}
.sib-card-rule{position:relative;z-index:2;width:2.6rem;height:3px;margin:.75rem 0;background:var(--sib-accent)}
.sib-card-title{position:relative;z-index:2;max-width:20ch;font-size:.76rem;line-height:1.45;opacity:.74;overflow-wrap:anywhere}
.sib-card-seal{position:relative;z-index:2;display:grid;place-items:center;width:2.6rem;height:2.6rem;margin-top:1.3rem;border-radius:50%;background:var(--sib-second);color:#fff;font-size:1rem;box-shadow:inset 0 0 0 3px rgba(255,255,255,.16)}

/* Lid, tab and tie. Each theme decides which of the three it shows. */
.sib-card-flap{position:absolute;z-index:4;left:0;right:0;top:0;height:46%;transform-origin:top;backface-visibility:hidden;background:var(--sib-soft);border:3px solid var(--sib-ink);border-bottom:0}
.sib-card-tab{position:absolute;z-index:5;top:-26px;left:8%;width:38%;height:26px;border:3px solid var(--sib-ink);border-bottom:0;background:var(--sib-accent)}
.sib-card-tie{position:absolute;z-index:6;inset:0;display:none}

.sib-open-prompt{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.8rem;padding:.7rem 1.15rem;border:2px solid currentColor;border-radius:999px;font-size:.74rem;font-weight:900;letter-spacing:.07em}
.sib-open-pulse{width:.55rem;height:.55rem;border-radius:50%;background:var(--sib-accent);box-shadow:0 0 0 0 var(--sib-accent);animation:sibOpenPulse 1.9s ease-out infinite}
@keyframes sibOpenPulse{70%,100%{box-shadow:0 0 0 .7rem transparent}}

/* --------------------------------------------------------------------------
   13a. The opening, in three beats.

   The lid swings, the document rises, the object drops away. Only the last
   beat removes the cover, which is what makes this read as something being
   opened rather than a screen being replaced.
   -------------------------------------------------------------------------- */
.sib-cover-card.is-opening .sib-card-flap{animation:sibFlapOpen .82s cubic-bezier(.35,.02,.2,1) forwards}
.sib-cover-card.is-opening .sib-card-letter{animation:sibLetterRise 1.15s .22s cubic-bezier(.2,.75,.2,1) both}
.sib-cover-card.is-opening .sib-card-object{animation:sibCardAway 1.5s cubic-bezier(.35,.02,.25,1) both}
.sib-cover-card.is-opening .sib-open-prompt{animation:sibFadeOut .3s ease forwards}

@keyframes sibFlapOpen{0%,10%{transform:rotateX(0)}62%,100%{transform:rotateX(-172deg)}}
@keyframes sibLetterRise{0%,14%{opacity:0;transform:translate(-50%,34%)}40%{opacity:1}66%{opacity:1;transform:translate(-50%,-42%)}100%{opacity:0;transform:translate(-50%,-58%)}}
@keyframes sibCardAway{0%,52%{opacity:1;transform:translateY(0) rotateX(0) scale(1)}72%{opacity:1;transform:translateY(1.1rem) rotateX(-7deg) scale(1.03)}100%{opacity:0;transform:translateY(9rem) rotateX(-32deg) scale(.88)}}

/* --------------------------------------------------------------------------
   13b. Archive Pop — a sealed case file.
   -------------------------------------------------------------------------- */
.theme-archive-pop .sib-card-object{filter:drop-shadow(12px 12px 0 rgba(23,35,60,.9))}
.theme-archive-pop .sib-card-face{background:var(--sib-paper);border:3px solid var(--sib-ink);background-image:linear-gradient(rgba(23,35,60,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(23,35,60,.05) 1px,transparent 1px);background-size:22px 22px}
.theme-archive-pop .sib-card-back{background:var(--sib-soft);border:3px solid var(--sib-ink)}
.theme-archive-pop .sib-card-flap{background:var(--sib-second);border-color:var(--sib-ink)}
.theme-archive-pop .sib-card-flap:after{content:"CONFIDENTIAL";position:absolute;left:50%;bottom:14%;color:#fff;font:900 .68rem/1 "Trebuchet MS",sans-serif;letter-spacing:.2em;transform:translateX(-50%) rotate(-3deg)}
.theme-archive-pop .sib-card-seal{border-radius:0;background:var(--sib-accent);transform:rotate(-8deg)}

/* --------------------------------------------------------------------------
   13c. Film Reel — a photo sleeve with sprocket edges.
   -------------------------------------------------------------------------- */
.theme-film-file .sib-card-object{aspect-ratio:.78;filter:drop-shadow(0 26px 40px rgba(32,40,31,.5))}
.theme-film-file .sib-card-face{border:10px solid #29271f;border-radius:2px;background:#e7dfcc;color:#20281f;font-family:"Courier New",monospace}
.theme-film-file .sib-card-face:before{inset:.5rem;border-width:1px;opacity:.32}
.theme-film-file .sib-card-name{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.02em}
.theme-film-file .sib-card-back{background:#b6482a}
.theme-film-file .sib-card-corner{display:none}
/* The lid is the sleeve: it slides up rather than hinging over. */
.theme-film-file .sib-card-flap{height:100%;border:10px solid #29271f;background:#3b382c;background-image:radial-gradient(circle,#e7dfcc 0 4px,transparent 4.5px);background-position:0 6px;background-size:22px 100%;transform-origin:center}
.theme-film-file .sib-card-tab{display:none}
.theme-film-file .sib-card-seal{border-radius:2px;background:#b6482a}
.theme-film-file .sib-cover-card.is-opening .sib-card-flap,
.theme-film-file .sib-card-flap{transform-origin:center}
.theme-film-file .sib-cover-card.is-opening .sib-card-flap{animation:sibSleeveSlide .88s cubic-bezier(.5,0,.2,1) forwards}
@keyframes sibSleeveSlide{0%,10%{transform:translateY(0)}100%{transform:translateY(-104%)}}

/* --------------------------------------------------------------------------
   13d. Pixel Co-op — a cartridge seating into a slot, then booting.
   -------------------------------------------------------------------------- */
.theme-pixel-squad .sib-card-object{filter:drop-shadow(10px 10px 0 #ff4f8b)}
.theme-pixel-squad .sib-card-face{border:3px solid #48dcc7;background:#0d1124;color:#f8f2df;font-family:Consolas,"Courier New",monospace;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.theme-pixel-squad .sib-card-face:before{border-color:#48dcc7;opacity:.32}
.theme-pixel-squad .sib-card-face:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(72,220,199,.07) 3px 4px);pointer-events:none}
.theme-pixel-squad .sib-card-name{color:#ffd34d;text-transform:uppercase;text-shadow:4px 4px 0 #ff4f8b}
.theme-pixel-squad .sib-card-mark{border-radius:0;border-color:#48dcc7;background:#171d38;color:#ffd34d}
.theme-pixel-squad .sib-card-rule{background:#48dcc7}
.theme-pixel-squad .sib-card-back{background:#ff4f8b}
.theme-pixel-squad .sib-card-seal{border-radius:0;background:#48dcc7;color:#090c19}
.theme-pixel-squad .sib-card-letter{background:#12172e;border:2px solid #48dcc7;box-shadow:8px 8px 0 #ff4f8b}
.theme-pixel-squad .sib-card-letter i{background:rgba(72,220,199,.4)}
/* The lid is the cartridge label; it lifts out of the slot. */
.theme-pixel-squad .sib-card-flap{height:34%;border:3px solid #48dcc7;background:#171d38;background-image:repeating-linear-gradient(90deg,#48dcc7 0 12px,transparent 12px 24px);background-position:0 bottom;background-size:100% 8px;background-repeat:no-repeat}
.theme-pixel-squad .sib-card-tab{border-color:#48dcc7;background:#ffd34d}
.theme-pixel-squad .sib-cover-card.is-opening .sib-card-flap{animation:sibCartridgeOut .8s steps(9,end) forwards}
@keyframes sibCartridgeOut{0%,12%{transform:translateY(0);opacity:1}100%{transform:translateY(-140%);opacity:0}}
.theme-pixel-squad .sib-cover-card.is-opening .sib-card-object{animation:sibCardAwayPixel 1.32s steps(12,end) both}
@keyframes sibCardAwayPixel{0%,50%{opacity:1;filter:none;transform:none}70%{opacity:1;filter:brightness(2.6)}100%{opacity:0;filter:brightness(3);transform:scaleY(.02)}}

/* --------------------------------------------------------------------------
   13e. Rakhi Thread — a keepsake box tied shut, untied by the thread.
   -------------------------------------------------------------------------- */
.theme-rakhi-thread .sib-card-object{aspect-ratio:.8;filter:drop-shadow(0 24px 44px rgba(86,54,165,.34))}
.theme-rakhi-thread .sib-card-face{border:8px double #5636a5;border-radius:26px;background:radial-gradient(circle at 50% 12%,rgba(244,185,66,.4),transparent 46%),#fff6e2;color:#31204f}
.theme-rakhi-thread .sib-card-face:before{inset:1rem;border:2px solid #d9472b;border-radius:18px;opacity:.4}
.theme-rakhi-thread .sib-card-corner{display:none}
.theme-rakhi-thread .sib-card-name{font-family:Georgia,"Times New Roman",serif;font-weight:700;color:#5636a5}
.theme-rakhi-thread .sib-card-mark{border:4px double #5636a5;background:#f4b942;color:#31204f}
.theme-rakhi-thread .sib-card-rule{width:4rem;background:repeating-linear-gradient(90deg,#5636a5 0 6px,#f4b942 6px 12px,#d9472b 12px 18px)}
.theme-rakhi-thread .sib-card-back{background:#5636a5;border-radius:26px}
.theme-rakhi-thread .sib-card-seal{background:#d9472b}
.theme-rakhi-thread .sib-card-letter{border-radius:18px;background:linear-gradient(180deg,#fffaf0,#fbeacd)}
.theme-rakhi-thread .sib-card-letter i{background:rgba(86,54,165,.2)}
.theme-rakhi-thread .sib-card-flap{height:42%;border:8px double #5636a5;border-bottom:0;border-radius:26px 26px 0 0;background:linear-gradient(180deg,#fce8b7,#f4b942)}
.theme-rakhi-thread .sib-card-tab{display:none}
/* The tie is the rakhi: two threads crossing the box, and a knot at the centre. */
.theme-rakhi-thread .sib-card-tie{display:block}
.theme-rakhi-thread .sib-card-tie i{position:absolute;background:repeating-linear-gradient(90deg,#5636a5 0 7px,#f4b942 7px 14px,#d9472b 14px 21px)}
.theme-rakhi-thread .sib-card-tie i:nth-child(1){left:0;right:0;top:42%;height:9px}
.theme-rakhi-thread .sib-card-tie i:nth-child(2){top:0;bottom:0;left:50%;width:9px;margin-left:-4.5px;background:repeating-linear-gradient(180deg,#5636a5 0 7px,#f4b942 7px 14px,#d9472b 14px 21px)}
.theme-rakhi-thread .sib-card-tie:after{content:"";position:absolute;z-index:2;left:50%;top:42%;width:36px;height:36px;margin:-18px 0 0 -18px;border:6px double #5636a5;border-radius:50%;background:#f4b942}
.theme-rakhi-thread .sib-cover-card.is-opening .sib-card-tie i:nth-child(1){animation:sibUntieH .6s ease-in forwards}
.theme-rakhi-thread .sib-cover-card.is-opening .sib-card-tie i:nth-child(2){animation:sibUntieV .6s ease-in forwards}
.theme-rakhi-thread .sib-cover-card.is-opening .sib-card-tie:after{animation:sibKnotPop .6s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes sibUntieH{to{opacity:0;transform:scaleX(0)}}
@keyframes sibUntieV{to{opacity:0;transform:scaleY(0)}}
@keyframes sibKnotPop{40%{transform:scale(1.35) rotate(90deg)}100%{opacity:0;transform:scale(.2) rotate(200deg)}}
/* The lid only lifts once the thread is off. */
.theme-rakhi-thread .sib-cover-card.is-opening .sib-card-flap{animation:sibFlapOpen .8s .42s cubic-bezier(.35,.02,.2,1) forwards}
.theme-rakhi-thread .sib-cover-card.is-opening .sib-card-letter{animation:sibLetterRise 1.15s .6s cubic-bezier(.2,.75,.2,1) both}
.theme-rakhi-thread .sib-cover-card.is-opening .sib-card-object{animation:sibCardAway 1.66s cubic-bezier(.35,.02,.25,1) both}

/* Film Reel and Pixel start their letters on their own schedules too. */
.theme-film-file .sib-cover-card.is-opening .sib-card-letter{animation:sibLetterRise 1.2s .3s cubic-bezier(.2,.75,.2,1) both}
.theme-film-file .sib-cover-card.is-opening .sib-card-object{animation:sibCardAway 1.56s cubic-bezier(.35,.02,.25,1) both}

/* ==========================================================================
   14. THE THEN / NOW DIPTYCH
   --------------------------------------------------------------------------
   Two columns at every width. The module exists to put two ages beside each
   other; stacking them on a phone turned the one comparison on the page into
   two separate photographs and lost the whole idea.
   ========================================================================== */

.sib-photo-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,3.5vw,2.5rem);margin-top:3rem;align-items:start}
.sib-photo-slot{position:relative;margin:0;padding:clamp(.4rem,1.4vw,1rem);border:3px solid var(--sib-ink);background:#fff;box-shadow:9px 9px 0 var(--sib-ink)}
.sib-photo-slot:nth-child(1){transform:rotate(-1.6deg)}
.sib-photo-slot:nth-child(2){transform:rotate(1.6deg)}

/* The thread/hinge that joins the two frames into one object. */
.sib-pair-link{position:absolute;z-index:0;left:50%;top:34%;width:clamp(.75rem,3.5vw,2.5rem);height:4px;background:var(--sib-accent);transform:translateX(-50%)}
.sib-pair-link:before,.sib-pair-link:after{content:"";position:absolute;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--sib-accent)}
.sib-pair-link:before{left:-5px}
.sib-pair-link:after{right:-5px}

.sib-photo-open{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;color:inherit}
.sib-photo-open>b{position:absolute;z-index:3;top:-.65rem;left:.55rem;padding:.28rem .6rem;border:2px solid var(--sib-ink);background:var(--sib-soft);color:var(--sib-ink);font-size:clamp(.56rem,2vw,.7rem);font-weight:900;letter-spacing:.12em}
.sib-photo-open img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sib-photo-zoom{position:absolute;z-index:3;right:.5rem;bottom:.5rem;display:grid;place-items:center;width:2rem;height:2rem;border:2px solid var(--sib-ink);background:rgba(255,255,255,.92);color:var(--sib-ink);font-size:.85rem;opacity:0;transform:scale(.7);transition:opacity .25s,transform .25s}
.sib-photo-open:hover .sib-photo-zoom,.sib-photo-open:focus-visible .sib-photo-zoom{opacity:1;transform:scale(1)}
@media (hover:none){.sib-photo-zoom{opacity:.85;transform:scale(1)}}

.sib-photo-placeholder{display:grid;place-items:center;gap:.5rem;width:100%;aspect-ratio:4/3;padding:1rem;background:var(--sib-paper);text-align:center;font-size:clamp(.68rem,2.4vw,.85rem);line-height:1.45}
.sib-photo-placeholder b{padding:.28rem .6rem;border:2px solid var(--sib-ink);background:var(--sib-soft);font-size:.62rem;letter-spacing:.12em}
.sib-photo-slot figcaption{margin-top:.7rem;font-size:clamp(.7rem,2.5vw,.88rem);line-height:1.45}

/* The gallery frames are the same object, in a grid. */
.sib-receiver-gallery figure{position:relative}
.sib-receiver-gallery .sib-photo-open{cursor:zoom-in}

/* Theme dress for the diptych. */
.sib-receiver.theme-film-file .sib-photo-slot{border:10px solid #29271f;box-shadow:none}
.sib-receiver.theme-film-file .sib-pair-link{background:#b6482a}
.sib-receiver.theme-film-file .sib-pair-link:before,.sib-receiver.theme-film-file .sib-pair-link:after{background:#b6482a}
.sib-receiver.theme-pixel-squad .sib-photo-slot{border-color:#48dcc7;background:#0d1124;box-shadow:7px 7px 0 #ff4f8b}
.sib-receiver.theme-pixel-squad .sib-photo-open>b{border-color:#48dcc7;background:#ffd34d}
.sib-receiver.theme-pixel-squad .sib-pair-link,
.sib-receiver.theme-pixel-squad .sib-pair-link:before,
.sib-receiver.theme-pixel-squad .sib-pair-link:after{background:#48dcc7;border-radius:0}
.sib-receiver.theme-rakhi-thread .sib-photo-slot{border:8px double #5636a5;border-radius:130px 130px 16px 16px;box-shadow:0 16px 32px rgba(86,54,165,.16)}
.sib-receiver.theme-rakhi-thread .sib-photo-open img{border-radius:110px 110px 8px 8px}
.sib-receiver.theme-rakhi-thread .sib-photo-open>b{border-radius:999px;border-color:#5636a5;background:#f4b942}
.sib-receiver.theme-rakhi-thread .sib-pair-link{height:8px;background:repeating-linear-gradient(90deg,#5636a5 0 6px,#f4b942 6px 12px,#d9472b 12px 18px)}
.sib-receiver.theme-rakhi-thread .sib-pair-link:before,.sib-receiver.theme-rakhi-thread .sib-pair-link:after{background:#d9472b}

/* ==========================================================================
   15. THE FULL-SIZE VIEWER
   ========================================================================== */

.sib-lightbox{position:fixed;z-index:2000;inset:0;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);opacity:0;transition:opacity .24s ease}
.sib-lightbox.is-open{opacity:1}
.sib-lightbox[hidden]{display:none!important}
.sib-lightbox-backdrop{position:absolute;inset:0;background:rgba(9,12,20,.93);backdrop-filter:blur(6px);cursor:zoom-out}
.sib-lightbox-stage{position:relative;z-index:2;display:grid;place-items:center;max-width:min(96vw,1100px);max-height:100%}
.sib-lightbox-slide{display:grid;gap:1rem;margin:0;justify-items:center}
.sib-lightbox-slide[hidden]{display:none}
.sib-lightbox-slide img{display:block;max-width:100%;max-height:70vh;width:auto;height:auto;border:6px solid var(--sib-paper);background:var(--sib-paper);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.sib-lightbox-slide figcaption{display:grid;gap:.5rem;max-width:60ch;color:#f4f0e5;text-align:center}
.sib-lightbox-slide figcaption b{font-size:.66rem;font-weight:900;letter-spacing:.18em;color:var(--sib-soft)}
.sib-lightbox-slide figcaption span{font-size:clamp(.9rem,2.4vw,1.1rem);line-height:1.6}
.sib-lightbox.is-open .sib-lightbox-slide figcaption{animation:sibCaptionIn .5s .12s cubic-bezier(.16,1,.3,1) both}
@keyframes sibCaptionIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

.sib-lightbox-close,.sib-lightbox-nav{position:absolute;z-index:3;display:grid;place-items:center;border:2px solid rgba(244,240,229,.55);background:rgba(9,12,20,.6);color:#f4f0e5;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.sib-lightbox-close:hover,.sib-lightbox-nav:hover{background:var(--sib-accent);border-color:var(--sib-accent);transform:scale(1.08)}
.sib-lightbox-close{top:clamp(.75rem,3vw,1.5rem);right:clamp(.75rem,3vw,1.5rem);width:2.9rem;height:2.9rem;border-radius:50%;font-size:1rem}
.sib-lightbox-nav{top:50%;width:3.2rem;height:3.2rem;margin-top:-1.6rem;border-radius:50%;font-size:1.8rem;line-height:1}
.sib-lightbox-prev{left:clamp(.5rem,2vw,1.5rem)}
.sib-lightbox-next{right:clamp(.5rem,2vw,1.5rem)}
.sib-lightbox-count{position:absolute;z-index:3;left:50%;bottom:clamp(.75rem,3vw,1.5rem);margin:0;color:rgba(244,240,229,.72);font-size:.74rem;font-weight:900;letter-spacing:.14em;transform:translateX(-50%)}

@media (max-width:600px){
	.sib-lightbox-nav{width:2.6rem;height:2.6rem;margin-top:-1.3rem;font-size:1.4rem}
	.sib-lightbox-slide img{max-height:56vh}
}

/* ==========================================================================
   16. RESPONSIVE RULES FOR THE CARD AND THE VIEWER
   (their reduced-motion rules live in section 12c, with all the others)
   ========================================================================== */

@media (max-width:760px){
	.sib-card-object{width:min(74vw,17rem)}
	.sib-card-face{padding:1.4rem 1rem}
	.sib-card-mark{width:2.5rem;height:2.5rem;margin:.7rem 0 .6rem;font-size:.66rem}
	.sib-card-seal{width:2.1rem;height:2.1rem;margin-top:.9rem;font-size:.8rem}
	.sib-card-corner{width:2.2rem;height:2.2rem}
	.sib-arrival-line{font-size:.7rem;margin-bottom:1.1rem}
	.sib-open-prompt{margin-top:1.3rem;padding:.6rem .95rem;font-size:.68rem}

	/* The diptych stays two-up; only the frame furniture shrinks. */
	.sib-photo-pair{gap:.75rem;margin-top:2rem}
	.sib-photo-slot{box-shadow:5px 5px 0 var(--sib-ink)}
	.sib-receiver.theme-rakhi-thread .sib-photo-slot{border-radius:70px 70px 12px 12px}
	.sib-receiver.theme-rakhi-thread .sib-photo-open img{border-radius:58px 58px 6px 6px}
	.sib-receiver.theme-film-file .sib-photo-slot{border-width:5px}
	.sib-photo-zoom{width:1.6rem;height:1.6rem;font-size:.7rem}
}



/* ==========================================================================
   17. THE BUILDER PREVIEW IS THE REAL CARD
   --------------------------------------------------------------------------
   The preview renders the recipient's actual cover card, using the same
   .sib-card-* markup and the same rules, scaled down. It had drifted: the
   recipient cover became a physical card while the preview stayed a flat
   panel, so the builder was promising something that no longer existed.

   Two things have to be re-established for the card to look right in here.
   ========================================================================== */

/* 1. The tokens. .sib-builder[class*="theme-"] pins the workspace to neutral
      Archive Pop values so a dark theme cannot repaint the form the writer is
      typing into. Those are set on .sib-builder itself; re-declaring them on
      the preview subtree wins for its own descendants, !important on the
      ancestor notwithstanding — !important only settles conflicts on the same
      element, and a custom property set lower down simply inherits from there. */
.sib-builder.theme-archive-pop .sib-builder-preview{--sib-paper:#f4f0e5;--sib-ink:#17233c;--sib-accent:#ff5b35;--sib-second:#2962ff;--sib-soft:#ffd95a}
.sib-builder.theme-film-file .sib-builder-preview{--sib-paper:#eee9da;--sib-ink:#20281f;--sib-accent:#b6482a;--sib-second:#65735b;--sib-soft:#d8c792}
.sib-builder.theme-pixel-squad .sib-builder-preview{--sib-paper:#11152b;--sib-ink:#f8f2df;--sib-accent:#ff4f8b;--sib-second:#48dcc7;--sib-soft:#ffd34d}
.sib-builder.theme-rakhi-thread .sib-builder-preview{--sib-paper:#fff6e2;--sib-ink:#31204f;--sib-accent:#d9472b;--sib-second:#5636a5;--sib-soft:#f4b942}

/* 2. The stage. The card is sized in viewport units for the cover, which is
      far too large inside a sidebar, so the preview gives it its own box. */
.sib-builder-preview{min-width:0}
.sib-preview-head{display:flex;gap:.75rem;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.sib-preview-head>span{font-size:.68rem;font-weight:900;letter-spacing:.14em}
.sib-preview-toggle{display:none;align-items:center;gap:.4rem;padding:.45rem .7rem;border:2px solid #17233c;background:#ffd95a;color:#17233c;font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.sib-preview-toggle i{display:block;width:0;height:0;border:5px solid transparent;border-top-color:currentColor;margin-top:3px;transition:transform .25s}
.sib-preview-toggle[aria-expanded="true"] i{transform:rotate(180deg);margin:0 0 3px}

.sib-preview-stage{display:grid;place-items:center;padding:1.6rem 1rem 1.2rem;background:var(--sib-paper);border:2px solid var(--sib-ink);perspective:1100px}
.sib-preview-stage .sib-card-object{width:min(100%,15rem);margin:0 auto;transition:transform .45s cubic-bezier(.16,1,.3,1),filter .45s}
.sib-builder-preview .sib-card-face{padding:1.3rem .9rem}
.sib-builder-preview .sib-card-kicker{font-size:.5rem;letter-spacing:.12em}
.sib-builder-preview .sib-card-mark{width:2.3rem;height:2.3rem;margin:.65rem 0 .5rem;font-size:.6rem}
.sib-builder-preview .sib-card-for{font-size:.48rem}
.sib-builder-preview .sib-card-name{font-size:clamp(1.4rem,4.4vw,2rem)}
.sib-builder-preview .sib-card-rule{width:2rem;height:2px;margin:.55rem 0}
.sib-builder-preview .sib-card-title{font-size:.62rem;line-height:1.4}
.sib-builder-preview .sib-card-seal{width:1.9rem;height:1.9rem;margin-top:.85rem;font-size:.72rem}
.sib-builder-preview .sib-card-corner{width:2rem;height:2rem}

/* A gentle idle tilt, so the preview reads as an object rather than a picture. */
.sib-preview-stage:hover .sib-card-object{transform:translateY(-.35rem) rotateX(4deg)}

/* The then/now pair sits under the card, as it does on the finished page. */
.sib-builder-preview .sib-preview-slots{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.85rem}
.sib-builder-preview .sib-preview-slots i{position:relative;display:grid;place-items:center;height:82px;overflow:hidden;border:2px solid var(--sib-ink);background:color-mix(in srgb,var(--sib-paper) 70%,#fff);font-style:normal;font-size:.6rem;font-weight:900;letter-spacing:.1em;color:var(--sib-ink)}
.sib-builder-preview .sib-preview-slots i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sib-builder-preview .sib-preview-slots i span{position:relative;z-index:2;padding:.16rem .4rem;background:var(--sib-soft);color:#17233c}
.sib-builder-preview .sib-preview-slots i.has-photo span{opacity:0}
.sib-builder-preview>.sib-preview-body>p{margin:1rem 0 0;padding-left:.9rem;border-left:4px solid #ff5b35;font-size:.78rem;color:#17233c}

/* The card swap keeps its animation on the object itself now. */
.sib-preview-stage .sib-card-object.is-switching{animation:sibPreviewSwap .58s cubic-bezier(.16,1,.3,1) both}

/* ==========================================================================
   18. MOBILE: THE PREVIEW MUST NOT SIT ON TOP OF THE FORM
   --------------------------------------------------------------------------
   Pinning the preview open at the top of a phone screen took roughly a third
   of the viewport away from the form the writer is trying to type into, and
   covered the field they had just tapped. It is now a slim bar that stays
   pinned and out of the way, and opens on request.
   ========================================================================== */
@media (max-width:1000px){
	.sib-builder-preview{position:sticky;top:0;z-index:30;order:-1;width:100%;max-width:640px;margin:0 auto 1.25rem;padding:.5rem .6rem;border:2px solid #17233c;background:#f4f0e5;box-shadow:0 6px 14px rgba(23,35,60,.12)}
	.sib-preview-head{margin-bottom:0}
	.sib-preview-toggle{display:inline-flex}

	/* Collapsed by default: the bar alone is about 44px tall. */
	.sib-preview-body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1)}
	.sib-preview-body>*{min-height:0}
	.sib-builder-preview.is-open .sib-preview-body{grid-template-rows:1fr;padding-top:.7rem}

	.sib-preview-stage{padding:1.1rem .75rem .9rem}
	.sib-preview-stage .sib-card-object{width:min(62%,12.5rem)}
	.sib-builder-preview .sib-preview-slots i{height:64px}
	.sib-builder-preview>.sib-preview-body>p{display:none}
}

/* Only the collapsing transition is motion here; the bar itself is static. */
@media (max-width:1000px) and (prefers-reduced-motion:reduce){
	.sib-preview-body{transition:none}
}

/* ==========================================================================
   19. LETTING THE READER ASK FOR THE MOTION BACK
   --------------------------------------------------------------------------
   prefers-reduced-motion is a real preference and stays the default. But it is
   set by a single OS-wide switch — on Windows 11, Settings > Accessibility >
   Visual effects > Animation effects — and someone who turned that off for
   their desktop generally has not decided anything about a greeting card they
   were just sent. The symptom is precise: the same page plays its opening on a
   phone and not on that desktop.

   So the preference is honoured until the reader overrides it for this page,
   and the override is offered where the difference is visible.

   Every rule in the reduced-motion block is gated on
   body:not(.sib-motion-full), so one class on <body> lifts all of them at once.
   The choice is remembered per browser in localStorage.
   ========================================================================== */

.sib-motion-note{position:relative;z-index:2;display:none;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;max-width:34rem;margin:1.4rem auto 0;padding:.7rem .9rem;border:2px solid currentColor;font-size:.72rem;line-height:1.5;opacity:.9}
.sib-motion-note button{padding:.4rem .75rem;border:2px solid currentColor;background:var(--sib-accent);color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}


/* The replay control, on every archive rather than only the samples. A reader
   who liked the opening should be able to watch it again without clearing
   their session, and the sender usually wants to see what they sent. */
.sib-replay-open{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border:2px solid currentColor;background:transparent;color:inherit;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.sib-replay-open:hover{background:var(--sib-soft);color:#17233c;transform:translateY(-2px)}
.sib-receiver-foot{display:grid;gap:.8rem;justify-items:center;text-align:center}