/* Real game artwork, a weathered frame, and legible talent information. */
:root{--bg:#100e0c;--panel:#1c1712;--line:#4b3b28;--gold:#e6bd69;--text:#eee1c6;--muted:#b8aa92}
body{background:radial-gradient(ellipse at 50% 350px,#3b271840,transparent 1000px),#100e0c;color:var(--text)}
.preview-strip{background:#191512;color:#d1b880;border-bottom:1px solid #4d3921}.preview-strip span{color:#a7967e}
.site-header{height:85px;border-bottom-color:#70522b;background:linear-gradient(#201a15,#171310);box-shadow:0 3px 0 #070605,0 4px 0 #4b3724}
.brand{font-weight:bold;letter-spacing:3px;font-size:18px;text-shadow:0 2px 2px #000;color:#f0cf8b}.brand-mark{font-size:unset;object-fit:cover;border:2px solid #ac8852;box-shadow:0 0 0 2px #241a10,0 0 0 3px #654a2a;width:42px;height:42px;border-radius:3px}.brand-sub{color:#c9a769;font-size:9px}.site-header nav{font-family:Georgia,serif;font-size:14px;color:#d7c3a0}.header-note{color:#c4ac82}.header-note i{background:#9ab457}
.hero{position:relative;isolation:isolate;min-height:285px;padding:38px 20px 40px;margin:0 -5%;padding-left:6%;overflow:hidden;background:linear-gradient(90deg,#100e0ceb 0%,#100e0cbf 35%,#100e0c25 68%,#100e0c30),linear-gradient(0deg,#100e0c,transparent 35%),url('/assets/art/forever-hero.jpg') center 48%/cover}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 65px #0c0807b0;z-index:-1}.hero h1{font-size:clamp(36px,3.6vw,55px);font-weight:600;color:#f5e7c6;text-shadow:0 3px 3px #000,0 0 30px #0009;letter-spacing:-1px}.hero em{color:#e4b768}.hero p{color:#ddcdb5;font-size:13px;text-shadow:0 2px 3px #000}.hero .eyebrow{color:#efd596;text-shadow:0 2px 3px #000;font-size:10px}.hero-art-credit{align-self:flex-end;margin:0 45px 8px 30px;color:#efe2c8;font:italic 16px Georgia,serif;text-shadow:0 2px 5px #000}.hero-art-credit span{display:block;margin-top:8px;font:9px Arial,sans-serif;text-transform:uppercase;letter-spacing:2px;color:#e0c994}
.workspace{position:relative;overflow:hidden;border:1px solid #a17c45;border-radius:3px;background:#19140f;box-shadow:0 0 0 3px #251a10,0 0 0 4px #634a2b,0 22px 65px #000b;margin-top:5px}.workspace-heading{background:linear-gradient(#35291e,#231b15);border-bottom:1px solid #7f5f33;padding:20px 25px}.workspace-heading h2{color:#f0d49c;font-weight:bold;font-size:25px;text-shadow:0 2px 2px #000}.workspace-heading .eyebrow{color:#bc9b65;letter-spacing:2px}.snapshot-label{background:#14100c;border-color:#5d472c;color:#d0b788;font-size:10px}
.class-picker{background:linear-gradient(#211c17,#15110d);border-color:#695034}.class-choice{padding:14px 4px 12px;font-size:11px;color:#cfc0a7;gap:9px;font-family:Georgia,serif}.class-choice img{width:42px;height:42px;object-fit:cover;border:2px solid #746044;box-shadow:0 0 0 1px #110d09,2px 3px 5px #000b;border-radius:3px;filter:saturate(.9)}.class-choice:hover{background:#4e352146}.class-choice[aria-current]{background:linear-gradient(0deg,#a7782b40,#62451b09);color:#ffdd8c}.class-choice[aria-current] img{border-color:#e7bb63;box-shadow:0 0 0 1px #100c08,0 0 14px #c28d3550;filter:none}.class-choice[aria-current]:after{background:#e7bb63;left:12%;right:12%}
.build-toolbar{background:linear-gradient(#211a14,#18130f);border-color:#4a3925;padding:16px 23px}.class-emblem{border:0;background:none;box-shadow:0 0 0 1px #ad8951;border-radius:2px;width:40px;height:40px}.class-emblem img{width:40px;height:40px;object-fit:cover;border:2px solid #2b2218}.character strong{font-family:Georgia,serif;font-size:16px;color:var(--class)}.level-control{border-color:#59442a;color:#cbb695}input{background:#100d0a;border-color:#715533;color:#f5e7c9;box-shadow:inset 0 2px 4px #0008}.points strong{color:#f0c770;text-shadow:0 2px 3px #000}.points span{color:#c4b393}.button{border:1px solid #977644;background:linear-gradient(#433523,#20180f);box-shadow:inset 0 0 0 1px #c5a16415,0 2px 2px #0008;border-radius:2px;color:#f1ddad!important;font-family:Georgia,serif;font-size:12px}.button.quiet{border-color:#6b5130;background:linear-gradient(#33291f,#1d1711)}.button.primary{border-color:#b28b4d;background:linear-gradient(#8c3425,#4a1712);color:#ffe0a0!important;text-shadow:0 1px 2px #000}.button:hover:not(:disabled){background:linear-gradient(#a04b29,#65301a);filter:brightness(1.1)}
.planner-layout{grid-template-columns:minmax(0,1fr) 250px}.trees{padding:18px;gap:13px;background:#100d0b}.tree-panel,.tree-panel:nth-child(2),.tree-panel:nth-child(3){background:#17100b;border:1px solid #85633c;border-radius:2px;box-shadow:0 0 0 1px #070504,inset 0 0 0 2px #402e20}.tree-top{background:linear-gradient(#3a2a1e,#1f1711);padding:12px;border-bottom:1px solid #9c7440;box-shadow:0 2px 4px #0008}.tree-top>div{gap:9px}.tree-top h3{color:#efd9a7;font-size:17px;font-weight:bold;text-shadow:0 2px 2px #000}.tree-icon{width:27px;height:27px;border:1px solid #a7834b;box-shadow:0 0 0 1px #000;border-radius:2px}.tree-spent{color:#ffcf66;font-size:15px}.tree-spent small{color:#ad9876}
.talent-grid{position:relative;isolation:isolate;grid-template-rows:repeat(7,72px);gap:8px 9px;padding:24px 12px 20px;background:linear-gradient(#08060540,#08060525),var(--tree-art) center/cover}.talent-grid:before{content:'';position:absolute;inset:0;box-shadow:inset 0 0 35px 10px #090605b0;pointer-events:none;z-index:-1}.talent-connections{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}.talent-connections path{stroke:#958779;stroke-width:2.3;fill:none;filter:drop-shadow(0 1px 2px #000);stroke-linejoin:round;opacity:.7}.talent-connections path.active{stroke:#f0cd6d;opacity:1;filter:drop-shadow(0 0 3px #c68c2c)}
.talent-node{width:49px;height:49px;position:relative;z-index:1;border:2px solid #aaa083;border-radius:3px;background:#090a09;box-shadow:0 0 0 1px #100c08,inset 0 0 0 1px #ffffff25,0 3px 4px #000;opacity:1;filter:none}.talent-node .talent-icon{width:100%;height:100%;object-fit:cover;border-radius:1px;display:block}.talent-node:hover{transform:none;border-color:#ffda77;z-index:4}.talent-node.locked{opacity:1;filter:none;border-color:#685c4b}.talent-node.locked .talent-icon{filter:grayscale(.7) brightness(.67)}.talent-node.invested{border-color:#80c648;background:#0c1405;box-shadow:0 0 0 1px #090804,0 0 9px #62a33060}.talent-node.invested .talent-icon{filter:none}.talent-node.maxed{border-color:#f9cb65;box-shadow:0 0 0 1px #090804,0 0 11px #d6a83b70}.talent-node.inspected{outline:1px solid #f2e2b1;outline-offset:3px}.node-rank{background:#060805;border:1px solid #5e674b;color:#94e664;font-size:11px;line-height:14px;font-weight:bold;right:-5px;bottom:-5px;min-width:24px;padding:0 2px;text-shadow:0 1px 2px #000}.talent-node.invested .node-rank{border-color:#79b844;color:#a2ff70}.talent-node.maxed .node-rank{border-color:#d3aa51;color:#ffe29b}.node-name{position:absolute;left:50%;transform:translateX(-50%);top:54px;width:76px;color:#e5dac5;text-shadow:0 1px 3px #000,1px 0 3px #000,-1px 0 3px #000;font-size:8px;line-height:10px;max-height:21px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-family:Arial,sans-serif;pointer-events:none}.tree-bottom{background:linear-gradient(#281c13,#19120d);border-color:#71512d;color:#b9a88a;padding:10px;font-size:9px}.tree-bottom button{color:#edcd8d}
.talent-details{background:linear-gradient(120deg,#161521,#080b12);border-color:#7e6741;padding:22px 20px;position:relative;box-shadow:inset 2px 0 5px #0007}.talent-details .eyebrow{color:#9d8e71}.detail-symbol{display:block;object-fit:cover;width:58px;height:58px;border:2px solid #b09763;border-radius:3px;box-shadow:0 0 0 2px #060709,0 5px 12px #0008;margin:22px 0;background:#111}.talent-details h3{font:600 21px/1.3 Georgia,serif;color:#ffd16e;text-shadow:0 2px 2px #000}.talent-details p{font-size:12px;color:#f0e7d1;line-height:1.65}.rank-label{color:#bbb8ad;font-size:11px}.detail-tree{color:#a1aa95}.talent-cost{color:#89c8ef!important;font-size:11px!important}.requirement{color:#d6bb87!important}.next-rank{border-color:#514633}.next-rank>span{color:#80c74c}.point-controls .button{font-size:22px}.source-tag{border-color:#4a4032;color:#978e7c}.source-tag a{color:#c5b995}.detail-tip{border-color:#484032;color:#b3a58b}.classic-reference{margin:15px 0;border:1px solid #4c4538;background:#07090950;padding:0 10px}.classic-reference summary{font-size:11px;padding:10px 0;color:#ddbd82}.classic-reference p{font-size:11px;color:#c3bcad}.classic-reference small{font-size:10px;line-height:1.6;color:#938d81;display:block;margin-bottom:12px}.planner-footnote{background:#18120d;color:#baa88b}.data-notice{background:#251c12;border-color:#66502e;color:#c8b38b}.data-notice a{color:#eed191}.legend-dot{border-color:#94b06b}.legend-dot.selected{background:#90c747;border-color:#90c747}.legend-dot.locked{background:#665846;border-color:#665846}
.build-summary{padding:20px 24px;border-top:1px solid #635033;background:#17120e}.summary-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.summary-heading h3{font:18px Georgia,serif;margin:0;color:#e8cf9b}.summary-heading>span{font-size:10px;color:#ac997a}#selected-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#selected-list>p{font-size:12px;grid-column:1/-1;margin:0}.selected-talent{background:#241c14;border:1px solid #5f472a;display:flex;align-items:center;text-align:left;padding:8px;gap:9px;border-radius:2px}.selected-talent img{border:1px solid #a0834e;object-fit:cover}.selected-talent>span{font-size:11px;flex:1;line-height:1.3;color:#e8d6b3}.selected-talent small{display:block;color:#ac9978;font-size:9px;margin-top:4px}.selected-talent b{color:#e9c97d;font-size:12px}.selected-talent:hover{border-color:#c59b50}#saved-panel,#share-panel{border-color:#594127}
.how{border-color:#5d462c}.how h2,.reference h2,.faq h2,.more h2{color:#e5c384}.how li>span{border-color:#926d3b;background:#281e13;color:#f0ce8c}.how h3{color:#dfcfad}.how p{color:#b4a58c}.reference-search{display:flex;align-items:center;gap:18px;margin:25px 0 10px;font-size:12px;color:#d0b789}.reference-search input{flex:1;max-width:450px;padding:11px 14px}#search-result{font-size:11px}.reference-list article{border-color:#59432b;background:#1c1610}.reference-list h3{display:flex;align-items:center;gap:10px;color:#e6ca8d;flex-wrap:wrap}.reference-list h3 img{border:1px solid #9f7b40;object-fit:cover}.reference-list p{color:#c9bda7}.reference-list article[hidden]{display:none}.reference-list details summary{min-height:unset}.reference details{border-color:#51402d}.reference>details>summary{font-family:Georgia,serif;color:#dbc493;font-size:16px}.faq details{border-color:#51402d}.faq summary{color:#dccaab}.more{border-color:#624b2e}.prose h1{color:#e6c183}.prose h2{color:#d9ba80}footer{background:#120e0a;border-color:#604729}footer p{color:#a69274}.footer-brand{color:#d9b775}
@media(min-width:1450px){.talent-node{width:54px;height:54px}.node-name{top:58px}.talent-grid{grid-template-rows:repeat(7,77px)}}
@media(max-width:1150px){.planner-layout{grid-template-columns:minmax(0,1fr) 220px}.trees{gap:9px;padding:12px}.talent-grid{padding:20px 8px;grid-template-rows:repeat(7,64px);gap:10px 5px}.talent-node{width:39px;height:39px}.node-name{top:44px;width:60px;font-size:7px;line-height:9px}.tree-top h3{font-size:13px}.tree-top{padding:10px 8px}.tree-icon{width:23px;height:23px}.tree-top>div{gap:6px}.tree-spent{font-size:12px}.hero-art-credit{font-size:13px;margin-right:30px}}
@media(max-width:900px){.planner-layout{grid-template-columns:1fr}.talent-grid{grid-template-rows:repeat(7,72px);padding:22px 13px;gap:9px 8px}.talent-node{width:46px;height:46px}.node-name{top:51px;width:70px;font-size:8px;line-height:10px}.talent-details{border-top:1px solid #9f8251}.hero-art-credit{display:none}body.inspecting .talent-details{background:linear-gradient(110deg,#161521,#080b12);border-color:#b6a170;max-height:57vh;padding:20px}.inspecting .detail-symbol{display:block;float:left;width:45px;height:45px;margin:0 13px 12px 0}.inspecting .talent-details .eyebrow{margin-bottom:14px}.inspecting .talent-details h3{font-size:20px;min-height:25px}.inspecting .point-controls{background:#11111a}.inspecting .rank-label{clear:both}.close-inspector{color:#dcc89e}.talent-details .detail-tip{max-width:400px}}
@media(max-width:620px){.site-header{height:75px}.brand{font-size:14px}.brand-mark{width:31px;height:31px}.brand-sub{font-size:7px}.site-header nav{font-size:12px;gap:14px}.hero{min-height:260px;padding-top:32px;background-position:64% center;background-image:linear-gradient(90deg,#100e0cef,#100e0c90 75%),linear-gradient(0deg,#100e0c,transparent 40%),url('/assets/art/forever-hero.jpg')}.hero h1{font-size:35px;max-width:330px}.hero .eyebrow{font-size:8px}.workspace-heading{padding:18px 14px;gap:10px}.workspace-heading h2{font-size:19px}.snapshot-label{font-size:8px}.class-choice{font-size:10px;padding:12px 3px}.class-choice img{width:36px;height:36px}.build-toolbar{padding:15px}.character strong{font-size:14px}.class-emblem,.class-emblem img{width:35px;height:35px}.button{font-size:12px!important}.mobile-tree-tabs{background:#18120e;gap:6px}.mobile-tree-tabs button{background:linear-gradient(#463321,#251a11);border-color:#9b7440;color:#eed59e;font-family:Georgia,serif}.trees{padding:15px;gap:12px}.tree-panel{min-width:calc(100% - 4px)}.tree-top{padding:12px 15px}.tree-top h3{font-size:20px}.tree-icon{width:30px;height:30px}.tree-spent{font-size:16px}.talent-grid{grid-template-rows:repeat(7,76px);padding:24px 15px;gap:8px 12px}.talent-node{width:49px;height:49px}.node-name{top:54px;width:72px;font-size:8px;line-height:10px}.tree-bottom{padding:10px 12px}.planner-footnote{padding:12px 14px;font-size:9px}.data-notice{font-size:11px;line-height:1.8}#selected-list{grid-template-columns:1fr}.build-summary{padding:20px 15px}.summary-heading h3{font-size:16px}.reference-search{display:block}.reference-search input{display:block;width:100%;margin-top:8px}.reference-list article{padding:16px}.reference-list p{font-size:12px}.classic-reference p{font-size:11px}.prose .class-picker{grid-template-columns:repeat(3,1fr)}}
.hero{margin-left:-4%;margin-right:-4%}.node-name{width:62px}.reference-list h3 small{margin-left:0}.talent-connections{display:block}