/* Story World I: an explorable xianxia universe. Pictures first; words wait behind a click. */
#writing-world{--sw-gold:#b08a4f;--sw-soft:#f7f1e6;--sw-line:var(--global-divider-color,#e8e0d3);--sw-ink:var(--global-text-color,#30303c)}
#writing-world button{border:0;background:none;padding:0}
.sw-eyebrow{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;color:var(--sw-gold)}
.sw-shelf{display:flex;gap:1.4rem;margin:.2rem 0 1rem;font-size:.78rem}.sw-shelf b{font-family:Georgia,serif;font-weight:400;color:var(--sw-gold);margin-right:.3rem}.sw-shelf{gap:1.6rem;margin:.2rem 0 1.4rem;border-bottom:1px solid var(--sw-line)}
.sw-shelf button{font-size:.82rem!important;padding:.45rem 0 .55rem!important;margin-bottom:-1px;color:var(--muted)!important;border-bottom:2px solid transparent!important;transition:color .2s}
.sw-shelf button:hover{color:var(--sw-ink)!important}
.sw-shelf [aria-pressed=true]{color:var(--sw-ink)!important;font-weight:600;border-bottom-color:var(--sw-gold)!important}
.sw-shelf button:focus-visible{outline:2px solid var(--sw-gold);outline-offset:3px}

/* Hero */
.sw-hero{position:relative;overflow:hidden;border-radius:6px;color:#fff;aspect-ratio:16/9;min-height:360px;display:flex;align-items:flex-end}
.sw-hero-art,.sw-hero-art img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.sw-hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(52,40,82,.42),rgba(52,40,82,.12) 50%,transparent 70%),linear-gradient(transparent 45%,rgba(46,34,72,.5))}
.sw-hero-copy{position:relative;width:100%;padding:4rem 2rem 1.9rem}.sw-hero-copy>*{max-width:52%}
.sw-hero-copy .sw-eyebrow{color:#f6dfb3}
.sw-hero h3{font-family:Georgia,serif;font-weight:400;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.01em;margin:.35rem 0 .6rem;color:#fff;text-shadow:0 2px 18px rgba(40,25,60,.45)}
.sw-hero p{max-width:520px;font-size:.95rem;line-height:1.7;margin:0 0 1.3rem;color:#fbf2ea}
.sw-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.sw-actions button{padding:.6rem 1.1rem!important;border-radius:30px;font-size:.8rem;letter-spacing:.02em;transition:background .2s,transform .2s}
#sw-enter{background:#fff4dc!important;color:#3b3050!important;font-weight:600}
.sw-actions .sw-frag-open{border:1px solid rgba(255,244,220,.7)!important;color:#fff4dc!important}
.sw-actions button:hover{transform:translateY(-1px)}.sw-actions .sw-frag-open:hover{background:rgba(255,244,220,.14)!important}

/* Sections */
.sw-block{margin:3.2rem 0 0;scroll-margin-top:90px}
.sw-block-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.sw-block-head h4{font-family:Georgia,serif;font-weight:400;font-size:1.45rem;margin:0}
.sw-quiet{font-size:.72rem;color:var(--sw-gold)}.sw-quiet:hover{text-decoration:underline}

/* Six realms */
.sw-rail{display:flex;align-items:center;gap:.2rem;overflow-x:auto;padding:.3rem .1rem .8rem;scrollbar-width:thin}
.sw-rail [role=tab]{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.55rem .7rem!important;border-radius:6px;min-width:84px;transition:background .25s}
.sw-han{font-size:1.15rem;letter-spacing:.08em;font-family:'Songti SC','Noto Serif SC','STSong',serif}
.sw-en{font-size:.62rem;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.sw-rail [aria-selected=true]{background:var(--sw-soft)}.sw-rail [aria-selected=true] .sw-han{color:var(--sw-gold)}
.sw-arrow{color:var(--sw-line);font-size:.8rem;flex:0 0 auto}
.sw-stage{--st-bg:#fbf4e8;--st-ink:var(--sw-ink);--st-muted:var(--muted);--st-chip:#fff;display:grid;grid-template-columns:3fr 2fr;gap:0;border-radius:6px;overflow:hidden;background:var(--st-bg);color:var(--st-ink);transition:background .7s ease,color .7s ease}
.sw-stage:focus-visible{outline:2px solid var(--sw-gold);outline-offset:3px}
.sw-scene{margin:0;aspect-ratio:3/2;min-height:100%;position:relative;overflow:hidden}
.sw-scene img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity 1.1s ease}.sw-scene img.is-shown{opacity:1}
.sw-stage.is-portrait{grid-template-columns:1fr 1fr}.sw-stage.is-portrait .sw-scene{aspect-ratio:4/5}
.sw-scene-switch{position:absolute;left:.9rem;bottom:.9rem;z-index:1;display:flex;gap:.4rem}
.sw-scene-switch button{font-size:.7rem;padding:.35rem .75rem!important;border-radius:20px;background:rgba(255,250,242,.72)!important;color:#4a3a4e!important;backdrop-filter:blur(4px)}
.sw-scene-switch [aria-pressed=true]{background:#fff!important;font-weight:600}
.sw-stage-copy{padding:1.8rem 1.6rem;display:flex;flex-direction:column;justify-content:center}
.sw-stage-copy h5{font-family:Georgia,serif;font-weight:400;font-size:1.6rem;margin:.4rem 0 .6rem}
.sw-line{font-size:.92rem;line-height:1.7;color:var(--st-muted);margin:0 0 1.2rem}
.sw-entries{display:flex;flex-wrap:wrap;gap:.45rem}
.sw-entries button{font-size:.74rem;padding:.4rem .8rem!important;border-radius:20px;background:var(--st-chip)!important;color:var(--st-ink)!important;border:1px solid transparent!important;transition:border-color .2s}
.sw-entries [aria-expanded=true]{border-color:var(--sw-gold)!important;color:var(--sw-gold)!important}
.sw-entry-text{font-size:.84rem;line-height:1.75;color:var(--st-muted);margin:1rem 0 0;min-height:4.5em}
.sw-stage.is-changing .sw-scene img.is-shown{animation:sw-fade .7s ease both}.sw-stage.is-changing .sw-stage-copy{animation:sw-rise .6s ease both}

/* World map scroll */
.sw-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.6rem;align-items:center}
.sw-scroll{position:relative;padding:1.6rem 1.4rem;background:linear-gradient(90deg,#efe2c8,#f8efdc 18%,#f8efdc 82%,#efe2c8);border-radius:3px}
.sw-scroll:before,.sw-scroll:after{content:'';position:absolute;left:-8px;right:-8px;height:12px;border-radius:6px;background:linear-gradient(#9a7650,#6f5236)}
.sw-scroll:before{top:-6px}.sw-scroll:after{bottom:-6px}
.sw-scroll ol{list-style:none;margin:0;padding:0;position:relative}
.sw-scroll ol:before{content:'';position:absolute;left:9px;top:14px;bottom:14px;width:1px;background:linear-gradient(#e0c690,#b08a4f)}
.sw-scroll button{display:flex;align-items:center;gap:.9rem;width:100%;padding:.55rem 0!important;text-align:left;font-family:Georgia,serif;font-size:.92rem;color:#5b4631!important}
.sw-node{position:relative;width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:1.5px solid #b08a4f;background:#f8efdc;transition:background .2s,box-shadow .2s}
.sw-scroll [aria-pressed=true]{color:#8a5f2a!important}.sw-scroll [aria-pressed=true] .sw-node{background:#d9b25f;box-shadow:0 0 0 5px rgba(217,178,95,.22)}
.sw-scroll button:hover .sw-node{background:#f1dfb5}
.sw-map-detail{min-height:220px;display:flex;flex-direction:column;justify-content:center}
.sw-map-detail h5{font-family:Georgia,serif;font-weight:400;font-size:1.35rem;margin:0 0 .6rem}.sw-map-detail>p{font-size:.9rem;line-height:1.75;color:var(--muted)}
.sw-file{border:1px solid var(--sw-line);border-radius:4px;padding:1.2rem 1.3rem;background:var(--global-bg-color,#fff);animation:sw-rise .35s ease both}
.sw-file dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;margin:.8rem 0 .9rem;font-size:.78rem}
.sw-file dt{color:var(--muted);font-weight:400}.sw-file dd{margin:0}
.sw-redact{letter-spacing:.05em;color:#3b3050;opacity:.75}.sw-silhouettes{letter-spacing:.35em;color:#9e8fb3}
.sw-rule{font-family:Georgia,serif;font-style:italic;font-size:.95rem;margin:0;padding-top:.8rem;border-top:1px dashed var(--sw-line)}

/* Soul contracts */
.sw-bonds{text-align:center}
.sw-bond-art{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
.sw-soul{fill:none;stroke:#d8c9a8;stroke-width:1.2}.sw-soul-core{fill:#f3e3bd}
.sw-bond-thread{fill:none;stroke:#d9b25f;stroke-width:1.6;stroke-dasharray:4 6;transition:stroke .5s;animation:sw-flow 3s linear infinite}
.sw-bond-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:.6rem 0 0}
.sw-bond-list button{font-size:.76rem;padding:.4rem .85rem!important;border-radius:20px;border:1px solid var(--sw-line)!important}
.sw-bond-list [aria-pressed=true]{background:var(--sw-soft)!important;border-color:var(--sw-gold)!important;color:var(--sw-gold)}
.sw-bond-text{max-width:460px;margin:1rem auto 0;font-size:.86rem;line-height:1.7;color:var(--muted);min-height:3.2em}

/* Return transmission */
.sw-return{position:relative;max-width:700px;margin:0 auto;aspect-ratio:700/220;border-radius:6px;background:linear-gradient(20deg,#2a2346,#4c3d6e 55%,#8d6f8e)}
.sw-return svg{position:absolute;inset:0;width:100%;height:100%}
.sw-return-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.66rem;letter-spacing:.06em;color:#f3e7f0!important;white-space:nowrap}
.sw-return-node span{width:14px;height:14px;border-radius:50%;background:#fff3d6;box-shadow:0 0 14px 4px rgba(255,236,196,.55);transition:transform .2s}
.sw-return-node:hover span,.sw-return-node:focus-visible span{transform:scale(1.35)}
.sw-return-node[data-side=right]{flex-direction:row;transform:translate(-7px,-50%)}.sw-return-node[data-side=left]{flex-direction:row-reverse;transform:translate(calc(-100% + 7px),-50%)}.sw-return-node:not([data-side]){flex-direction:column-reverse;transform:translate(-50%,calc(-100% + 7px))}
.sw-return-step{position:absolute;left:1rem;top:.8rem;margin:0;font-size:.68rem;letter-spacing:.08em;color:#e8d8ea}
.sw-return-line{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:1rem;max-width:520px;margin:1.2rem auto 0}

/* Random fragment */
.sw-fragment{position:fixed;z-index:1050;left:50%;bottom:4.5rem;transform:translateX(-50%);width:min(420px,calc(100vw - 32px));padding:1.3rem 1.4rem 1rem;border-radius:4px;background:linear-gradient(#fbf4e4,#f3e6cb);color:#4a3a28;box-shadow:0 18px 50px rgba(40,28,20,.25);border-top:3px solid #b08a4f;border-bottom:3px solid #b08a4f}
.sw-fragment p{font-family:Georgia,serif;font-size:1.02rem;line-height:1.7;margin:.5rem 0 .8rem}
.sw-fragment div{display:flex;justify-content:space-between;align-items:center}
#sw-frag-next{font-size:.74rem;color:#8a5f2a}#sw-frag-close{font-size:1.3rem;line-height:1;color:#8a7258}
.sw-fragment.is-changing{animation:sw-unroll .4s ease both}

/* Motion */
@keyframes sw-flow{to{stroke-dashoffset:-20}}@keyframes sw-fade{from{opacity:0}to{opacity:1}}@keyframes sw-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sw-unroll{from{opacity:0;transform:translate(-50%,10px) scaleY(.85)}to{opacity:1;transform:translate(-50%,0)}}

html[data-theme=dark] #writing-world{--sw-soft:#2e2a24;--sw-gold:#d6b67e}
html[data-theme=dark] .sw-stage:not([data-mood=night]):not([data-mood=fragments]){--st-chip:#3a342c}
html[data-theme=dark] .sw-file{background:#1f1d24}html[data-theme=dark] .sw-redact{color:#ddd}

@media(max-width:650px){
 .sw-hero{aspect-ratio:auto;min-height:420px}.sw-hero-copy>*{max-width:none}.sw-hero-art img{object-position:62% center}.sw-stage.is-portrait{grid-template-columns:1fr}.sw-hero-copy{padding:2.5rem 1.1rem 1.2rem}.sw-hero p{font-size:.86rem}
 .sw-stage{grid-template-columns:1fr}.sw-scene{min-height:0}.sw-stage-copy{padding:1.2rem 1.1rem 1.4rem}
 .sw-arrow{display:none}.sw-rail [role=tab]{min-width:76px}
 .sw-map{grid-template-columns:1fr;gap:1rem}.sw-map-detail{min-height:0}
 .sw-return{aspect-ratio:700/300}.sw-return-node{font-size:.58rem}
 .sw-block-head h4{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){#writing-world *,.sw-fragment{animation:none!important;transition:none!important}}