:root{color-scheme:light;--paper:#f3f4f1;--surface:#fff;--ink:#182832;--muted:#56636a;--line:#d8dfda;--brand:#14554f;--brass:#e6bc71;--cyan:#7dd8d5;font-family:"Instrument Sans","Malgun Gothic",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink)}
.frame{width:min(1472px,calc(100% - 56px));margin-inline:auto}
.mast{border-bottom:1px solid var(--line);background:#fbfcfa}
.mast-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"brand title level related";align-items:center;gap:16px;min-height:54px}
.mast a{color:var(--brand);font-weight:650;text-decoration:none}.mast a:hover{text-decoration:underline}.mast .brand{grid-area:brand;font-size:21px;letter-spacing:-.04em}
.mast .related-tool{grid-area:related;font-size:13px;justify-self:end}
h1,h2,h3,p{margin:0}h1{grid-area:title;font-size:clamp(20px,2.4vw,27px);line-height:1.18;letter-spacing:-.055em;word-break:keep-all}h2{font-size:20px;letter-spacing:-.035em}h3{font-size:15px}
.identity{grid-area:level;display:flex;align-items:center;gap:6px;white-space:nowrap}.identity input{width:68px;min-height:32px;padding:4px 7px}
label{font-size:13px;font-weight:700}
button,input,select{font:inherit;color:inherit;min-width:0}
input,select,button{border:1px solid var(--line);border-radius:7px;background:var(--surface)}
input,select{padding:8px 10px;min-height:40px;max-width:100%}
button{cursor:pointer;font-weight:650;padding:9px 12px;min-height:38px}
button:hover:not(:disabled){border-color:var(--brand);background:#eef5f1}
button:disabled{opacity:.54;cursor:default}
:focus-visible{outline:3px solid #277e73;outline-offset:3px}
.job-picker{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;margin:8px 0}
.job-picker button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:3px 5px;background:#f9faf7;border-color:#d9dfd9;font-size:14px;white-space:nowrap}
.job-picker img{flex:none;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 2px #14202655)}
.job-picker button:hover:not(:disabled){border-color:#849b99;background:#edf2ef}
.job-picker button[aria-pressed=true]{border-color:#24404b;background:#182831;color:#f3f9fc;box-shadow:inset 0 -2px var(--job-accent)}
.job-picker [aria-pressed=true] img{filter:drop-shadow(0 0 5px var(--job-accent))}
.board-tabs{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:0;background:#10181e;border-bottom:1px solid #35414a}
.board-tabs button{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-height:42px;padding:4px 2px 6px;border:0;border-radius:0;background:transparent;color:var(--tab-accent);font-size:13px;line-height:1.15;white-space:nowrap}
.board-tabs span{font-size:10px;color:#a9bac5;font-variant-numeric:tabular-nums;font-weight:500}
.board-tabs button:hover:not(:disabled){background:#24333e;color:#fff}
.board-tabs [aria-pressed=true]{background:radial-gradient(ellipse 72% 20px at bottom,#6c85bd48,transparent),#17232d;color:#fff}
.board-tabs [aria-pressed=true]::after{content:"";position:absolute;inset:auto 9% 0;height:2px;background:linear-gradient(90deg,transparent,#c3d9ff 50%,transparent);pointer-events:none}
.board-tabs button:focus-visible{z-index:3;outline-color:#d4e3ff;outline-offset:-3px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,335px);grid-template-rows:auto 1fr;grid-template-areas:"board input" "board result";gap:14px;align-items:start}
.board-panel,.inputs,.result{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.board-panel{grid-area:board;background:#121d24;color:#eef4f7;border-color:#303e48;overflow:hidden}.inputs{grid-area:input}.result{grid-area:result}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 12px}.panel-heading>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 9px}.panel-heading h2{font-size:17px}.panel-heading p{color:#a9bac5;font-size:12px;line-height:1.35}.zoom{display:flex;align-items:center;gap:6px;white-space:nowrap}.zoom select{min-height:32px;padding:4px 8px;background:#20313d;border-color:#52626d;color:#eef4f7}
.board-viewport{overflow:auto;background:linear-gradient(#07101526,#07101540),#0e171a url("./art/board.png") center/cover;scrollbar-color:#657c80 #182731}
.board{--zoom:1;--board-limit:1080px;position:relative;isolation:isolate;margin:0 auto;width:min(calc(100% * var(--zoom)),calc(var(--board-limit) * var(--zoom)));aspect-ratio:1}
@media(min-width:691px){.board{--board-limit:min(1080px,var(--board-room,1080px))}}
.node-grid{position:absolute;inset:3%;display:grid;grid-template:repeat(15,1fr)/repeat(15,1fr)}
.edge{position:absolute;height:2px;transform-origin:left center;background:var(--brass);pointer-events:none;z-index:0}
.node{position:relative;z-index:1;display:grid;place-items:center;min-height:0;border:1px solid #53616b;border-radius:4px;background:#1c282e;padding:0;aspect-ratio:1;margin:2%;color:#fff}
.node img{display:block;width:94%;height:94%;object-fit:contain;pointer-events:none}
.node:not(.is-plan):not(.is-learned) img{opacity:.94;filter:brightness(1.1)}
.node[data-grade="rare"]:not(.is-plan):not(.is-learned){border-color:#447160}
.node[data-grade="legend"]:not(.is-plan):not(.is-learned){border-color:#496d8d}
.node:not(.is-plan):not(.is-learned):hover:not(:disabled){border-color:#bdeae2;background:#3a505a}
.node.is-learned{border-color:#85d7cb;background:#244d51}.node.is-plan{border-color:#f2c879;background:#584322}
.node.is-learned:hover:not(:disabled){border-color:#c3fff0;background:#315e62}.node.is-plan:hover:not(:disabled){border-color:#ffe7ab;background:#725629}
.node.is-start.is-learned{background:transparent;border-color:transparent}
.node.is-start.is-learned::before{content:"";position:absolute;inset:-18%;z-index:-1;background:url("./art/start-frame.png") center/contain no-repeat;pointer-events:none}
.node[aria-current=true]{z-index:2;box-shadow:0 0 0 2px #fff}
.node.is-plan img,.node.is-learned img,.node:hover img{filter:brightness(1.12)}
.node img.start-glyph{position:absolute;inset:17%;width:66%;height:66%;filter:drop-shadow(0 1px 3px #081019)}
.node:disabled{opacity:.35}.node:focus-visible{outline-color:#fff;z-index:2}
.node-tooltip{position:fixed;z-index:10;display:grid;gap:5px;min-width:min(152px,calc(100vw - 16px));max-width:min(260px,calc(100vw - 16px));padding:9px 12px;border:1px solid #667b78;border-radius:7px;background:#111e26;color:#e9f2ef;box-shadow:0 5px 18px #07101588;pointer-events:none;font-size:13px;line-height:1.35}
.node-tooltip b{color:#f3ca81}.node-tooltip small{color:#bdcfd1;font-size:11px;font-variant-numeric:tabular-nums}
.node-effect-heading{display:flex;align-items:center;gap:6px}
.node-effect-heading b{color:#edf4f7}
.node-effect-list{display:grid;gap:3px;margin:4px 0 0;font-size:13px;line-height:1.4}
.node-effect-list:empty{display:none}
.node-effect-list div{display:flex;align-items:center;justify-content:space-between;gap:10px}
.node-effect-list dt{display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.node-effect-list dd{margin:0;color:#f6e0a8;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.node-tooltip .node-effect-list{margin:1px 0 3px}
.grade-tag{display:inline-block;font-size:.9em;font-weight:750;white-space:nowrap}
.grade-tag[data-grade="rare"]{color:#176b4b}
.grade-tag[data-grade="legend"]{color:#265e9e}
.grade-tag[data-grade="unique"]{color:#845311}
:is(.inspection,.node-tooltip) .grade-tag{padding:1px 6px;border:1px solid #6b8089;border-radius:4px;color:#d4e0e5;font-size:11px;line-height:1.4}
:is(.inspection,.node-tooltip) .grade-tag[data-grade="rare"]{border-color:#549780;background:#173c35;color:#9aefd0}
:is(.inspection,.node-tooltip) .grade-tag[data-grade="legend"]{border-color:#5883ac;background:#19384d;color:#aad8ff}
:is(.inspection,.node-tooltip) .grade-tag[data-grade="unique"]{border-color:#98774a;background:#3f3220;color:#ffe0a0}
.skill-icon{display:inline-block;flex:none;width:22px;height:22px;object-fit:contain;border-radius:3px;vertical-align:middle;box-shadow:0 1px 3px #08101444}
.skill-line,#node-title{display:flex;align-items:center;gap:6px}
#excluded-list .skill-icon,#steps .skill-icon{margin-right:6px}
.node-order{position:absolute;right:-1px;bottom:-1px;min-width:10px;padding:0 1px;border-radius:2px;background:#f3ca81;color:#20241d;font-size:clamp(8px,.7vw,11px);font-weight:850;line-height:1.16;font-variant-numeric:tabular-nums;pointer-events:none}
.board-legend{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-height:36px;padding:4px 14px;font-size:12px;color:#b8c8d2}
.jump-marker{position:absolute;left:-1px;top:-1px;display:grid;place-items:center;min-width:12px;height:12px;padding:0 1px;border-radius:3px 0 3px 0;background:#a0f1e4;color:#153c3b;font-size:10px;font-weight:850;line-height:1;pointer-events:none}
.node.jump-in{border-color:#a0f1e4}
.node.jump-highlight{z-index:2;border-color:#c4fff5;box-shadow:0 0 0 2px #a0f1e4,0 0 12px #58d7c66b}
.node.jump-highlight[aria-current=true]{box-shadow:0 0 0 2px #d5fff8,0 0 0 4px #397f77}
.route-jumps{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.route-jumps label{white-space:nowrap;color:#a0f1e4;font-size:12px}
.route-jumps :is(select,button){min-height:28px;padding:3px 8px;border-color:#52626d;background:#20313d;color:#eef4f7;font-size:12px;font-variant-numeric:tabular-nums}
.route-jumps button:hover:not(:disabled){border-color:#a0f1e4;background:#294a4e}
.route-jumps :focus-visible{outline-color:#a0f1e4;outline-offset:2px}
@media(pointer:coarse){.route-jumps :is(select,button){min-height:44px}}
.key::before{content:"";display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px;background:#53a29a}
.key.inactive::before{background:#63767f}
.key.planned::before{background:#a67825}
.key.rare::before{background:#62c6a2}.key.legend::before{background:#75b1ef}
.inspection{border-top:1px solid #35414a;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.inspection p{color:#b8c8d2;font-size:13px;margin-top:4px;line-height:1.5}
.node-actions{display:flex;gap:5px;flex-wrap:wrap}.node-actions button{background:#20313d;border-color:#52626d;font-size:12px}.node-actions button:hover:not(:disabled){background:#334b5a;border-color:#83a5bd}
.inputs,.result{padding:16px 18px}.inputs h2,.result h2{margin-bottom:14px}
.inputs label{display:block;margin-bottom:6px}.inputs small{display:block;color:var(--muted);line-height:1.5;margin-top:6px}
.inputs .spend-option{display:flex;align-items:center;gap:8px;min-height:34px;margin:8px 0 0;cursor:pointer}
.spend-option input{width:17px;height:17px;min-height:0;margin:0;accent-color:var(--brand)}
.budget-input{position:relative}.budget-input input{width:100%;padding-right:42px;font-size:23px;font-variant-numeric:tabular-nums;font-weight:700}.budget-input span{position:absolute;right:14px;top:11px;color:var(--muted);font-size:12px}
.goal-fields{border-block:1px solid var(--line);padding:13px 0;margin:14px 0}
.goal-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.goal-heading span{font-size:12px;color:var(--brand);font-variant-numeric:tabular-nums;font-weight:650}
#goals,#excluded-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
#goals{max-height:360px;overflow:auto;padding:3px 4px;scrollbar-color:#8aa79b #edf4ef}
#goals li{position:relative;display:flex;align-items:center;gap:5px;padding:3px 5px;background:#edf4ef;border:1px solid #dfe9e2;border-radius:6px;font-size:13px}
#goals li:first-child{background:#e1efe8;border-color:#adcec1}
.goal-grip{display:grid;place-items:center;flex:none;width:24px;min-height:30px;border-radius:4px;color:#526d68;font-size:17px;line-height:1;cursor:grab;touch-action:none;user-select:none}
.goal-grip:hover{background:#d4e7de;color:#14554f}
#goals li.is-dragging{background:#dcece5;border-style:dashed;border-color:#548578;color:#47665f}
.is-dragging .goal-grip{cursor:grabbing}
#goals :is(.drop-before,.drop-after)::before{content:"";position:absolute;z-index:1;inset-inline:0;height:2px;background:#277e73;border-radius:2px;pointer-events:none}
#goals .drop-before::before{top:-4px}#goals .drop-after::before{bottom:-4px}
.goal-rank{width:2ch;flex:none;text-align:center;color:var(--brand);font-size:10px;font-variant-numeric:tabular-nums}
#goals li b{flex:1;min-width:0;font-weight:650;word-break:keep-all;overflow-wrap:anywhere}
.goal-kind{display:inline-block;margin-left:5px;color:var(--brand);font-size:10px;font-weight:500;white-space:nowrap}
#goals li:has(.goal-skill-level) .goal-kind{display:block;margin-left:0;white-space:normal}
.goal-skill-level{flex:none;width:46px;min-height:30px;padding:2px 3px;font-size:12px;font-weight:650;color:var(--brand)}
@media(pointer:coarse){.goal-skill-level{min-height:44px}}
#goals li button{flex:none;width:30px;min-height:30px;padding:0;border-color:transparent;background:transparent;color:var(--brand);font-size:15px;line-height:1}
#goals li button:disabled{opacity:.25}
#goals li button:hover:not(:disabled){background:#d4e7de;border-color:#adcec1}
#goals li .goal-remove:hover{color:#8d3331;background:#f8e6e3;border-color:#dcb3ae}
#goals-empty{margin-top:8px;color:var(--muted);font-size:13px}
#excluded-goals{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
#excluded-title{margin:0;font-size:12px;color:var(--muted)}
#restore-goals,#excluded-list button{padding:4px 7px;min-height:30px;font-size:12px}
#excluded-list button{width:100%;text-align:left;overflow-wrap:anywhere;background:#f6f8f6}
.goal-plus{color:var(--brand);margin-right:5px}
#mode{width:100%}
.primary{width:100%;background:var(--brand);color:#fff;border-color:var(--brand);margin-top:12px;min-height:42px}.primary:hover:not(:disabled){background:#0d443f}
#notice:not(:empty){margin-top:8px;color:var(--brand);font-size:13px;line-height:1.4}
#skill-coverage{margin-top:10px;padding:10px 12px;border:1px solid #c6dbd2;border-radius:8px;background:#f0f7f4;font-size:12px;line-height:1.5}
#skill-coverage h3{font-size:13px}
#skill-coverage p{margin-top:3px;color:#324b47;font-variant-numeric:tabular-nums}
#missing-skills{margin-top:6px}
#missing-skills summary{cursor:pointer;color:var(--brand);font-weight:650}
#missing-skill-list{max-height:180px;overflow:auto;margin:6px 0 0;padding-inline-start:17px}
#missing-skill-list li+li{margin-top:4px}
#skill-level-results{margin-top:6px}
#skill-level-results summary{cursor:pointer;color:var(--brand);font-weight:650}
#skill-level-list{max-height:180px;overflow:auto;margin:6px 0 0;padding-inline-start:17px}
.totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line);margin:0 0 10px;padding:10px 0}
.totals div+div{border-left:1px solid var(--line);padding-left:9px}.totals dt{font-size:12px;color:var(--muted)}.totals dd{font-size:23px;margin:2px 0 0;font-variant-numeric:tabular-nums;font-weight:750}
#pool-board-total{color:#f3ca81;font-variant-numeric:tabular-nums;font-weight:650}
#shared-summary{margin:0 0 12px;padding:10px;background:#f0f5f2;border:1px solid #d7e4dc;border-radius:8px}
.pool-totals{display:flex;gap:18px;margin:7px 0;font-size:12px;color:var(--muted)}.pool-totals dd{margin:1px 0 0;color:var(--brand);font-size:18px;font-weight:750;font-variant-numeric:tabular-nums}
#pool-breakdown{list-style:none;margin:0;padding:0;display:grid;gap:3px}
#pool-breakdown button{display:flex;justify-content:space-between;gap:5px;width:100%;min-height:28px;padding:4px 6px;font-size:12px;text-align:left}
#pool-breakdown button[aria-pressed=true]{background:#e0ede6;border-color:#aac9ba;color:var(--brand)}
#pool-breakdown span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.effect-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}.effect-heading select{min-height:32px;font-size:12px;padding:4px 6px}
.gain{display:flex;justify-content:space-between;gap:8px;font-size:13px;line-height:1.4;padding:5px 0}.gain b{color:var(--brand)}
.gain:has(.gain-parts,.gain-grade-parts){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px}
.gain-parts,.gain-grade-parts{grid-column:1 / -1;color:var(--muted);font-size:11px;line-height:1.5}
.gain-grade-parts{display:flex;flex-wrap:wrap;gap:2px 10px}
.gain-option{margin-left:5px;color:var(--muted);font-size:11px;white-space:nowrap}
#goals li.goal-unique{background:#fbf2de;border-color:#dfbf83}
#goals li.goal-legend{background:#e8f1ff;border-color:#9dbde7}
#goals li.goal-rare{background:#e7f5ed;border-color:#94c9ae}
#goals li.goal-legend .goal-kind,#goals li.goal-legend .goal-rank{color:#245a96;font-weight:700}
#goals li.goal-rare .goal-kind,#goals li.goal-rare .goal-rank{color:#176349;font-weight:700}
.excluded-kind{margin-inline-start:4px;white-space:nowrap}
.goal-tile-pair{display:inline-grid;max-width:100%;gap:1px;vertical-align:middle;overflow-wrap:anywhere}
.goal-tile-pair :is(.goal-kind,.excluded-kind){margin-inline:0}
.goal-tile-effect{font-size:12px;line-height:1.35}
.goal-tile-effect strong{color:#165139;font-variant-numeric:tabular-nums;white-space:nowrap}
#stat-target-results{margin-bottom:10px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:12px}
#stat-target-results summary{cursor:pointer;font-weight:700;color:var(--brand)}
#stat-target-list{max-height:220px;overflow:auto;margin:6px 0 0;padding:0;list-style:none}
#stat-target-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line)}
#stat-target-list li > strong{white-space:nowrap}
.gain-unique{padding-inline:6px;border-radius:4px;background:#fff6e4}
.goal-unique .goal-kind,.gain-unique .gain-option,.gain-unique b{color:#845311;font-weight:700}
#board-tiles-left{font-size:11px;color:var(--muted);white-space:nowrap}
#other-effects,#skill-effects{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}#other-effects h3,#skill-effects h3{font-size:12px;color:var(--muted);margin-bottom:3px}
#steps-details{margin:9px 0 12px;border-block:1px solid var(--line);padding:9px 0}#steps-details summary{font-size:13px;font-weight:700;cursor:pointer}#steps{max-height:230px;overflow:auto;padding:2px 5px 2px 30px;font-size:13px;margin:7px 0 0}#steps li::marker{color:var(--brand);font-weight:700}#steps button{padding:5px 7px;min-height:30px;width:100%;text-align:left;background:none;border:1px solid transparent}#steps button:hover,#steps button[aria-current=step]{background:#eef5f1;border-color:#adcec1}
.quiet{margin-top:9px;font-size:12px;padding:5px 8px;min-height:30px}
#source{margin:18px 0 28px;color:var(--muted);font-size:12px;line-height:1.6}
.board-guide{margin:20px 0 0;padding:clamp(16px,3vw,26px);border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.board-guide p{margin-top:8px;color:var(--muted)}
.board-guide dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px 20px;margin:14px 0}
.board-guide dl div{border-top:1px solid var(--line);padding-top:10px}
.board-guide dt{font-weight:700}
.board-guide dd{margin:3px 0 0;color:var(--muted)}
.board-guide a{color:var(--brand);font-weight:650;text-underline-offset:3px}
@media(max-width:1040px){.job-picker button{gap:3px;font-size:12px}.job-picker img{width:28px;height:28px}.board-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:940px){.frame{width:calc(100% - 32px)}.workspace{grid-template-columns:minmax(0,1fr) minmax(250px,290px)}}
@media(max-width:690px){.frame{width:calc(100% - 24px)}.mast-inner{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand related" "title level";gap:5px 8px;padding:6px 0}.mast .brand{font-size:17px}h1{font-size:19px}.identity{font-size:11px}.identity input{width:49px}.job-picker,.board-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.job-picker button{justify-content:flex-start;gap:5px;min-height:39px;padding:3px 8px}.board-tabs button{min-height:37px}.workspace{grid-template-columns:minmax(0,1fr);grid-template-areas:"input" "board" "result"}.inputs,.result{padding:13px}.panel-heading{padding:5px 9px}.inspection{padding:9px 10px;align-items:flex-start;flex-direction:column}.board-legend{padding:9px 10px}.node{border-radius:3px}}