@font-face{font-family:ProjectCalistoga;src:url('/assets/calistoga-regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:ProjectInter;src:url('/assets/project-inter.woff2');font-weight:400;font-display:swap}
@font-face{font-family:ProjectMontserrat;src:url('/assets/project-montserrat.woff2');font-weight:500;font-display:swap}
@font-face{font-family:ProjectManrope;src:url('/assets/project-manrope.woff2');font-weight:400;font-display:swap}
.design-board{border-top:1px solid var(--line)}.design-board h2{margin:22px 0}.design-board>p{color:var(--muted);max-width:680px}.board-label{font-size:14px;letter-spacing:2px;border-bottom:1px solid var(--line);padding-bottom:20px;margin:60px 0 30px;color:var(--purple)}.palette-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.palette-chip{height:155px;border-radius:8px;border:1px solid #ffffff30;margin-bottom:20px}.palette-grid h3{font-size:19px;margin-bottom:5px}.palette-grid code{color:var(--muted);font-size:14px}.palette-grid p{margin-top:10px;font-size:14px;color:var(--muted)}.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}.type-grid>article+article{border-left:1px solid var(--line);padding-left:50px}.type-sample{font-size:clamp(90px,12vw,170px);line-height:1.2;color:#e9ddff}.type-grid h3{font-size:28px;margin:10px 0}.type-grid p{color:var(--muted);font-size:16px}.type-grid .type-alphabet{margin-top:25px;font-size:24px;line-height:1.6}.brand-example{background:var(--example-bg);border-radius:12px;padding:50px;color:var(--example-ink)}.brand-example>span:first-child{font-size:14px;letter-spacing:2px;color:#36312e}.brand-example .brand-headline{font-size:clamp(32px,5vw,66px);line-height:1.15;max-width:850px;margin:25px 0}.brand-example-button{display:inline-block;margin-top:30px;padding:14px 25px;border-radius:30px;color:white;font-size:16px}
.color-options{position:relative;display:block;height:340px;margin:15px auto 0;width:min(100%,500px)}.color-options button{position:absolute;left:calc(50% - 46px);bottom:25px;width:92px;height:245px;padding:10px 6px 30px;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;transform-origin:50% calc(100% - 18px);transform:rotate(var(--fan-angle));border:1px solid #ffffff70;border-radius:8px 8px 18px 18px;background:#eee9e3;color:#161219;box-shadow:0 6px 18px #0005;transition:transform .35s,box-shadow .35s}.color-options button i{width:100%;height:140px;border-radius:3px;flex-shrink:0}.color-options button>span{font-size:14px;line-height:1.25}.color-options button small{font-size:12px;color:#51445e;margin-top:5px}.color-options button:after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#86818b;bottom:12px;left:calc(50% - 6px);box-shadow:inset 0 1px 3px #0008}.color-options button[aria-pressed=true]{outline:3px solid var(--purple);outline-offset:3px;transform:rotate(var(--fan-angle)) translateY(-14px);z-index:2}.color-options button:hover,.color-options button:focus-visible{transform:rotate(var(--fan-angle)) translateY(-25px);z-index:3}.color-options button:focus-visible{outline:3px solid white;outline-offset:4px}
@media(max-width:650px){.palette-grid{grid-template-columns:1fr 1fr;gap:25px 18px}.palette-chip{height:110px}.type-grid{grid-template-columns:1fr;gap:35px}.type-grid>article+article{padding:30px 0 0;border-left:0;border-top:1px solid var(--line)}.type-sample{font-size:110px}.brand-example{padding:25px}.color-options{height:300px}.color-options button{width:76px;left:calc(50% - 38px);height:205px}.color-options button i{height:108px}.color-options button>span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.color-options button{transition:none}}