@import url("skills-art-directing-visuals-index.css");
:root{--blue:#163d52;--orange:#c95d38;--yellow:#d4b342;--pink:#438b88}
.skill-visual{position:relative;background:transparent;border-radius:0}.skill-visual img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.layout{grid-template-columns:minmax(0,1fr)}.toc{display:none}.content{min-width:0}}
@media (max-width:760px){.shell{padding:0 20px}.hero{padding:42px 0}.hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}.skill-visual{min-height:230px}.release{padding:24px 0}.outcomes{grid-template-columns:minmax(0,1fr)}.content pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}.hero h1,.content h2{letter-spacing:-.05em}}

.report-examples{border-top:1px solid var(--line);padding-top:44px}.report-examples__lead{max-width:720px}.report-examples__group{margin-top:38px}.report-examples__group-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.08em;color:var(--blue)}.report-carousel{position:relative}.report-carousel__viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--orange) transparent;gap:18px;padding:2px 0 16px}.report-carousel__slide{scroll-snap-align:start;flex:0 0 min(88%,960px);min-width:0}.report-carousel__slide.report-visual{flex-basis:min(68%,560px)}.report-visual{margin:0;background:var(--ink);border:1px solid var(--line);border-radius:16px;overflow:hidden}.report-visual img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}.report-visual figcaption{padding:13px 16px;color:var(--muted);font-size:15px;background:var(--white)}.report-carousel__controls{display:flex;align-items:center;justify-content:flex-end;gap:10px}.report-carousel__button{min-width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;background:var(--white);color:var(--ink);font-size:23px;cursor:pointer}.report-carousel__button:hover:not(:disabled){background:var(--orange);border-color:var(--orange);color:var(--white)}.report-carousel__button:disabled{opacity:.32;cursor:not-allowed}.report-carousel__status{min-width:66px;text-align:center;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:var(--muted)}.text-report{margin:0;min-height:300px;padding:26px 28px;background:#102e3d;border:1px solid #274b5a;border-radius:16px;color:#f8f4e9;white-space:pre-wrap;overflow:auto;font:15px/1.62 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.text-report b{color:#a5ddd2}.text-report .signal{color:#ffb179}.text-report .action{color:#f8f4e9;font-weight:700}.report-examples__note{margin:18px 0 0;color:var(--muted);font-size:14px}.report-examples__note strong{color:var(--ink)}@media(max-width:760px){.report-examples{padding-top:32px}.report-carousel__slide{flex-basis:94%}.report-carousel__slide.report-visual{flex-basis:86%}.report-visual figcaption{font-size:14px}.text-report{min-height:275px;padding:20px;font-size:13px}.report-carousel__controls{justify-content:flex-start;margin-top:4px}}

.role-cases{border-top:1px solid var(--line);padding-top:44px}.role-cases__lead{max-width:790px}.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}.role-card{min-width:0;padding:25px 24px 23px;border:1px solid var(--line);border-radius:14px;background:var(--white);box-shadow:0 1px 0 rgba(23,42,67,.04)}.role-card:last-child{grid-column:1/-1;max-width:calc(50% - 7px)}.role-card__name{margin:0 0 16px;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.09em;color:var(--orange)}.role-card h3{margin:0 0 13px;font:400 29px/1.05 Georgia,serif;letter-spacing:-.04em;color:var(--ink)}.role-card p:not(.role-card__name){margin:0;color:var(--muted);font-size:16px}.role-card .role-card__result{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:700}.role-cases__note{margin:20px 0 0;padding:16px 18px;border-left:3px solid var(--pink);background:rgba(67,139,136,.09);color:var(--ink);font-size:15px}@media(max-width:760px){.role-cases{padding-top:32px}.role-grid{grid-template-columns:minmax(0,1fr);gap:12px}.role-card,.role-card:last-child{grid-column:auto;max-width:none;padding:22px 20px}.role-card h3{font-size:26px}.role-card p:not(.role-card__name){font-size:16px}}
