/* Keep the creative tools section dark in every reading theme. */
.skills-section{--bg:#101211;--surface:#191c19;--ink:#f1f0e8;--muted:#a3a89f;--line:#343a33;color-scheme:dark;background:var(--surface);color:var(--ink)}
/* Seven landscape editorial posters; preserve the original desktop panel ratio. */
.skill-panel{--poster-bg:#192123;--poster-ink:#f1f0e8;--poster-muted:#b9beb5;background:var(--poster-bg);color:var(--poster-ink);isolation:isolate}
.skill-poster-art{position:relative;height:280px;overflow:hidden;z-index:-1;pointer-events:none}
.skill-poster-art img{width:100%;height:100%;object-fit:cover;object-position:center 50%;mask-image:linear-gradient(180deg,#000 80%,transparent)}
#skill-art-title{position:absolute;right:24px;bottom:18px;font:850 40px/.9 var(--display);letter-spacing:-.025em;color:#f1f0e8;text-align:right;text-shadow:0 2px 18px #192123;opacity:.94}
.skill-poster-edition{position:absolute;right:24px;top:24px;font-size:14px;color:#d0c7af;letter-spacing:.12em}
.skill-panel .skill-code{position:relative;margin:22px 24px;font-size:14px;color:var(--poster-muted);letter-spacing:.02em}
.skill-panel .skill-panel-content{padding:0 24px 25px;max-width:none}
.skill-panel .panel-overline{color:var(--poster-muted);font-size:14px}
.skill-panel h3{font-size:34px;font-weight:600;line-height:1.3;letter-spacing:-.045em;margin-top:17px}
.skill-panel h3::after{content:'';display:block;width:42px;height:3px;background:#ef7a3a;margin-top:20px}
.skill-panel p{font-size:16px;line-height:1.75;color:var(--poster-muted);margin-top:17px;max-width:440px}
.skill-panel .skill-tags{margin-top:18px;gap:8px;flex-wrap:wrap}
.skill-panel .skill-tags span{border:0;border-left:1px solid #ef7a3a80;padding:0 10px;font-size:14px;color:#d8d7cd}
.skill-poster-bottom{margin:0 24px;padding:20px 0;border-top:1px solid #acb6a73b;position:relative}
.skill-panel .skill-actions{margin-top:0;gap:20px}.skill-panel .skill-meta{margin-top:15px;color:var(--poster-muted);gap:22px;font-size:14px}.skill-panel .copy-button{color:#c7cbc1;font-size:14px}.skill-panel .skill-actions .button{font-size:16px;min-height:44px}
@media(min-width:900px){
 .skill-panel{aspect-ratio:895.90625 / 503.578125;min-height:503.578125px}
 .skill-panel .skill-code{position:absolute;left:34px;top:26px;margin:0;z-index:2}
 .skill-poster-art{position:absolute;right:0;top:0;width:48%;height:calc(100% - 92px)}
 .skill-poster-art img{object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000 19%,#000 94%,transparent);opacity:.98}
 .skill-poster-art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#19212355,transparent 24%,transparent 70%,#192123)}
 #skill-art-title{z-index:1;bottom:18px;right:26px;font-size:clamp(38px,4.2vw,64px)}
 .skill-panel .skill-panel-content{position:absolute;left:34px;top:80px;width:calc(55% - 40px);padding:0;z-index:2}
 .skill-panel h3{font-size:clamp(30px,2.85vw,44px);line-height:1.27;margin-top:17px}
 .skill-panel h3::after{margin-top:16px}
 .skill-panel p{margin-top:17px}
 .skill-poster-bottom{position:absolute;bottom:0;left:34px;right:28px;margin:0;padding:17px 0 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:3;background:var(--poster-bg)}
 .skill-panel .skill-actions{gap:20px;flex-wrap:nowrap}
 .skill-panel .skill-meta{margin:0;flex-direction:column;gap:7px;text-align:right;font-size:14px}
 .skill-panel[data-poster=overseas] .skill-poster-art{width:52%}
 .skill-panel[data-poster=comic] #skill-art-title{transform:rotate(-7deg);right:22px;bottom:25px}
 .skill-panel[data-poster=movie] #skill-art-title{font-size:clamp(34px,3.6vw,54px);letter-spacing:.015em}
 .skill-panel[data-poster=fiction] h3{font-family:'Songti SC','Noto Serif SC',serif;font-weight:600;letter-spacing:.01em}
 .skill-panel[data-poster=fiction] #skill-art-title{font-family:Georgia,serif;font-style:italic;font-size:clamp(30px,3.2vw,46px);font-weight:400}
 .skill-panel[data-poster=talkshow] #skill-art-title{transform:rotate(5deg);bottom:28px;color:#ef9c68}
}
@media(min-width:900px) and (max-width:1140px){.skill-panel{min-height:580px}.skill-panel .skill-panel-content{width:calc(59% - 35px)}.skill-poster-bottom{align-items:flex-start;flex-direction:column}.skill-panel .skill-meta{flex-direction:row;text-align:left}.skill-poster-art{height:calc(100% - 130px);width:45%}.skill-poster-edition{display:none}}
@media(prefers-reduced-motion:no-preference){.skill-poster-art img{animation:skill-poster-arrive .5s ease-out both}@keyframes skill-poster-arrive{from{opacity:.4;transform:translateX(10px)}to{opacity:.98;transform:none}}}

/* Living story tree: keep the canopy visible within the landscape art area. */
@media(min-width:900px){.skill-panel[data-poster=series] .skill-poster-art img{object-fit:contain;object-position:center top}.skill-panel[data-poster=series] #skill-art-title{font-size:clamp(34px,3.7vw,56px)}}

/* Muted olive foliage to match the charcoal and ivory poster palette. */
.skill-panel[data-poster=series] .skill-poster-art img{filter:saturate(.38) brightness(.88) contrast(.94)}

/* Unfolded comic world; keep the protagonist visible above the title. */
.skill-panel[data-poster=comic] .skill-poster-art img{filter:saturate(.7) brightness(.9)}
@media(min-width:900px){.skill-panel[data-poster=comic] #skill-art-title{font-size:clamp(30px,3.2vw,46px);transform:none;bottom:12px}}

/* Alternative overseas and feature-film concepts in the same landscape frame. */
.skill-panel[data-poster=overseas] .skill-poster-art img{filter:saturate(.72) brightness(.92)}
.skill-panel[data-poster=movie] .skill-poster-art img{filter:saturate(.65) brightness(.92)}
@media(min-width:900px){.skill-panel[data-poster=overseas] .skill-poster-art{width:48%}.skill-panel[data-poster=overseas] .skill-poster-art img,.skill-panel[data-poster=movie] .skill-poster-art img{object-fit:contain;object-position:center top}.skill-panel[data-poster=overseas] #skill-art-title,.skill-panel[data-poster=movie] #skill-art-title{font-size:clamp(32px,3.4vw,48px);bottom:12px}}

/* Choice and fate: a quiet, open loop keeps the figure and its shadows visible. */
.skill-panel[data-poster=short] .skill-poster-art img{filter:saturate(.72) brightness(.9)}
@media(min-width:900px){.skill-panel[data-poster=short] .skill-poster-art img{object-fit:contain;object-position:center top}.skill-panel[data-poster=short] #skill-art-title{font-size:clamp(30px,3.2vw,46px);bottom:15px}}

/* Ensemble lives: warm paper rooms replace the botanical concept. */
.skill-panel[data-poster=series] .skill-poster-art img{filter:saturate(.72) brightness(.98)}
@media(min-width:900px){.skill-panel[data-poster=series] #skill-art-title{font-size:clamp(30px,3.2vw,46px);bottom:12px}}