/* Current systems: the existing village, brass and dark-stone identity. */
.village { min-height: min(720px, 80vh); }
.village .hero-copy { padding-block: 80px 108px; }
.village h1 { font-size: clamp(50px,5.4vw,78px); letter-spacing: -.045em; }
.village .hero-description { max-width: 420px; font-size: 15px; line-height: 1.8; }
.village .hero-art::after { background: linear-gradient(90deg,#100e0cfa,#15110dd9 24%,#19140f4d 58%,transparent),linear-gradient(0deg,#16120f,transparent 22%); }
.hero-actions .text-link { padding: 12px 2px; }
.village-guide { left: auto; right: 17%; bottom: 14%; }
.hero-facts { margin-top: 23px; }
.getting-started { padding-block: 29px; }
.getting-started strong { font: 600 15px var(--font); }
.getting-started p { font-size: 12px; }
.getting-started > div > span { font-size: 13px; border: 1px solid #746044; width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items:center; border-radius: 50%; }
.systems-lab { position: relative; background: radial-gradient(ellipse at 90% 50%,#4c372228,transparent 60%); padding-block: 94px; }
.lab-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.lab-heading h2 { font-size: clamp(36px,4vw,57px); line-height: 1.13; letter-spacing: -.03em; }
.lab-heading h2 em { font-weight: 400; color: #dbb77c; }
.lab-heading > p { max-width: 340px; margin-bottom: 5px; color: #b6ac9c; }
.lab-frame { background: #1b1814; border: 1px solid #706044; border-radius: 6px; box-shadow: 0 20px 70px #0003; overflow: hidden; }
.lab-tabs { display: flex; background: #211d17; border-bottom: 1px solid #51452f; }
.lab-tabs button { display: flex; align-items: center; justify-content:center; gap: 12px; flex: 1; border: 0; border-right: 1px solid #463c2c; padding: 19px 14px; background: transparent; color: #ae9f89; font-size: 14px; position:relative; }
.lab-tabs button:last-child { border-right: 0; }
.lab-tabs button::after { content:""; position:absolute; bottom:-1px; left:18px; right:18px; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .25s; }
.lab-tabs button[aria-selected="true"] { background: linear-gradient(0deg,#d1ac6320,transparent); color:#f5e2be; }
.lab-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.lab-tabs button:hover { color:#ffdfad; background-color:#c49b5012; }
.lab-tabs button:focus-visible { outline-offset:-5px; }
.lab-tabs img { object-fit:contain; filter:drop-shadow(0 2px 5px #0009); }
.lab-index { font:10px var(--font); color:#a29073; }
.lab-panel { padding: 38px; min-height: 475px; }
.lab-panel:not([hidden]) { animation: lab-appear .35s ease both; }
.experiment-layout,.lab-panel .workshop-layout { display:grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap:38px; align-items:center; }
.experiment-copy h3,.lab-panel .workshop-intro h2 { font-family:var(--display); font-size:clamp(30px,3.3vw,44px); line-height:1.15; white-space:pre-line; letter-spacing:-.02em; color:#eee0c7; }
.experiment-copy > p:not(.eyebrow),.lab-panel .workshop-intro > p:not(.eyebrow) { font-size:14px; line-height:1.85; margin-top:18px; color:#bfb39f; max-width:350px; }
.experiment-notes { list-style:none; margin:23px 0 0; padding:0; }
.experiment-notes li { position:relative; padding:9px 0 9px 17px; font-size:12px; color:#aea38f; border-top:1px solid #d0ad6421; }
.experiment-notes li::before { content:"◆"; position:absolute; left:0; top:12px; font-size:6px; color:#c7a366; }
.experiment-board,.lab-panel .workbench { border:1px solid #5a4b34; background:#14130f; border-radius:4px; overflow:hidden; box-shadow:0 5px 24px #0003; min-width:0; }
.board-heading { min-height:48px; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid #4d412d; background:#262117; font-size:12px; color:#e0cfac; }
.demo-tag { font-size:9px; letter-spacing:.12em; color:#b6a586; white-space:nowrap; }
.demo-toolbar { display:flex; flex-wrap:wrap; gap:15px; align-items:center; padding:16px 18px; }
.demo-toolbar .button { padding:10px 15px; min-height:38px; font-size:12px; }
.demo-reset { border:0; background:transparent; padding:8px 0; font-size:11px; }
.demo-toolbar > span:last-child { margin-left:auto; font-size:11px; color:#b9ab92; }
.demo-result { padding:13px 18px; min-height:48px; margin:0; background:#d8b47309; border-top:1px solid #51452e; font-size:12px; color:#d0bd9c; }
.demo-result[data-state="success"] { color:#a7d6b2; background:#52986c0d; }
.demo-result[data-state="warning"] { color:#efb59b; }
.demo-footnote { display:block; padding:0 18px 13px; color:#a4947e; font-size:10px; background:#d8b47309; }
.lab-footer { display:flex; gap:9px; align-items:center; padding:12px 20px; border-top:1px solid #4d412d; color:#a99b84; font-size:11px; background:#211c15; }
.lab-footer .tiny-dot { background:#c9ab74; flex-shrink:0; }
.lab-footer-mark { margin-left:auto; white-space:nowrap; color:#aa936c; font-size:9px; letter-spacing:.15em; }
.lab-panel .workshop { padding:0; border:0; background:transparent; }
.lab-panel .workshop-art img { height:155px; }
.lab-panel .workbench > header { background:#262117; box-shadow:none; padding:13px 18px; }
.lab-panel .workbench h3 { font:600 12px var(--font); }
.lab-panel .workshop-rules { gap:10px; padding:18px; }
.lab-panel .workshop-rules .button { width:100%; margin-top:5px; }
.lab-panel .workshop-items { margin-inline:18px; }
.lab-panel .sample-shield h4 { font-size:12px; }
.lab-panel .sample-shield { gap:12px; grid-template-columns:44px 1fr; position:relative; padding-block:13px; }
.lab-panel .sample-slot { width:44px; height:44px; grid-row:span 2; }
.lab-panel .sample-verdict { grid-column:2; text-align:left; line-height:1; }
.lab-panel .sample-verdict:empty { display:none; }
.lab-panel .workshop-history { padding:13px 18px; background:#d8b47309; min-height:108px; }
.lab-panel .workshop-history h4 { font-size:11px; margin-bottom:6px; }
.lab-panel .workshop-history p,.lab-panel .workshop-history li { font-size:11px; }
.sample-shield[data-outcome] { animation:lab-appear .4s both; }
.sample-shield[data-outcome]:nth-child(2) { animation-delay:.1s; }
.costume-combos { padding:16px 18px; }
.costume-combos label { display:flex; align-items:start; gap:10px; padding:10px 12px; border:1px solid #4c412f; background:#201c15; font-size:12px; border-radius:3px; cursor:pointer; }
.costume-combos input { accent-color:#d8b16b; width:15px; height:15px; margin:3px 0; }
.costume-combos b { color:#a4906d; font-size:10px; margin-right:10px; font-weight:400; }
.costume-combos strong { color:#e4c995; margin-left:5px; font-weight:500; }
.costume-combos small { display:block; margin-left:25px; font-size:12px; }
.combo-or { display:block; text-align:center; font-size:9px; padding:4px; color:#a48e69; letter-spacing:.15em; }
.costume-combos label[data-matched="true"] { border-color:#98c6a3; background:#4c795524; }
.costume-roll { display:flex; gap:22px; align-items:center; min-height:130px; padding:12px 23px; border-block:1px solid #53442c; background:radial-gradient(ellipse at 20% 50%,#a0772e1c,transparent 60%); }
.costume-roll ul { margin:6px 0 0; padding:0; list-style:none; color:#b9d2ad; font-size:12px; min-height:60px; }
.rune-orbit { position:relative; display:grid; place-items:center; width:86px; height:86px; flex-shrink:0; }
.rune-orbit span { position:absolute; font:90px/1 Georgia,serif; color:#b1894d66; }
.costume-board[data-running="true"] .rune-orbit span { animation:rune-turn 2s linear infinite; }
.costume-board[data-running="true"] .rune-orbit img { filter:drop-shadow(0 0 10px #dfc27b); }
.energy-flow { display:flex; gap:14px; align-items:center; justify-content:center; padding:22px 18px; }
.energy-flow > div { display:grid; gap:8px; justify-items:center; width:90px; color:#a69578; font-size:11px; }
.energy-flow img { object-fit:contain; }
.energy-flow i { font-style:normal; color:#786541; }
.energy-flow > div[data-active="true"] { color:#f4da9c; }
.energy-flow > div[data-active="true"] img,.energy-flow > div[data-active="true"] .crystal-shape { filter:drop-shadow(0 0 10px #cfb466); transform:translateY(-3px); transition:.4s; }
.crystal-shape { color:#90bdd4; text-shadow:0 0 18px #699cd15c; font-size:28px; line-height:32px; }
.energy-inventory { margin:0 18px; }
.energy-inventory > div { display:flex; gap:10px; align-items:center; border-top:1px solid #433b2b; padding:12px 0; font-size:12px; }
.energy-slot { width:24px; text-align:center; color:#dec591; font-size:23px; }
.energy-inventory b { margin-left:auto; font-size:10px; font-weight:500; color:#a2caab; }
.energy-inventory > [data-energy-item="convert"] b { color:#d6b678; }
.energy-totals { display:flex; align-items:center; gap:22px; padding:14px 18px; background:#282319; font-size:11px; color:#c9b58e; }
.energy-totals b { font:26px/1 var(--display); color:#f0d8a4; margin-right:3px; }
.energy-totals small { margin-left:auto; font-size:10px; text-align:right; }
.route-board .board-heading { padding:8px 15px; }
.route-modes { display:flex; padding:3px; border:1px solid #53482f; border-radius:3px; }
.route-modes button { border:0; background:transparent; color:#bba884; padding:4px 12px; font-size:11px; }
.route-modes button[aria-pressed="true"] { color:#1c170e; background:#d6b478; border-radius:2px; }
.route-canvas { background:#1e2923; overflow:hidden; }
.route-canvas svg { display:block; width:100%; height:auto; cursor:crosshair; touch-action:manipulation; }
.route-destinations { gap:9px; }
.route-destinations > span { font-size:10px; color:#c0b097; }
.route-destinations [data-destination] { border:1px solid #615035; border-radius:3px; padding:5px 12px; background:#2a2418; color:#e4c78f; font-size:11px; }
.route-destinations .demo-reset { margin-left:auto; }
.daily-systems { padding-top:0; }
.daily-systems h2 { white-space:pre-line; font-size:clamp(34px,3.8vw,48px); }
.daily-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:58px; }
.fishing-story { position:relative; min-height:500px; display:flex; align-items:flex-end; overflow:hidden; border:1px solid #5b4b33; border-radius:4px; background:#1c231c; }
.fishing-story .guide-art { position:absolute; inset:0; padding:0; border:0; }
.fishing-story .guide-art img { height:100%; width:100%; object-fit:cover; object-position:30% center; }
.fishing-story::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#121713 3%,#141b14f0 38%,#15201455 73%,#1017121a); }
.fishing-story-copy { position:relative; z-index:1; padding:30px; padding-top:210px; }
.fishing-story h3 { font:34px/1.18 var(--display); color:#f1e3c3; white-space:pre-line; margin:8px 0 16px; }
.fishing-story p { font-size:13px; color:#c4c6af; }
.fishing-story small { display:block; font-size:10px; color:#a3b09a; margin-top:20px; }
.fishing-timeline { position:relative; display:flex; justify-content:space-between; list-style:none; padding:22px 0 0; margin:20px 0 0; border-top:1px solid #7e856046; }
.fishing-timeline::before { content:""; position:absolute; left:0; top:-1px; height:1px; background:#d6b57a; width:100%; transform:scaleX(0); transform-origin:left; }
.fishing-story.is-visible .fishing-timeline::before { animation:timeline-grow 2.8s ease forwards; }
.fishing-timeline li { position:relative; display:grid; gap:3px; }
.fishing-timeline li::before { content:""; position:absolute; top:-26px; width:7px; height:7px; background:#c6b078; border-radius:50%; box-shadow:0 0 10px #d6b57a50; }
.fishing-timeline li:last-child::before { right:0; }
.fishing-timeline b { color:#e7d7b5; font-size:16px; font-weight:500; }
.fishing-timeline span { font-size:10px; color:#b7bda6; }
.system-notes { display:flex; flex-direction:column; justify-content:center; }
.system-note { display:flex; gap:21px; align-items:start; padding:25px 0; border-bottom:1px solid #50422e; }
.system-note:first-child { border-top:1px solid #50422e; }
.system-note img,.system-note > .icon { width:36px; height:36px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 3px 10px #0005); margin-top:3px; color:#cfac6a; }
.system-note h3 { font:24px/1.3 var(--display); color:#e6d8bd; margin-bottom:10px; }
.system-note p { font-size:13px; line-height:1.8; color:#b4a891; }
.workspace-tour .section-heading { max-width:760px; }
.workspace-tour { padding-top:14px; }
.showcase { padding-top:50px; }
.section-heading > p:last-child { max-width:610px; }
html:not(.js) .lab-tabs { display:none; }
html:not(.js) .lab-panel[hidden] { display:block!important; }
html:not(.js) .lab-panel + .lab-panel { border-top:1px solid #51452f; }
@keyframes lab-appear { from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)} }
@keyframes rune-turn { to{transform:rotate(360deg)} }
@keyframes timeline-grow { to{transform:scaleX(1)} }
@media(min-width:1100px) { .site-header nav { gap:20px; } .site-header { gap:20px; } }
@media(max-width:1000px) { .experiment-layout,.lab-panel .workshop-layout { grid-template-columns:1fr 1.35fr; gap:24px; } .lab-panel { padding:26px; } .lab-tabs button { gap:8px; } .lab-index { display:none; } .daily-layout { gap:30px; } }
@media(max-width:760px) {
 .village { min-height:0; } .village .hero-copy { padding-block:64px 54px; } .village .hero-description { max-width:360px; }
 .lab-heading { display:block; } .lab-heading > p { margin-top:18px; max-width:450px; } .systems-lab { padding-block:55px; }
 .lab-panel { padding:22px; min-height:0; } .experiment-layout,.lab-panel .workshop-layout { grid-template-columns:1fr; gap:24px; }
 .experiment-copy h3,.lab-panel .workshop-intro h2 { white-space:normal; font-size:32px; } .experiment-copy > p:not(.eyebrow) { max-width:none; }
 .experiment-notes { margin-top:16px; } .lab-panel .workshop-art { display:none; } .lab-panel .workshop-intro > p:not(.eyebrow) { max-width:none; }
 .lab-tabs button { flex-direction:column; gap:6px; padding:14px 6px; font-size:11px; } .lab-tabs img { width:24px; height:24px; }
 .lab-footer { padding:13px 16px; align-items:start; font-size:10px; } .lab-footer .tiny-dot { margin-top:5px; } .lab-footer-mark { display:none; }
 .daily-layout { grid-template-columns:1fr; gap:20px; } .fishing-story { min-height:460px; } .fishing-story-copy { padding-top:180px; }
 .system-note { padding:20px 0; } .system-note h3 { font-size:22px; } .village-guide { right:6%; bottom:13%; } .village-guide span { display:none; }
}
@media(max-width:380px) { .lab-panel{padding:15px} .lab-tabs button{font-size:10px} .lab-tabs img{width:22px;height:22px} .costume-roll{gap:10px;padding-inline:14px} .rune-orbit{width:60px;height:60px} .rune-orbit span{font-size:65px} .energy-totals{gap:10px} .energy-totals small{max-width:85px} .fishing-story-copy{padding-inline:20px} .demo-toolbar{gap:10px} }
@media(prefers-reduced-motion:reduce) { .lab-panel,.sample-shield,.rune-orbit span,.fishing-timeline::before { animation:none!important; } .fishing-timeline::before { transform:none; } .lab-tabs button::after,.energy-flow img { transition:none; } }