
/* IDS SWTOR Crew Skills field manual — locally authored graphic UI */
.swtor-crew{--cc:#ee8693;--edge:#404653;--ink:#f3f1f2;--muted:#b9c3d0;--surface:#101620;color:var(--ink);max-width:1240px}
.swtor-crew *{box-sizing:border-box}
.swtor-crew h1,.swtor-crew h2,.swtor-crew h3{color:#fff;line-height:1.16}
.swtor-crew h2{font-size:clamp(1.65rem,3vw,2.55rem);margin:0 0 13px}
.swtor-crew h3{font-size:1.13rem;margin:.45rem 0}
.swtor-crew p{line-height:1.7;color:var(--muted)}
.swtor-crew a{color:#ffd1d7;text-underline-offset:3px}
.swtor-crew button,.swtor-crew select,.swtor-crew input{font:inherit}
.swtor-crew button,.swtor-crew select{cursor:pointer}
.swtor-crew :is(a,button,input,select,summary):focus-visible{outline:3px solid #f2a2aa;outline-offset:3px}
.swtor-crew [hidden]{display:none!important}
.cc-eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#ec99a2!important}
.cc-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(250px,.88fr);gap:25px;align-items:stretch;border:1px solid #57414b;border-top:4px solid #d14b5d;border-radius:12px;background:radial-gradient(ellipse at 73% 22%,#51232c88,transparent 50%),linear-gradient(115deg,#1c1720,#080d15);overflow:hidden;padding:clamp(25px,4vw,51px);margin-top:19px}
.cc-hero h1{font:900 clamp(2.5rem,5.6vw,5.2rem)/.96 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:-.025em;margin:12px 0 19px}
.cc-hero h1 span{color:#f48f9d;display:block}
.cc-hero .cc-lead{font-size:1.1rem;color:#e0dce0;max-width:62ch}
.cc-facts{display:flex;flex-wrap:wrap;gap:9px;margin:21px 0}
.cc-facts span{padding:7px 10px;border:1px solid #72636c;border-radius:4px;background:#181a24;font-weight:800;font-size:.78rem;color:#f4dfe1}
.cc-hero-buttons,.cc-toc{display:flex;flex-wrap:wrap;gap:9px}
.cc-hero-buttons a,.cc-toc a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:6px;text-decoration:none!important;border:1px solid #bf6b79;color:#fff!important;background:#7f2435;font-weight:850}
.cc-hero-buttons a:last-child,.cc-toc a{background:#1c202a;border-color:#61515b}
.cc-hero-buttons a:hover,.cc-toc a:hover{background:#a73e50}
.cc-art{position:relative;min-height:310px;border:1px solid #59444a;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at center,#392335,#090d14 68%);border-radius:10px}
.cc-art::before,.cc-art::after{content:'';position:absolute;inset:13%;border:1px solid #b1637177;transform:rotate(45deg);pointer-events:none}
.cc-art::after{inset:23%;border-color:#c3678366}
.cc-art svg{width:min(90%,360px);height:auto;filter:drop-shadow(0 0 20px #bd294886);z-index:1}
.cc-art-label{position:absolute;bottom:16px;left:16px;right:16px;color:#e8b4be;font-weight:800;font-size:.72rem;letter-spacing:.14em;text-align:center;z-index:2}
.cc-toc{margin:23px 0 34px}
.cc-toc a{font-size:.83rem;font-weight:800;min-height:40px}
.cc-section{margin:58px 0;scroll-margin-top:100px}
.cc-section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:22px;border-bottom:1px solid #45404b;padding-bottom:17px}
.cc-section-head p{max-width:66ch;margin:0}
.cc-intro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cc-brief{padding:22px;border:1px solid #434856;background:linear-gradient(165deg,#1a202b,#0b1119);border-radius:9px}
.cc-brief .cc-count{font-size:3rem;color:#e8a1ad;font-weight:950;letter-spacing:-.06em;display:block}
.cc-brief strong{color:#fff;font-size:1.1rem}
.cc-brief p{font-size:.91rem;margin:10px 0 0}
.cc-note{background:#1d202b;border-left:4px solid #dc6f80;padding:16px 19px;margin:22px 0;color:#e9e5e7;line-height:1.65}
.cc-note p{margin:6px 0 0}
.cc-panel{padding:clamp(17px,2.5vw,28px);background:#131b27;border:1px solid #58606d;border-radius:9px}
.cc-panel h3{font-size:1.35rem;margin:0 0 8px}
.cc-control-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0}
.cc-field{display:grid;gap:8px;font-size:.85rem;font-weight:900;color:#ecedf1}
.cc-field select,.cc-field input{width:100%;min-height:48px;border-radius:5px;border:1px solid #84909e;background:#090e16;color:white;padding:11px 13px}
.cc-builder-result{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;margin:20px 0 10px}
.cc-slot{border:1px solid #694c58;padding:17px;border-radius:7px;background:#251922;min-width:0}
.cc-slot:not(:first-child){background:#17202a;border-color:#4f6674}
.cc-slot small{display:block;color:#dba5ac;text-transform:uppercase;letter-spacing:.1em;font-weight:900}
.cc-slot strong{display:block;font-size:1.2rem;color:#fff;margin:7px 0}
.cc-slot p{margin:0;font-size:.9rem}
.cc-slot:nth-child(3){grid-column:1 / -1}
.cc-path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:9px;margin:22px 0}
.cc-path-node{min-height:106px;border:1px solid #525e69;padding:14px;background:#101820;border-radius:6px}
.cc-path-node strong{display:block;color:#fff}
.cc-path-node small{display:block;color:#bfccd4;margin-top:7px;line-height:1.45}
.cc-path-arrow{font-size:1.8rem;font-weight:900;color:#e18a97}
.cc-compare-controls{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:20px 0}
.cc-filter{min-height:41px;background:#1b222c;border:1px solid #6c6470;color:#fff;border-radius:5px;padding:8px 12px}
.cc-filter[aria-pressed=true]{background:#9c3748;border-color:#ef8e9b}
.cc-compare-search{margin-left:auto;max-width:350px;min-width:170px;flex:1;background:#090e16;border:1px solid #647582;border-radius:5px;color:#fff;padding:10px;min-height:43px}
.cc-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.cc-skill{background:#111822;border:1px solid #414b58;border-radius:8px;padding:20px;min-width:0;position:relative;scroll-margin-top:100px}
.cc-skill[data-type=craft]{border-top:3px solid #d26879}
.cc-skill[data-type=gather]{border-top:3px solid #82acc6}
.cc-skill[data-type=mission]{border-top:3px solid #b5a8d6}
.cc-skill header{display:flex;align-items:center;gap:13px}
.cc-glyph{width:46px;height:46px;flex:none;border-radius:8px;background:linear-gradient(135deg,#3e2033,#192333);border:1px solid #65515f;display:grid;place-items:center;color:#ef9ba7;font-size:1.5rem;font-weight:900}
.cc-skill h3{margin:0;font-size:1.27rem}
.cc-skill .cc-category{font-size:.69rem;font-weight:850;letter-spacing:.12em;color:#bccddd;margin-top:4px}
.cc-skill p{font-size:.95rem}
.cc-skill .cc-skill-made{font-weight:850;color:#e7e9ee;margin:12px 0 7px}
.cc-tags{display:flex;flex-wrap:wrap;gap:6px}
.cc-tags span{font-size:.75rem;background:#242c37;border:1px solid #4e5966;padding:4px 8px;color:#e2dfe4;border-radius:4px}
.cc-skill .cc-detail{display:block;margin:12px 0;color:#e1c4cf;font-size:.88rem}
.cc-skill details{border-top:1px solid #38414c;padding-top:12px;margin-top:12px}
.cc-skill summary{color:#fac4cc;cursor:pointer;font-weight:800}
.cc-skill .cc-details-body{line-height:1.65;color:#cfd6dd}
.cc-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.cc-steps{counter-reset:ccsteps;display:grid;gap:12px}
.cc-step{position:relative;padding:17px 18px 17px 67px;border:1px solid #404c59;background:#111922;border-radius:7px;min-height:94px}
.cc-step:before{counter-increment:ccsteps;content:counter(ccsteps,decimal-leading-zero);position:absolute;left:15px;top:15px;color:#f6afba;font-size:1.35rem;font-weight:950}
.cc-step h3{margin:0 0 5px}
.cc-step p{margin:0}
.cc-step a{font-weight:800}
.cc-checklist{display:grid;gap:9px;margin-top:17px}
.cc-checklist label{display:flex;gap:11px;align-items:flex-start;padding:12px;background:#17222d;border:1px solid #4d5d67;border-radius:5px;color:#e6e8ed;cursor:pointer}
.cc-checklist input{accent-color:#d96479;min-width:20px;min-height:20px;margin-top:2px}
.cc-check-progress{font-size:.85rem;color:#f7adb8!important;font-weight:850;margin-top:12px}
.cc-lab{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cc-swatches{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.cc-swatch{border:1px solid #6a6674;background:#17202a;color:#fff;padding:10px;border-radius:5px;font-size:.86rem;min-height:70px;flex:1 1 140px;max-width:210px;text-align:left}
.cc-swatch[aria-pressed=true]{border-color:#f3a7b5;background:#40232f;box-shadow:0 0 0 1px #f3a7b5}
.cc-swatch b{display:flex;gap:3px;margin:0 0 8px}
.cc-swatch i{display:block;width:24px;height:19px;border:1px solid #ffffff5c;border-radius:2px}
.cc-mannequin{--primary:#1a1a1b;--secondary:#923441;min-height:360px;background:radial-gradient(circle at 50% 45%,#28303b,#0c121b 75%);border:1px solid #4d5765;border-radius:9px;display:grid;place-items:center;position:relative}
.cc-mannequin svg{max-width:310px;width:90%;height:auto;filter:drop-shadow(0 10px 20px #0008)}
.cc-mannequin .cc-main-color{fill:var(--primary)}
.cc-mannequin .cc-trim-color{fill:var(--secondary)}
.cc-mannequin .cc-line{stroke:#929ca9;stroke-width:2;fill:none}
.cc-art-caption{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;color:#aab7c2;font-size:.78rem}
.cc-status{padding:10px 13px;background:#231923;border-left:3px solid #d87885;color:#f4eced;margin:14px 0;font-size:.88rem}
.cc-planet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cc-planet{border:1px solid #474f5c;padding:15px;background:#111823;border-radius:6px}
.cc-planet strong{color:#fff;display:block;font-size:1.06rem}
.cc-planet span{font-size:.78rem;color:#ebaab2;font-weight:900}
.cc-planet p{margin:8px 0 0;font-size:.86rem}
.cc-planet-more{margin-top:14px}
.cc-planet-more summary{font-weight:850;color:#f6b7c0;cursor:pointer}
.cc-faq{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc-faq details{padding:17px 19px;border:1px solid #4d5663;background:#111925;border-radius:6px}
.cc-faq summary{font-weight:850;color:#fff;cursor:pointer}
.cc-faq p{font-size:.92rem}
.cc-sources{border-top:1px solid #4a4751;padding-top:22px}
.cc-sources li{line-height:1.7;margin:7px 0}
.cc-source-note{font-size:.85rem;color:#b7c5cf!important}
@media(max-width:850px){.cc-hero{grid-template-columns:1fr}.cc-art{min-height:260px}.cc-intro-grid{grid-template-columns:1fr 1fr}.cc-skills{grid-template-columns:1fr}.cc-track{grid-template-columns:1fr}.cc-planet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:590px){.cc-section-head{display:block}.cc-control-row,.cc-builder-result,.cc-lab,.cc-intro-grid,.cc-faq{grid-template-columns:1fr}.cc-slot:nth-child(3){grid-column:auto}.cc-path{grid-template-columns:1fr;gap:5px}.cc-path-arrow{transform:rotate(90deg);text-align:center}.cc-planet-grid{grid-template-columns:1fr}.cc-hero{padding:23px 17px}.cc-art{min-height:230px}.cc-compare-search{min-width:100%;margin-left:0}.cc-toc a{flex:1 1 40%}}
@media(prefers-reduced-motion:reduce){.swtor-crew *{scroll-behavior:auto!important;transition:none!important}}

/* Six-way crafting walkthrough selector and profession-specific route panels */
.cc-walk-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:22px 0 10px}
.cc-walk-choice{min-width:0;text-align:left;padding:15px 17px;min-height:90px;border:1px solid #667384;background:#151e2b;border-radius:8px;color:#f2f5f8;transition:background .15s,border-color .15s}
.cc-walk-choice strong{display:block;color:#fff;font-size:1.13rem;line-height:1.35}
.cc-walk-choice small{display:block;color:#bfcad3;margin-top:5px;line-height:1.45;font-size:.82rem}
.cc-walk-choice:hover{background:#252c3b;border-color:#de8f9f}
.cc-walk-choice[aria-pressed=true]{background:#502131;border-color:#f3a1ae;box-shadow:inset 0 0 0 1px #f3a1ae}
.cc-walk-choice[aria-pressed=true] small{color:#f6dce0}
.cc-walk-instruction{margin:13px 0 19px;font-size:.91rem}
.cc-walk-panel{padding:clamp(14px,2.4vw,25px);border:1px solid #694b5b;border-top:4px solid #d56577;background:linear-gradient(160deg,#1c1822,#111b28 45%,#0c131b);border-radius:10px;scroll-margin-top:100px}
.cc-walk-head{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;margin:0 0 13px}
.cc-walk-head h3{font-size:clamp(1.4rem,2.4vw,1.8rem)}
.cc-walk-head p{margin:0}
.cc-walk-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0 24px}
.cc-walk-flow span{display:block;padding:12px 14px;border:1px solid #4e5b68;background:#171f2b;border-radius:6px;color:#e1e6ed;line-height:1.5;font-size:.87rem}
.cc-walk-flow b{display:block;color:#eaa4ae;font-size:.78rem;letter-spacing:.03em;margin-bottom:2px}
.cc-walk-panel .cc-track{align-items:start}
.cc-walk-panel .cc-steps{min-width:0}
.cc-walk-panel .cc-walk-aside{min-width:0;position:sticky;top:15px}
.cc-walk-panel .cc-step h3{margin:0 0 7px;font-size:1.08rem}
@media(max-width:920px){.cc-walk-panel .cc-walk-aside{position:static}.cc-walk-head{grid-template-columns:1fr}}
@media(max-width:700px){.cc-walk-options{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-walk-flow{grid-template-columns:1fr}.cc-walk-panel{padding:15px}}
@media(max-width:400px){.cc-walk-options{grid-template-columns:1fr}.cc-walk-choice{min-height:70px}}


/* 2026-10-17: Six distinct graphic crafting workstations, 18 project files */
.cc-work-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:24px 0 13px}
.cc-work-choice{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;border:1px solid #596778;background:#151d2a;color:#fff;min-height:87px;padding:16px 17px;text-align:left;border-radius:8px;transition:background .16s,border-color .16s;overflow-wrap:anywhere}
.cc-work-choice strong{font-size:1.09rem;line-height:1.3;color:#fff}
.cc-work-choice small{font-size:.8rem;color:#c7ced9;line-height:1.35}
.cc-work-choice:hover{background:#272d3b;border-color:#d58a9b}
.cc-work-choice[aria-pressed=true]{background:#532332;border-color:#f4a2b2;box-shadow:inset 0 0 0 1px #f4a2b2}
.cc-work-intro{font-size:.9rem;padding:11px 15px;border-left:3px solid #cf7a88;background:#1a1e28;margin-bottom:22px}
.cc-work-panel{--work-glow:#f38aa0;border:1px solid #645362;background:linear-gradient(160deg,#1a1722,#0c1421 64%);border-radius:12px;overflow:hidden;padding:clamp(15px,2.7vw,30px)}
.cc-work-panel[data-cc-work-panel=synthweaving]{--work-glow:#a5b4ee}
.cc-work-panel[data-cc-work-panel=armormech]{--work-glow:#7bd2ce}
.cc-work-panel[data-cc-work-panel=armstech]{--work-glow:#edbb75}
.cc-work-panel[data-cc-work-panel=cybertech]{--work-glow:#88bbe8}
.cc-work-panel[data-cc-work-panel=biochem]{--work-glow:#9ed69e}
.cc-work-heading{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(200px,.88fr);gap:19px;align-items:center;border-bottom:1px solid #444d60;padding-bottom:19px}
.cc-work-heading h3{font-size:clamp(1.5rem,3vw,2.2rem);margin:7px 0 14px}
.cc-work-heading .cc-eyebrow{color:var(--work-glow)!important}
.cc-work-heading p{max-width:48ch}
.cc-work-illustration{min-height:210px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#283043,#0c121d 74%);border:1px solid #49536b;border-radius:9px;padding:10px}
.cc-work-illustration .cc-work-svg{height:185px;max-width:310px;width:95%;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--work-glow),transparent 64%))}
.cc-work-svg .cc-work-main{fill:#303b4e;stroke:#97a8c3;stroke-width:4;stroke-linejoin:round}
.cc-work-svg .cc-work-glow{fill:color-mix(in srgb,var(--work-glow),#21314a 44%);stroke:var(--work-glow);stroke-width:2;stroke-linejoin:round}
.cc-work-svg .cc-work-line{fill:none;stroke:#e1d7e3;stroke-width:3;stroke-linecap:round}
.cc-work-svg .cc-work-ring{fill:none;stroke:#72627d;stroke-width:2}
.cc-work-svg .cc-work-dashed{stroke-dasharray:4 10}
.cc-work-svg .cc-work-dot{fill:var(--work-glow)}
.cc-work-illustration span{font-size:.68rem;letter-spacing:.13em;font-weight:850;color:var(--work-glow)}
.cc-project-choices{display:flex;flex-wrap:wrap;gap:9px;margin:21px 0 24px}
.cc-project-choice{flex:1 1 170px;min-height:46px;background:#1b2532;border:1px solid #778394;color:#fff;border-radius:6px;padding:9px 14px;font-weight:820;text-align:center}
.cc-project-choice:hover{border-color:var(--work-glow)}
.cc-project-choice[aria-pressed=true]{background:#3a293c;border-color:var(--work-glow);box-shadow:inset 0 -3px var(--work-glow)}
.cc-projects{min-height:550px}
.cc-project{background:#111a25;border:1px solid #505d6b;border-radius:8px;padding:clamp(16px,2.5vw,26px)}
.cc-project-heading h4{font-size:clamp(1.35rem,2.2vw,1.9rem);color:#fff;margin:4px 0 10px}
.cc-project-heading p:last-child{font-weight:750;color:#e7d5dc}
.cc-project>p{max-width:80ch}
.cc-recipe-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:23px 0}
.cc-recipe-flow>div{border:1px solid #576776;border-top:3px solid var(--work-glow);background:#1b2734;padding:17px 14px;min-width:0;border-radius:4px}
.cc-recipe-flow small{display:block;color:var(--work-glow);font-size:.73rem;font-weight:900;letter-spacing:.06em;margin-bottom:9px}
.cc-recipe-flow strong{display:block;color:#f1f5f8;font-size:.89rem;line-height:1.5;font-weight:700}
.cc-project h5{font-size:1.2rem;color:#fff;margin:23px 0 9px}
.cc-project-help{font-size:.92rem;margin:7px 0 14px}
.cc-project-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.cc-project-checks label{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #53616e;background:#1b2532;border-radius:6px;cursor:pointer;min-height:95px}
.cc-project-checks label:has(input:checked){background:#24383b;border-color:#7fbbb4}
.cc-project-checks input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:#91cbb9}
.cc-project-checks strong{display:block;color:#fff;font-size:.93rem;margin-bottom:4px}
.cc-project-checks small{display:block;color:#c0cbd4;line-height:1.5;font-size:.82rem}
.cc-progress-wrap{display:flex;gap:12px;align-items:center;margin:18px 0 10px}
.cc-progress-wrap progress{width:55%;height:16px;accent-color:var(--work-glow);min-width:100px}
.cc-progress-wrap p{color:#e4dbdf;font-size:.85rem;margin:0}
.cc-project-reset{background:#1c2835;border:1px solid #7d8b9d;color:#fff;border-radius:5px;min-height:40px;padding:7px 14px;font-weight:780}
.cc-project-action,.cc-project-caution{padding:13px 16px;border-left:3px solid #77bda9;background:#17282a;margin:18px 0 0!important;line-height:1.6}
.cc-project-caution{border-color:#dfad83;background:#292324}
.cc-project-action b,.cc-project-caution b{color:#fff}
.cc-bonus-link{display:inline-block;padding:11px 16px;border-radius:5px;background:#672d43;border:1px solid #e69bb1;color:#fff!important;font-weight:850;text-decoration:none!important}
.cc-bonus-link:hover{background:#a43a57}
#dye-lab[hidden],.cc-work-panel[hidden],.cc-project[hidden]{display:none!important}
@media(max-width:850px){.cc-work-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-work-heading{grid-template-columns:1fr}.cc-work-illustration{min-height:170px}.cc-work-illustration .cc-work-svg{height:155px}}
@media(max-width:670px){.cc-recipe-flow,.cc-project-checks{grid-template-columns:1fr}.cc-projects{min-height:auto}.cc-progress-wrap{display:block}.cc-progress-wrap progress{width:100%;margin-bottom:8px}}
@media(max-width:410px){.cc-work-menu{grid-template-columns:1fr}.cc-work-choice{min-height:67px}.cc-work-panel{padding:13px}}
@media(prefers-reduced-motion:reduce){.cc-work-choice,.cc-project-choice{transition:none}}


/* Accessible anchor-based selectors: work even without JavaScript.
   With JavaScript, the selected route is the only visible panel. */
.cc-walk-choice,.cc-work-choice,.cc-project-choice{text-decoration:none!important}
.cc-walk-choice,.cc-work-choice{display:flex;flex-direction:column;justify-content:center}
.cc-project-choice{display:inline-flex;justify-content:center;align-items:center}
.cc-walk-choice[aria-current=true],.cc-work-choice[aria-current=true]{
  background:#502131;border-color:#f3a1ae;box-shadow:inset 0 0 0 1px #f3a1ae
}
.cc-project-choice[aria-current=true]{background:#3a293c;border-color:var(--work-glow);box-shadow:inset 0 -3px var(--work-glow)}
.cc-walk-current{padding:10px 14px;border:1px solid #bd7388;border-left:4px solid #f0a4b4;border-radius:5px;background:#2b1b2b;color:#fff!important;font-weight:850}
.cc-walk-panel{scroll-margin-top:115px}
.cc-work-panel,.cc-project{scroll-margin-top:115px}
.cc-walk-choice strong,.cc-work-choice strong,.cc-project-choice{color:#fff}


/* Section 06 · Six genuinely interactive visual design labs */
.cc-visual-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:25px 0 14px}
.cc-visual-choice{display:flex;flex-direction:column;justify-content:center;gap:7px;min-height:88px;padding:15px 17px;background:linear-gradient(145deg,#16202e,#101620);border:1px solid #536678;color:#fff!important;text-decoration:none!important;border-radius:8px;box-sizing:border-box}
.cc-visual-choice strong{color:#fff;font-size:1.08rem}
.cc-visual-choice small{color:#c4ccd5;font-size:.81rem;line-height:1.45}
.cc-visual-choice:hover,.cc-visual-choice:focus-visible{border-color:#f1a4b4;background:#292336}
.cc-visual-choice[aria-current=true]{background:#4d2534;border:2px solid #efa3b2;box-shadow:0 5px 24px #0006}
.cc-visual-active{font-weight:900!important;letter-spacing:.015em;padding:13px 17px;background:#311d2a;border:1px solid #b46b80;border-left:4px solid #eea1af;border-radius:5px;color:#ffe5ea!important;margin:16px 0}
.cc-visual-note{font-size:.85rem!important;color:#bdcbd9}
.cc-visual-panel{scroll-margin-top:110px;border:1px solid #565363;background:linear-gradient(150deg,#171a28,#0d1421);border-radius:9px;padding:clamp(15px,2.6vw,28px);margin:20px 0 12px}
.cc-visual-panel:focus-within{border-color:#9f788c}
.cc-visual-artifice-heading{padding:4px 5px 15px;border-bottom:1px solid #3f4654;margin-bottom:17px}
.cc-visual-artifice-heading h3{font-size:clamp(1.45rem,2.6vw,2.1rem)}
.cc-visual-stage{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(240px,.88fr);gap:22px;align-items:stretch}
.cc-visual-controls{padding:17px 7px 17px 4px;min-width:0}
.cc-visual-controls h3{font-size:clamp(1.65rem,3vw,2.3rem);margin:8px 0 12px;color:#fff}
.cc-visual-instruction{color:#e3bcc4!important;font-weight:850}
.cc-visual-variants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:19px 0 20px}
.cc-visual-variant{display:flex;justify-content:center;align-items:center;text-align:center;min-height:55px;border:1px solid #7d8593;border-radius:6px;background:#1c2835;padding:9px 10px;color:#f1f3f7!important;text-decoration:none!important;font-size:.88rem;line-height:1.28;font-weight:800}
.cc-visual-variant:hover,.cc-visual-variant:focus-visible{background:#334053;border-color:#e3a4b4}
.cc-visual-variant[aria-current=true]{background:#69354a;border:2px solid #f3b0bd}
.cc-visual-feedback{min-height:106px;padding:18px 20px;background:#202a37;border-left:4px solid #c77083;border-radius:3px}
.cc-visual-feedback strong{display:block;color:#fff;font-size:1.18rem}
.cc-visual-feedback p{margin:8px 0 0!important;font-size:.92rem!important}
.cc-visual-disclaimer{font-size:.8rem!important;color:#b4c0cb!important;margin-top:18px}
.cc-visual-preview{--cv-main:#344054;--cv-accent:#ad778c;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;border:1px solid #637082;background:radial-gradient(ellipse at 50% 46%,#303a52,#101721 70%);border-radius:9px;min-height:390px;min-width:0}
.cc-visual-preview svg{width:min(100%,350px);height:auto;max-height:345px;filter:drop-shadow(0 12px 22px #0009)}
.cc-visual-preview .cv-main{fill:var(--cv-main);stroke:#b7c2d3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cc-visual-preview .cv-trim{fill:var(--cv-accent);stroke:#dce1ec;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.cc-visual-preview .cv-metal{fill:#768698;stroke:#d0d8e2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cc-visual-preview .cv-liquid{fill:var(--cv-accent);stroke:var(--cv-accent);stroke-width:2;opacity:.86}
.cc-visual-preview .cv-line{stroke:#dde2ec;stroke-width:2.3;stroke-linecap:round;fill:none}
.cc-visual-preview .cv-ring{stroke:#60657a;stroke-width:2;fill:none;stroke-dasharray:6 10}
.cc-visual-preview .cv-grid{stroke:#53677c;stroke-width:1;opacity:.45;fill:none}
.cc-visual-preview .cv-node{fill:var(--cv-accent);stroke:#f5f7fa;stroke-width:2}
.cc-visual-preview [hidden]{display:none!important}
.cc-visual-caption{font-size:.67rem;letter-spacing:.07em;line-height:1.45;color:#c2cbd6;text-align:center;font-weight:800;margin-top:8px}
.cc-visual-panel[data-cc-visual-panel=armormech] .cc-visual-feedback{border-left-color:#86beb8}
.cc-visual-panel[data-cc-visual-panel=armstech] .cc-visual-feedback{border-left-color:#d3a57f}
.cc-visual-panel[data-cc-visual-panel=cybertech] .cc-visual-feedback{border-left-color:#8ba9eb}
.cc-visual-panel[data-cc-visual-panel=biochem] .cc-visual-feedback{border-left-color:#9bd5af}
.cc-visual-panel[hidden]{display:none!important}
@media(max-width:900px){.cc-visual-stage{grid-template-columns:1fr}.cc-visual-preview{min-height:300px}.cc-visual-preview svg{max-height:285px}}
@media(max-width:720px){.cc-visual-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-visual-variants{grid-template-columns:1fr}.cc-visual-variant{min-height:44px}.cc-visual-preview{min-height:280px}}
@media(max-width:420px){.cc-visual-choices{grid-template-columns:1fr}.cc-visual-choice{min-height:65px}.cc-visual-preview{min-height:245px}}
