.planned-art-link { display: block; }
.planned-art { aspect-ratio: 1; padding: 25px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(ellipse at 70% 20%, #22332e 0, #131d1b 45%, #0d1513 100%); color: #eef6e6; position: relative; overflow: hidden; }
.planned-art::after { content: ''; position: absolute; right: -8%; bottom: -30%; width: 68%; height: 125%; transform: rotate(36deg); border-left: 1px solid #b8f30035; border-right: 1px solid #b8f30013; background: #b8f30002; pointer-events: none; }
.planned-art-top, .planned-art-foot, .planned-art-title { position: relative; z-index: 1; }
.planned-art-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.planned-art-top img { width: 86px; height: auto; object-fit: contain; }
.planned-art-top > span { text-align: right; font-size: 9px; line-height: 1.6; color: #9bab91; letter-spacing: .035em; max-width: 100px; }
.planned-art-title { margin: 24px 0; }
.planned-art-title .eyebrow { color: #a7bf92; font-size: 9px; }
.planned-art-title > strong { display: block; font-size: clamp(27px,2.8vw,43px); font-weight: 620; line-height: 1.1; letter-spacing: -.045em; margin: 14px 0 23px; overflow-wrap: anywhere; }
.planned-art-rule { display: block; width: 34px; height: 3px; background: #b8f300; }
.planned-art-foot { display: flex; justify-content: space-between; gap: 15px; font-size: 10px; color: #a4b396; padding-top: 15px; border-top: 1px solid #aac39320; }
.planned-art-foot > span { color: #b8f300; font-size: 16px; line-height: 1; }
.planned-card:hover .planned-art { background: radial-gradient(ellipse at 70% 20%, #2c4133 0, #17231d 45%, #0d1513 100%); }
.planned-badge { font-size: 10px; color: #536747; background: #edf2e7; border: 1px solid #dae4ce; padding: 4px 9px; border-radius: 5px; white-space: nowrap; display: inline-block; }
.planned-card .card-meta .eyebrow { text-align: right; }
.planned-card-action { border-top: 1px solid #e2e8da; padding-top: 18px; margin-top: auto; }
.planned-card-action > a:first-child { display: flex; justify-content: space-between; }
.planned-card-action > a:last-child { font-size: 11px; color: #68795a; display: inline-block; margin-top: 13px; }
.planned-detail { margin: 28px 0 50px; }
.planned-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: start; margin-top: 25px; }
.planned-art-detail { border-radius: 16px; padding: 38px; }
.planned-art-detail .planned-art-title > strong { font-size: clamp(38px,4vw,58px); }
.planned-art-detail .planned-art-top img { width: 115px; }
.planned-detail-copy h1 { margin: 14px 0 17px; font-size: clamp(35px,4vw,54px); line-height: 1.1; }
.planned-detail-copy > p { color: #617058; font-size: 15px; line-height: 1.8; margin: 22px 0; }
.planned-next { margin: 29px 0; border-top: 1px solid #d4deca; padding-top: 25px; }
.planned-next h2 { font-size: 21px; margin: 0 0 22px; }
.planned-next ol { margin: 0; padding: 0; list-style: none; }
.planned-next li { display: flex; gap: 16px; margin: 20px 0; }
.planned-next li > span { font-size: 10px; color: #79925b; margin-top: 3px; }
.planned-next strong { font-size: 14px; font-weight: 650; }
.planned-next p { font-size: 12px; color: #69775f; line-height: 1.7; margin: 5px 0 0; }
.planned-detail-copy p.planned-origin { font-size: 11px; line-height: 1.8; margin-top: 23px; }
.roadmap-page { margin: 35px 0 65px; }
.roadmap-intro { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 34px; }
.roadmap-intro h1 { margin: 13px 0 16px; font-size: clamp(36px,4vw,53px); line-height: 1.1; }
.roadmap-intro h1 > span { color: #718d28; }
.roadmap-intro p { max-width: 690px; margin: 0; font-size: 15px; line-height: 1.8; color: #617258; }
.roadmap-intro > a { flex-shrink: 0; }
.roadmap-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #2e4030; border-radius: 13px; background: #121e18; color: #f0f7e9; overflow: hidden; margin-bottom: 32px; }
.roadmap-stats > div { padding: 27px 29px; }
.roadmap-stats > div + div { border-left: 1px solid #34442e; }
.roadmap-stats strong { font-size: 37px; letter-spacing: -.04em; font-weight: 550; line-height: 1.1; display: block; }
.roadmap-stats > div:nth-child(3) strong { color: #b8f300; }
.roadmap-stats span { font-size: 11px; color: #a5b895; margin-top: 11px; display: block; }
.roadmap-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.62fr) auto; gap: 16px; align-items: end; }
.roadmap-controls label { display: block; font-size: 11px; font-weight: 600; color: #506346; margin-bottom: 8px; }
.roadmap-controls input, .roadmap-controls select { width: 100%; height: 48px; border: 1px solid #cbd6c1; border-radius: 7px; padding: 11px 14px; font: inherit; font-size: 13px; background: #fff; color: #263b1d; box-sizing: border-box; }
.roadmap-controls .btn { height: 48px; min-height: 48px; white-space: nowrap; font-size: 12px; }
.roadmap-controls .btn:disabled { cursor: not-allowed; opacity: .55; }
.roadmap-table-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 27px 0 15px; color: #637455; font-size: 11px; }
.roadmap-table-heading > :first-child { font-weight: 550; }
.roadmap-table-scroll { border: 1px solid #dce4d2; background: #fff; border-radius: 10px; overflow-x: auto; max-width: 100%; }
.roadmap-table { width: 100%; min-width: 960px; border-collapse: collapse; text-align: left; font-size: 12px; }
.roadmap-table thead { background: #edf2e7; }
.roadmap-table thead th { padding: 17px 18px; font-size: 10px; color: #5f7350; font-weight: 650; border-bottom: 1px solid #d6e1cb; white-space: nowrap; }
.roadmap-table td, .roadmap-table tbody th { padding: 19px 18px; border-bottom: 1px solid #e7eddf; vertical-align: middle; color: #67755d; }
.roadmap-table tbody tr:last-child td, .roadmap-table tbody tr:last-child th { border-bottom: 0; }
.roadmap-table tbody tr:hover { background: #fbfcf9; }
.roadmap-table tbody th { min-width: 185px; font-weight: 550; }
.roadmap-table tbody th a { color: #293e20; font-size: 13px; }
.roadmap-table tbody th a > span { font-size: 10px; color: #7d9368; margin-left: 5px; }
.roadmap-table tbody th small { display: block; color: #849478; font-size: 9px; font-weight: 400; margin-top: 7px; }
.roadmap-table tbody tr[hidden] { display: none; }
.roadmap-table td:nth-child(2) { max-width: 160px; line-height: 1.6; }
.roadmap-table td:last-child { font-size: 11px; min-width: 180px; line-height: 1.7; }
.roadmap-status { display: inline-block; font-size: 10px; padding: 5px 9px; border: 1px solid #dce5d2; border-radius: 30px; white-space: nowrap; }
.roadmap-status.is-planned { background: #f4f6f0; color: #728164; }
.roadmap-status.is-available { background: #e8f4d4; color: #3f621f; border-color: #d4e6bd; }
.roadmap-status.is-linked { background: #ecf3eb; color: #5c7457; }
.roadmap-empty { padding: 35px; color: #536a42; }
.roadmap-empty strong { font-size: 17px; }
.roadmap-empty p { font-size: 13px; margin: 8px 0 0; }
.roadmap-export-note { font-size: 11px; color: #708360; margin: 13px 0 0; }
.roadmap-blends { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; border-top: 1px solid #d7e0cd; padding-top: 35px; margin-top: 40px; }
.roadmap-blends h2 { margin: 13px 0 15px; font-size: 30px; }
.roadmap-blends p { color: #677b57; font-size: 13px; line-height: 1.8; max-width: 480px; }
.roadmap-blend-list > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid #dce5d2; }
.roadmap-blend-list > div:first-child { padding-top: 4px; }
.roadmap-blend-list strong { font-size: 15px; font-weight: 550; color: #314827; }
.roadmap-blend-list span { font-size: 10px; color: #738764; text-align: right; }
.roadmap-context { background: #eaf0e2; border-radius: 9px; margin: 31px 0 0; padding: 20px 23px; font-size: 11px; color: #637753; line-height: 1.85; }
.roadmap-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .roadmap-controls { grid-template-columns: minmax(0,1fr) minmax(190px, .7fr); } .roadmap-controls > button { grid-column: 1/-1; justify-self: end; } .planned-art { padding: 20px; } .planned-detail-grid { gap: 30px; } .planned-art-detail { padding: 30px; } .roadmap-stats > div { padding: 23px; } }
@media (max-width: 760px) { .roadmap-intro { display: block; } .roadmap-intro > a { display: inline-block; margin-top: 18px; } .roadmap-stats { grid-template-columns: 1fr 1fr; } .roadmap-stats > div:nth-child(3) { border-left: 0; } .roadmap-stats > div:nth-child(n+3) { border-top: 1px solid #34442e; } .roadmap-blends { grid-template-columns: 1fr; gap: 23px; } .planned-detail-grid { grid-template-columns: 1fr; } .planned-art-detail { max-width: 550px; width: 100%; box-sizing: border-box; } .planned-art-detail .planned-art-title > strong { font-size: clamp(40px,8vw,62px); } .planned-detail-copy h1 { font-size: 42px; } }
@media (max-width: 520px) { .roadmap-page { margin-top: 25px; } .roadmap-intro h1 { font-size: 36px; } .roadmap-intro p { font-size: 14px; } .roadmap-controls { grid-template-columns: 1fr; gap: 15px; } .roadmap-controls > button { grid-column: auto; justify-self: stretch; } .roadmap-table-heading { display: block; line-height: 1.8; } .roadmap-table-heading > span { display: block; } .roadmap-table-heading > :last-child { font-size: 10px; margin-top: 5px; } .roadmap-stats > div { padding: 23px 20px; } .roadmap-stats strong { font-size: 33px; } .roadmap-stats span { font-size: 10px; } .planned-art { padding: 26px; } .planned-art-title > strong { font-size: clamp(32px,8vw,46px); } .planned-art-top img { width: 95px; } .planned-detail-copy h1 { font-size: 37px; } .roadmap-blends h2 { font-size: 28px; } .roadmap-context { padding: 19px; } }