/* Approved skill variant 5: Photo-scene narration, vector scene. */
#skill-theory{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:calc(100dvh - 56px);padding:40px 38px 24px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(ellipse at 83% 72%,#EAC78740,transparent 47%),linear-gradient(170deg,var(--surface),var(--honey-soft,#F4E7CC) 74%,#D9C5A1);box-shadow:var(--shadow);outline:none}
#skill-theory:before{content:'';position:absolute;z-index:-1;bottom:84px;left:-10%;width:130%;height:75px;border-radius:50%;background:#c1a87713;border-top:1px solid #b59a7530}
.skill5-content{width:100%;max-width:790px;margin:auto;padding-bottom:45px}
#skill-theory h1{font:400 clamp(32px,5.4vw,49px)/1.12 var(--serif);letter-spacing:-.025em;color:var(--ink);margin:0 0 30px}#skill-theory h1 span{color:var(--clay)}
.skill5-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start;gap:30px}.skill5-text{display:flex;flex-direction:column;gap:17px}
.skill5-text p{font:400 clamp(18px,2.45vw,22px)/1.35 var(--serif);margin:0;padding:20px 23px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 20px #6e60470b}
.skill5-scene{display:flex;flex-direction:column;align-items:center;gap:24px;padding-top:15px}
.skill5-paper{position:relative;width:100%;max-width:282px;margin:0;border:7px solid #bca585;border-radius:9px;background:#fdfaf1;color:#2A2015;box-shadow:0 3px 0 #998368,0 8px 20px #382b2110;padding:24px 18px 15px;transform:rotate(2deg)}.skill5-paper:before{content:'';position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:61px;height:23px;border:1px solid #858b82;border-radius:5px;background:linear-gradient(#d3d5ce,#a9ada5)}
.skill5-paper h2{font:400 clamp(20px,2.6vw,24px)/1.2 var(--serif);margin:0 0 13px}.skill5-paper ol{list-style:none;padding:0;margin:0}.skill5-paper li{display:flex;gap:9px;align-items:baseline;font:400 16px/1.35 var(--sans);padding:8px 0;border-bottom:1px solid #e8e0cf}.skill5-paper li:last-child{border:0}.skill5-paper li:before{content:'';display:block;width:11px;height:11px;border:1px solid #b6a889;border-radius:2px;flex:none}
.skill5-cast{display:flex;gap:25px;align-items:end;justify-content:center}.skill5-cast img{display:block;object-fit:contain;width:74px;height:117px}
.skill5-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:17px}.skill5-footer p{margin:0;font:400 16px/1.4 var(--sans);color:var(--muted)}.skill5-footer .next{min-width:0;padding:12px 21px;font-size:15px;font-weight:500;background:var(--clay);color:var(--surface);white-space:nowrap}
#skill-theory:not([hidden]) h1,#skill-theory:not([hidden]) .skill5-text p,#skill-theory:not([hidden]) .skill5-scene{animation:skill5-enter .6s both}#skill-theory .skill5-text p:first-child,#skill-theory .skill5-scene{animation-delay:.2s!important}#skill-theory .skill5-text p:last-child{animation-delay:.45s!important}
@keyframes skill5-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:600px){#skill-theory{min-height:calc(100dvh - 36px);padding:28px 22px 20px}.skill5-layout{grid-template-columns:1fr;gap:25px}.skill5-text p{font-size:20px;padding:18px 20px}.skill5-scene{flex-direction:row;gap:17px;align-items:center;padding-top:6px}.skill5-paper{flex:1;padding:22px 12px 12px;border-width:6px}.skill5-paper h2{font-size:21px}.skill5-paper li{font-size:14px;gap:6px}.skill5-cast{flex-direction:column;gap:9px}.skill5-cast img{height:82px;width:52px}.skill5-content{padding-bottom:30px}.skill5-footer{gap:12px}.skill5-footer p{font-size:14px}.skill5-footer .next{padding:12px 15px}.skill5-footer .next span{margin-left:8px}}

@media(prefers-reduced-motion:reduce){#skill-theory h1,#skill-theory .skill5-text p,#skill-theory .skill5-scene{animation:none!important}}
