/* Draft B amplifies the existing forest, paper and sun palette. */
.preview-switch{display:flex;align-items:center;gap:4px;margin-left:15px;background:#fff9;padding:3px;border-radius:6px}.preview-switch button{border:0;background:transparent;color:var(--ink);font:inherit;font-size:12px;padding:4px 10px;border-radius:4px;white-space:nowrap}.preview-switch button[aria-pressed=true]{background:var(--green);color:white}.preview-note{height:40px}.design-path{display:none}
html[data-design=b] .site-header{height:94px;border-bottom:0}
html[data-design=b] .brand svg{background:var(--green);stroke:#fff;border-radius:9px;padding:7px;width:43px;height:43px}
html[data-design=b] .brand{gap:9px;font-size:25px}
html[data-design=b] .intro{background:var(--sun);position:relative;padding:38px 38px 32px;border-radius:18px;margin:14px 0 38px;gap:36px;align-items:center}
html[data-design=b] .intro>div:first-child{flex:1;min-width:0}
html[data-design=b] .intro h1{font-size:clamp(40px,4.5vw,64px);font-weight:800;line-height:1.06;letter-spacing:-.04em;margin-bottom:23px;max-width:660px}
html[data-design=b] .intro h1 span{color:var(--green)}
html[data-design=b] .intro p{color:#3e4f36;font-size:16px;max-width:44ch}
html[data-design=b] .search-block{width:37%;max-width:400px;padding-top:7px}
html[data-design=b] .search-block label{font-size:20px;line-height:1.4;margin-bottom:15px;font-weight:800;letter-spacing:-.02em}
html[data-design=b] .search-box{height:64px;border:0;box-shadow:0 7px 18px #2030240c;border-radius:10px}
html[data-design=b] .search-block>p{font-size:13px;margin-top:13px;max-width:none}
html[data-design=b] .design-path{display:flex;gap:0;align-items:center;margin-top:26px;font-size:13px;font-weight:750;color:var(--green)}
html[data-design=b] .design-path span{display:flex;align-items:center;gap:8px;white-space:nowrap}
html[data-design=b] .design-path span+span:before{content:'';width:24px;height:1px;background:#96ad72;margin:0 10px}
.design-path svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[data-design=b] .section-title{margin-bottom:18px}
html[data-design=b] .section-title h2{font-size:29px;line-height:1.2;font-weight:800;letter-spacing:-.035em}
html[data-design=b] .section-title>span{padding-top:4px}
html[data-design=b] .trending-grid{grid-template-columns:1.3fr 1fr 1fr;gap:18px}
html[data-design=b] .spotlight{height:220px}
html[data-design=b] .spotlight-copy{bottom:20px;left:22px;right:22px}
html[data-design=b] .spotlight-copy strong{font-size:27px;font-weight:800;margin:10px 0 7px;line-height:1.1;max-width:90%}
html[data-design=b] .spotlight-copy>.spotlight-tag{border-radius:4px;background:var(--sun);font-weight:800}
html[data-design=b] .spotlight-arrow{background:#fff;color:var(--green);width:34px;height:34px;border:0;bottom:0}
html[data-design=b] .library{margin-top:42px}
html[data-design=b] .library h2{font-size:34px;letter-spacing:-.035em;font-weight:800}
html[data-design=b] .library-heading{margin-bottom:25px}
html[data-design=b] .density-control .selected{background:var(--sun)}
html[data-design=b] .tabs span{background:var(--sun)}
html[data-design=b] .art{aspect-ratio:1.6}
html[data-design=b] .card-name{font-weight:800;margin-top:13px}
html[data-design=b] .card-action{font-weight:800}
html[data-design=b] .platform-tag{background:var(--sun);color:var(--ink)}
html[data-design=b] .bookmark{background:#fff}
html[data-design=b] .bookmark[aria-pressed=true]{background:var(--green);color:white}
html[data-design=b] .card-open:hover .card-name{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
html[data-design=b] .claim-game{padding-bottom:20px;border-bottom:1px solid var(--line)}
html[data-design=b] .claim-content h2{font-weight:800;font-size:32px;letter-spacing:-.035em}
html[data-design=b] .code-display{background:var(--sun);font-size:24px}
html[data-design=b] .claim-steps li.done{color:var(--green)}
@media(max-width:1000px){html[data-design=b] .intro{padding:28px;gap:25px}html[data-design=b] .intro h1{font-size:43px}html[data-design=b] .search-block{width:42%}html[data-design=b] .intro p{font-size:15px}html[data-design=b] .search-block label{font-size:18px}html[data-design=b] .spotlight{height:205px}html[data-design=b] .spotlight-copy strong{font-size:23px}html[data-design=b] .spotlight-copy{left:15px;right:15px}}
@media(max-width:650px){.preview-note{height:43px;font-size:11px}.preview-switch{margin-left:5px}.preview-switch button{font-size:11px;padding:4px 7px}.preview-dot{display:none}html[data-design=b] .site-header{height:125px}html[data-design=b] .brand{font-size:22px}html[data-design=b] .brand svg{width:36px;height:36px;padding:6px;border-radius:8px}html[data-design=b] .intro{margin:12px -8px 29px;padding:26px 22px 24px;border-radius:14px}html[data-design=b] .intro h1{font-size:38px;line-height:1.09;margin-bottom:19px;letter-spacing:-.035em}html[data-design=b] .intro p{font-size:15px}html[data-design=b] .search-block{width:100%;max-width:none;margin-top:25px;padding-top:23px;border-top:1px solid #b8ca91}html[data-design=b] .search-block label{font-size:18px;margin-bottom:12px}html[data-design=b] .search-box{height:58px;padding:0 12px}html[data-design=b] .search-box input{font-size:15px}html[data-design=b] .search-block>p{font-size:12px;margin-top:11px}html[data-design=b] .design-path{font-size:12px;margin-top:20px}html[data-design=b] .design-path span+span:before{width:11px;margin:0 6px}html[data-design=b] .design-path span{gap:5px}html[data-design=b] .section-title h2{font-size:27px}html[data-design=b] .trending-grid{grid-template-columns:repeat(3,88%);gap:12px}html[data-design=b] .spotlight{height:216px}html[data-design=b] .spotlight-copy strong{font-size:25px}html[data-design=b] .library{margin-top:28px}html[data-design=b] .library h2{font-size:28px}html[data-design=b] .library-heading{margin-bottom:20px}html[data-design=b] .claim-content h2{font-size:28px}html[data-design=b] .art{aspect-ratio:1.35}html[data-design=b] .compact .art{aspect-ratio:1.7}}
@media(max-width:350px){html[data-design=b] .intro{padding:23px 18px}html[data-design=b] .intro h1{font-size:32px}.preview-switch button{padding:4px 5px;font-size:10px}html[data-design=b] .design-path{font-size:11px}html[data-design=b] .design-path span+span:before{width:8px;margin:0 4px}}

html[data-design=b] .intro h1{text-wrap:balance}

@media(max-width:650px){html[data-design=b] .intro h1{font-size:34px}html[data-design=b] .search-block{margin-top:20px;padding-top:17px}html[data-design=b] .design-path{margin-top:18px}}
@media(max-width:350px){html[data-design=b] .intro h1{font-size:32px}}