.cc-page{--cc-ink:#18231f;--cc-paper:#f5f2e9;background:var(--cc-paper);color:var(--cc-ink);min-height:100vh;font-family:Arial,Noto Sans JP,sans-serif}.cc-page *{box-sizing:border-box}.cc-header{border-bottom:1px solid var(--cc-ink);justify-content:space-between;padding:24px 5%;font-size:14px;display:flex}.cc-page a{text-underline-offset:5px}.cc-hero{grid-template-columns:3fr 2fr;gap:32px;padding:56px 5% 36px;display:grid}.cc-hero h1{letter-spacing:-.06em;margin:28px 0;font-size:clamp(32px,5.5vw,80px);font-weight:800;line-height:1.3}.cc-hero h1 span{color:#2347d9}.cc-hero p{line-height:1.9}.cc-art{justify-content:center;align-items:center;font-size:clamp(80px,14vw,200px);font-weight:800;display:flex;transform:rotate(-6deg)}.cc-art span{color:#fff;background:#2347d9;padding:0 12px}.cc-art span+span{color:#18231f;background:#dae96a;transform:translateY(32px)}.cc-intro{grid-column:1/-1;max-width:850px}.cc-workspace{border:1px solid var(--cc-ink);grid-template-columns:1fr 1fr;margin:0 5%;display:grid}.cc-workspace>div{min-width:0;padding:32px}.cc-workspace h2,.cc-info h2,.cc-related h2{margin:0 0 24px;font-size:18px;font-weight:700}.cc-inputs{border-right:1px solid}.cc-color{margin:24px 0}.cc-color label{margin-bottom:12px;font-weight:700;display:block}.cc-color>div{gap:12px;display:flex}.cc-color input[type=color]{background:#fff;border:1px solid;width:64px;height:52px;padding:2px}.cc-color input[type=text]{color:#18231f;background:#fff;border:1px solid;width:100%;min-width:0;padding:12px;font:20px monospace}.cc-page button{color:#fff;cursor:pointer;background:#18231f;border:1px solid #18231f;min-height:48px;padding:14px 18px;font-weight:700}.cc-page button:disabled{opacity:.5;cursor:default}.cc-page :is(button,a,input,summary,textarea):focus-visible{outline-offset:4px;outline:3px solid #d35000}.cc-workspace p{font-size:14px;line-height:1.9}.cc-results{background:#dae96a}.cc-ratio{letter-spacing:-.06em;font-variant-numeric:tabular-nums;font-size:clamp(64px,9vw,130px);font-weight:800;line-height:1.2}.cc-ratio small{letter-spacing:0;font-size:30px}.cc-results ul{margin:24px 0;padding:0;list-style:none}.cc-results li{border-top:1px solid #53602a;justify-content:space-between;gap:16px;padding:12px 0;display:flex}.cc-results li small{margin-top:3px;font-size:12px;display:block}.cc-results strong{white-space:nowrap}.cc-preview,.cc-fixes{border-top:1px solid}.cc-preview{border-right:1px solid}.cc-sample{overflow-wrap:anywhere;border:1px solid #737373;padding:28px}.cc-sample p{font-size:16px}.cc-sample .cc-large{font-size:24px;font-weight:400}.cc-fixes button{text-align:left;color:#18231f;background:#fff;flex-wrap:wrap;align-items:center;gap:12px;width:100%;margin:16px 0;display:flex}.cc-fixes button>span:last-child{font-size:13px}.cc-swatch{border:1px solid #737373;width:28px;height:28px;display:block}.cc-info,.cc-related{max-width:1100px;margin:auto;padding:64px 5%}.cc-info details{border-top:1px solid;padding:20px 0;line-height:1.9}.cc-info summary{cursor:pointer;font-weight:700}.cc-info p{margin-top:16px}.cc-sources{font-size:13px}.cc-cta{color:#fff;background:#2347d9;padding:56px 5%}.cc-cta h2{margin:24px 0 36px;font-size:clamp(26px,4vw,48px);line-height:1.5}.cc-cta a{color:#18231f;background:#fff;padding:20px;font-weight:700;display:inline-block}.cc-related{gap:24px;display:grid}.cc-results textarea{color:#18231f;background:#fff;width:100%;height:220px;padding:12px}@media (max-width:700px){.cc-header{font-size:12px}.cc-hero{grid-template-columns:1fr;gap:24px;padding-top:32px}.cc-art{display:none}.cc-workspace{grid-template-columns:1fr}.cc-workspace>div{padding:24px}.cc-inputs,.cc-preview{border-right:0}.cc-results{border-top:1px solid}.cc-info,.cc-related{padding-top:40px;padding-bottom:40px}.cc-results li{font-size:14px}}