:root{--paper:#f6f2e9;--ink:#292e29;--muted:#62665c;--line:#d9d8c9;--green:#3c5745;--orange:#ad4c29;--ease:cubic-bezier(.2,0,0,1);font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #315c8e;outline-offset:5px}button:disabled{opacity:.35;cursor:default}h1,h2,h3,p{margin:0}button{border:0}img{display:block}.wrap{width:min(1200px,calc(100% - 80px));margin-inline:auto}.skip{position:fixed;left:20px;top:-100px;z-index:20;padding:15px;background:white}.skip:focus{top:10px}.masthead{display:flex;align-items:center;justify-content:space-between;min-height:112px;border-bottom:1px solid var(--line);gap:24px}.logo{width:min(390px,62%);height:auto}.text-link{text-decoration:none;font-size:14px;letter-spacing:.05em;display:inline-flex;align-items:center;gap:20px;min-height:44px}.text-link:hover{text-decoration:underline}.hero{text-align:center;padding:48px 0 35px}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--muted);line-height:1.7}h1{font-size:clamp(48px,6.5vw,80px);font-weight:800;letter-spacing:.08em;line-height:1.35;margin-top:9px;padding-left:.2em}.title-dot{color:var(--orange)}.lead{font-size:16px;color:var(--muted);letter-spacing:.08em;margin-top:12px;line-height:1.8}.section-line{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.section-line h2{font-size:14px;font-weight:500;letter-spacing:.06em;line-height:1.8}.index{font-size:11px;color:var(--muted);margin-right:16px}.desktop-hint{font-size:12px;color:var(--muted)}.domain-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:16px}.domain-card{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;background:transparent;padding:16px 8px 20px;border-bottom:2px solid transparent}.portrait{height:320px;position:relative;width:100%;display:flex;align-items:flex-end;justify-content:center;isolation:isolate;margin-bottom:24px}.portrait:before{content:"";position:absolute;width:83%;height:65%;bottom:12px;border-radius:50% 50% 46% 46%;background:var(--tint);z-index:-1;opacity:.43;transform:scale(.9);transition:transform 220ms var(--ease),opacity 220ms var(--ease)}.portrait img{height:100%;max-width:98%;object-fit:contain;object-position:center bottom;transform-origin:center bottom;transition:transform 200ms var(--ease);filter:drop-shadow(0 7px 5px #30302a12)}.domain-card[aria-pressed=true] .portrait img{transform:scale(1.04)}.domain-card[aria-pressed=true] .portrait:before{opacity:.8;transform:scale(1)}.domain-card[aria-pressed=true]{border-bottom-color:var(--green)}.domain-card:hover .portrait img{transform:scale(1.04)}.character-name{font-size:24px;font-weight:700;letter-spacing:.12em}.domain-sub{font-size:12px;letter-spacing:.04em;color:var(--muted);line-height:1.8;margin-top:8px}.selected-label{font-size:10px;letter-spacing:.1em;color:var(--green);margin-top:10px;min-height:15px;visibility:hidden}.domain-card[aria-pressed=true] .selected-label{visibility:visible}.domain-detail{display:grid;grid-template-columns:1fr 1.45fr auto;gap:28px;align-items:center;padding:25px 0 28px;border-bottom:1px solid var(--line);min-height:140px}.detail-label{font-size:11px;color:var(--muted);letter-spacing:.12em;margin-bottom:7px}.domain-detail h3{font-size:20px;line-height:1.5}.domain-detail p:not(.detail-label){font-size:14px;line-height:1.9;color:var(--muted)}.primary{background:var(--green);color:#fffdf8;border-radius:3px;min-height:48px;padding:13px 22px;display:inline-flex;gap:25px;align-items:center;justify-content:center;font-size:14px;text-decoration:none;white-space:nowrap}.primary:hover{background:#2f4537}.domain-tabs,.mobile-controls{display:none}.profession-section{margin-top:72px;padding:48px 0 30px;background:#ececdf;border-block:1px solid #e1e2d4}.profession-heading{display:flex;justify-content:space-between;gap:20px;align-items:end}.profession-heading h2{font-size:30px;line-height:1.5;margin:10px 0;letter-spacing:.04em}.profession-heading p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.8}.gallery-controls{display:flex;gap:8px}.arrow{background:transparent;border:1px solid #afb5a6;border-radius:50%;width:44px;min-width:44px;height:44px;font-size:21px;display:inline-grid;place-items:center;transition:background 180ms var(--ease)}.arrow:hover:not(:disabled){background:#dfe3d4}.role-track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:20px;padding:28px 5px 18px;scrollbar-width:thin;scrollbar-color:#a3ad9a transparent}.role-card{flex:0 0 calc((100% - 90px)/4.65);min-width:0;scroll-snap-align:start;background:transparent;display:flex;align-items:center;flex-direction:column;padding:8px 7px 16px;border-radius:4px}.role-card img{height:225px;max-width:100%;object-fit:contain;object-position:center bottom;transition:transform 200ms var(--ease)}.role-card:hover img{transform:translateY(-5px)}.role-card h3{font-size:19px;letter-spacing:.12em;margin-top:20px}.role-card p{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.8}.role-note{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:20px;line-height:1.8;margin-top:15px}.course-entry{padding-block:60px;display:flex;align-items:center;justify-content:space-between;gap:24px}.course-entry h2{font-size:27px;letter-spacing:.04em;margin:9px 0 12px}.course-entry p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:24px;padding:22px 0 30px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.8}dialog{border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);width:min(740px,calc(100% - 32px));max-height:85dvh;padding:28px;overscroll-behavior:contain}dialog::backdrop{background:#202c24a6}body:has(dialog[open]){overflow:hidden}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}dialog h2{font-size:30px;line-height:1.5}dialog p{font-size:15px;color:var(--muted);line-height:1.9;margin-top:12px}.role-detail{display:grid;grid-template-columns:180px 1fr;gap:30px;align-items:center}.role-detail img{width:100%;height:320px;object-fit:contain}.dialog-note{border-top:1px solid var(--line);padding-top:16px;font-size:12px!important}.course-list{padding:0;list-style:none;margin:24px 0 0}.course-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.7}.course-list small{font-size:11px;color:var(--muted);text-align:right;flex-shrink:0}.course-list strong{font-weight:500}.retry{margin-top:16px}
@media(min-width:1600px){.portrait{height:355px}}
@media(max-width:1000px) and (min-width:701px){.wrap{width:calc(100% - 48px)}.portrait{height:260px}.domain-sub{font-size:11px}.domain-detail{grid-template-columns:1fr 1.5fr}.domain-detail .primary{grid-column:2;justify-self:start}.role-card{flex-basis:25%}.profession-heading h2{font-size:26px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.masthead{min-height:86px;gap:14px}.logo{width:245px;max-width:70%}.text-link{font-size:12px;gap:5px}.hero{padding:34px 0 30px}.eyebrow{font-size:10px;letter-spacing:.13em}h1{font-size:51px}.lead{font-size:13px;letter-spacing:.02em;margin-top:10px}.section-line h2{font-size:12px}.index{margin-right:8px}.desktop-hint{display:none}.domain-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:17px}.domain-tabs button{background:transparent;border-radius:3px;min-height:44px;font-size:13px;padding:8px 0;border:1px solid var(--line)}.domain-tabs button[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}.domain-track{display:flex;overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:20px 10% 0;scroll-padding-inline:10%;scrollbar-width:none;margin-inline:-20px}.domain-track::-webkit-scrollbar{display:none}.domain-card{flex:0 0 86%;scroll-snap-align:center;padding-top:12px;padding-bottom:12px}.portrait{height:310px;max-width:270px;margin-bottom:18px}.character-name{font-size:24px}.domain-sub{font-size:12px}.selected-label{margin-top:6px}.mobile-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:11px;color:var(--muted)}.mobile-controls .swipe-hint{margin-left:auto}.domain-detail{grid-template-columns:1fr;gap:14px;padding:26px 0;min-height:240px}.domain-detail h3{font-size:22px}.domain-detail p:not(.detail-label){font-size:14px}.domain-detail .primary{justify-self:start}.profession-section{margin-top:40px;padding:32px 0 24px}.profession-heading{align-items:start}.profession-heading h2{font-size:24px;max-width:240px}.profession-heading p:not(.eyebrow){font-size:13px}.gallery-controls{gap:5px;flex-direction:column}.role-track{gap:14px;margin-inline:-5px;padding-top:22px}.role-card{flex-basis:44%;padding-inline:3px}.role-card img{height:220px}.role-card h3{font-size:19px}.role-card p{font-size:11px}.role-note{display:block}.role-note span{display:block;margin-top:6px}.course-entry{align-items:start;flex-direction:column;padding-block:40px;gap:22px}.course-entry h2{font-size:25px}footer{flex-direction:column;gap:5px;padding-bottom:22px}.role-detail{grid-template-columns:1fr;gap:16px}.role-detail img{height:230px}dialog{padding:22px}.course-list li{align-items:start}.course-list small{max-width:95px}.dialog-top{margin-bottom:12px}}
@media(max-width:700px){.domain-track{padding-inline:20vw;scroll-padding-inline:20vw}.domain-card{flex-basis:60vw}.role-card{flex-basis:40%}.profession-heading h2{font-size:22px;text-wrap:balance}}
@media(max-width:700px){.domain-card{pointer-events:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.domain-card:hover .portrait img,.domain-card[aria-pressed=true] .portrait img,.role-card:hover img{transform:none}}

/* 2026-10-11 detail pass: stronger touch feedback (UI-13-001/019/021) */
.domain-card .portrait img{transition:transform 220ms var(--ease)}
.domain-card .portrait:before{transition:transform 220ms var(--ease),opacity 220ms var(--ease)}
.role-card img{transform-origin:center bottom;transition:transform 220ms var(--ease)}
.role-card h3{transition:color 220ms var(--ease)}
@media(hover:hover){.domain-card:hover .portrait img{transform:translateY(-6px) scale(1.12)}.domain-card:hover .portrait:before{transform:scale(1.06);opacity:.85}.role-card:hover img{transform:translateY(-8px) scale(1.1)}.role-card:hover h3{color:var(--green)}}
.domain-card:focus-visible .portrait img,.domain-card:active .portrait img{transform:translateY(-6px) scale(1.12)}
.domain-card:focus-visible .portrait:before,.domain-card:active .portrait:before{transform:scale(1.06);opacity:.85}
.role-card:focus-visible img,.role-card:active img{transform:translateY(-8px) scale(1.1)}
.role-card:focus-visible h3,.role-card:active h3{color:var(--green)}
/* Secondary buttons replace low-visibility text links (UI-08-001, UI-16-009) */
.button-secondary{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:9px 18px;border:1.5px solid var(--green);border-radius:3px;background:transparent;color:var(--green);font-size:14px;letter-spacing:.04em;line-height:1.5;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background 180ms var(--ease),color 180ms var(--ease)}
.button-secondary:hover{background:#e3e8da;text-decoration:none}
.button-secondary:active{background:var(--green);color:#fffdf8}
.button-secondary:focus-visible{outline:3px solid #315c8e;outline-offset:3px}
.button-secondary.is-quiet{border-color:#aab3a0;color:var(--muted);font-size:13px}
.button-secondary:disabled{opacity:.55;cursor:not-allowed;background:transparent;color:var(--muted)}
/* Role dialog: abilities and course combination */
#preview{width:min(880px,calc(100% - 32px))}
.ability-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.ability-tags li{display:inline-flex;align-items:center;min-height:28px;padding:3px 8px;border-radius:3px;background:#e8ecdf;color:var(--green);font-size:12px;line-height:1.6}
.role-combo{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}
.role-combo h3{font-size:16px;line-height:1.6;margin-bottom:10px}
.role-combo h3 small{font-size:12px;color:var(--muted);font-weight:400;margin-left:8px}
.role-combo .ability-tags{margin-bottom:6px}
.course-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
.course-chip{display:flex;flex-direction:column;gap:6px;min-height:48px;padding:10px 12px;border:1px solid #cfd3c4;border-radius:4px;background:#fffdf8;color:var(--ink);text-decoration:none;transition:border-color 180ms var(--ease),background 180ms var(--ease)}
.course-chip:hover{border-color:var(--green);background:#f3f5ec}
.course-chip:focus-visible{outline:3px solid #315c8e;outline-offset:2px}
.course-chip strong{font-size:14px;line-height:1.6;font-weight:600}
.course-chip strong span{font-size:12px;color:var(--muted);font-weight:400;margin-right:8px}
.course-chip .ability-tags li{min-height:24px;font-size:11px;padding:1px 6px}
.role-combo details{margin-top:10px}
.role-combo summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;color:var(--green);font-weight:600}
.role-combo summary:focus-visible{outline:3px solid #315c8e;outline-offset:3px}
.role-combo details .course-list{margin-top:6px}
.role-combo-status{font-size:14px;color:var(--muted);margin-top:16px}
.dialog-actions{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);margin-top:22px;padding-top:18px}
@media(max-width:700px){.course-list{grid-template-columns:1fr}.button-secondary{min-height:48px}.role-detail img{height:200px}}
@media(prefers-reduced-motion:reduce){.domain-card .portrait img,.domain-card:hover .portrait img,.domain-card:focus-visible .portrait img,.domain-card:active .portrait img,.role-card img,.role-card:hover img,.role-card:focus-visible img,.role-card:active img{transform:none!important}}
.masthead .button-secondary{flex:none}
@media(max-width:700px){.masthead{gap:12px}.masthead .logo{min-width:0;max-width:calc(100% - 118px);height:auto}.masthead .button-secondary{padding:8px 12px;font-size:13px;gap:6px}}
.course-list>li{border:0;padding:0;margin:0;display:flex}
.course-list>li>.course-chip{flex:1}

/* Motion pass: restrained feedback for repeated controls. */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
.domain-card[aria-pressed=true] .portrait img{transform:scale(1.03)}
.domain-card:focus-visible .portrait img,.role-card:focus-visible img{transform:none}
.role-card:active img,.domain-card:active .portrait img{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){.domain-card:hover .portrait img{transform:translateY(-3px) scale(1.04)}.domain-card:hover .portrait:before{transform:scale(1.03);opacity:.8}.role-card:hover img{transform:translateY(-3px) scale(1.04)}}
@media(hover:none),(pointer:coarse){.domain-card:hover .portrait img{transform:none}.domain-card[aria-pressed=true] .portrait img{transform:scale(1.03)}.role-card:hover img{transform:none}}
dialog{opacity:0;transform:scale(.97);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),overlay 200ms allow-discrete,display 200ms allow-discrete}
dialog[open]{opacity:1;transform:scale(1)}
dialog::backdrop{opacity:0;transition:opacity 200ms var(--ease-out),overlay 200ms allow-discrete,display 200ms allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:scale(.97)}dialog[open]::backdrop{opacity:0}}
@media(prefers-reduced-motion:reduce){dialog,dialog[open]{transform:none!important;transition:opacity 160ms var(--ease-out),overlay 160ms allow-discrete,display 160ms allow-discrete!important}.primary,.button-secondary,.arrow,.domain-tabs button{transition:background-color 120ms ease,color 120ms ease,border-color 120ms ease!important}}

/* Guild landmarks establish the first visual layer; representatives remain in the foreground. */
.portrait{height:360px;margin-bottom:20px}.portrait:before{width:88%;height:18%;bottom:4px;border-radius:50%;opacity:.45;transform:scale(.94)}
.domain-card .portrait .guild-building,.domain-card .portrait .representative{position:absolute;object-fit:contain;object-position:center bottom;transform-origin:center bottom}
.domain-card .portrait .guild-building{z-index:0;width:116%;height:100%;max-width:none;filter:drop-shadow(0 10px 7px #30302a1c);transform:scale(var(--building-scale,1));transition:transform 220ms var(--ease),filter 220ms var(--ease)}
.domain-card .portrait .representative{z-index:1;right:5%;bottom:1%;height:47%;max-width:45%;filter:drop-shadow(0 6px 4px #30302a1c);transition:transform 220ms var(--ease)}
.domain-card[aria-pressed=true] .portrait .guild-building{transform:scale(calc(var(--building-scale,1) * 1.04))}.domain-card[aria-pressed=true] .representative{transform:translateY(-3px) scale(1.05)}
.domain-card:focus-visible .portrait .guild-building{transform:scale(var(--building-scale,1))}.domain-card:active .portrait .guild-building{transform:scale(calc(var(--building-scale,1) * .98))}
.guild-name{font-size:22px;font-weight:700;letter-spacing:.12em;line-height:1.5}.domain-sub{margin-top:6px}
@media(hover:hover) and (pointer:fine){.domain-card:hover .portrait .guild-building{transform:scale(calc(var(--building-scale,1) * 1.04))}.domain-card[aria-pressed=true]:hover .portrait .guild-building{transform:scale(calc(var(--building-scale,1) * 1.04 * 1.04))}.domain-card:hover .representative{transform:translateY(-3px) scale(1.05)}}
@media(max-width:1000px) and (min-width:701px){.portrait{height:310px}}
@media(max-width:700px){.portrait{height:370px;max-width:300px;margin-bottom:16px}.guild-name{font-size:22px}.representative{right:3%;height:45%;max-width:44%}}
@media(prefers-reduced-motion:reduce){.guild-building,.domain-card[aria-pressed=true] .guild-building,.domain-card:hover .guild-building{transform:scale(var(--building-scale,1))!important}.representative,.domain-card[aria-pressed=true] .representative,.domain-card:hover .representative{transform:none!important}}

/* Keep every guild landmark visually distinct instead of letting oversized cutouts merge together. */
.domain-track{gap:48px}.domain-card .portrait .guild-building{width:100%}
@media(max-width:1000px) and (min-width:701px){.domain-track{gap:20px}}
@media(max-width:700px){.domain-track{gap:16px}}