:root { --ink:#0b0d0c; --paper:#f2f4ee; --signal:#c7ff38; --muted:#697167; --line:rgba(11,13,12,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 "Helvetica Neue","Arial Nova",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:3px solid #708c18; outline-offset:5px; }
.ww-lockup { --logo-size:72px; display:inline-flex; flex-direction:column; align-items:flex-start; color:var(--ink); width:max-content; max-width:100%; }
.ww-name { display:block; font-size:var(--logo-size); font-weight:900; letter-spacing:-.067em; line-height:1.1; white-space:nowrap; }
.ww-tagline { display:block; margin-top:.45em; font-size:max(15px,calc(var(--logo-size) * .25)); font-weight:700; letter-spacing:-.025em; line-height:1.25; white-space:nowrap; }
.ww-descriptor { display:block; margin-top:.52em; color:#596158; font-size:max(12px,calc(var(--logo-size) * .16)); line-height:1.4; letter-spacing:-.015em; white-space:nowrap; }
.ww-lockup[data-variant="1"] .ww-name::after { content:""; display:block; width:.6em; height:4px; background:var(--signal); margin-top:.13em; }
.ww-lockup[data-variant="2"],.ww-lockup[data-variant="5"] { color:var(--paper); }
.ww-lockup[data-variant="2"] .ww-way { color:var(--signal); }
.ww-lockup[data-variant="2"] .ww-descriptor,.ww-lockup[data-variant="5"] .ww-descriptor { color:#adb5ab; }
.ww-lockup[data-variant="3"] .ww-wind { font-weight:400; }
.ww-lockup[data-variant="3"] .ww-tagline::after { content:""; display:block; height:3px; width:1.5em; margin-top:.4em; background:var(--signal); }
.ww-lockup[data-variant="4"] .ww-name { background:var(--signal); padding:.01em .13em .09em .09em; }
.ww-lockup[data-variant="5"] .ww-name { color:var(--signal); }
.ww-lockup[data-variant="6"] .ww-tagline { color:var(--ink); background:var(--signal); padding:.17em .38em .2em; }
.brand-shell { width:min(calc(100% - 80px),1440px); margin-inline:auto; }
.review-header { display:flex; justify-content:space-between; align-items:center; padding-block:25px; border-bottom:1px solid var(--line); }
.review-wordmark { font-weight:900; font-size:26px; letter-spacing:-.065em; }
.review-header > span { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#596158; }
.review-intro { padding:46px 0 34px; display:flex; justify-content:space-between; align-items:flex-end; gap:32px; }
.review-intro h1 { margin:0; font-size:clamp(38px,4.4vw,66px); line-height:1; font-weight:850; letter-spacing:-.065em; }
.review-intro p { margin:18px 0 0; max-width:690px; font-size:17px; color:#596158; }
.palette { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.swatch { width:36px; height:36px; border:1px solid var(--line); }
.swatch.ink { background:var(--ink); }
.swatch.paper { background:var(--paper); }
.swatch.lime { background:var(--signal); }
.logo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.logo-card { position:relative; min-width:0; display:flex; flex-direction:column; min-height:350px; border:1px solid var(--line); background:#fff; transition:transform .2s,border-color .2s; }
.logo-card:hover { transform:translateY(-4px); border-color:var(--ink); }
.logo-card.is-selected { outline:3px solid var(--signal); outline-offset:3px; }
.logo-card.is-dark { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.card-top { display:flex; align-items:center; justify-content:space-between; padding:22px 25px 0; gap:14px; }
.card-number { font-size:13px; letter-spacing:.08em; font-weight:700; color:#697167; }
.is-dark .card-number { color:#a4ada2; }
.card-name { font-size:14px; font-weight:650; }
.card-art { flex:1; display:flex; justify-content:center; align-items:center; padding:30px 22px 36px; }
.card-art .ww-lockup { --logo-size:clamp(55px,5.3vw,80px); }
.card-bottom { border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:16px 25px; font-size:14px; }
.is-dark .card-bottom { border-color:#353b34; }
.card-bottom span:last-child { font-size:19px; }
.review-note { padding-top:21px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:#596158; }
.review-note p { margin:0; }
.website-section { padding-block:90px 45px; scroll-margin-top:24px; }
.website-title { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.website-title h2 { font-size:clamp(32px,3.4vw,48px); letter-spacing:-.06em; line-height:1; margin:0 0 12px; }
.website-title p { margin:0; color:#596158; }
.open-website { display:inline-flex; align-items:center; justify-content:center; gap:25px; background:var(--ink); color:var(--paper); font-weight:700; font-size:14px; padding:14px 20px; white-space:nowrap; }
.preview-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:15px 20px; border:1px solid var(--line); border-bottom:0; background:#e8ebe2; }
.variant-switch { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.variant-switch > span { font-size:14px; margin-right:6px; }
.variant-switch button { min-width:40px; min-height:40px; background:transparent; border:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:650; }
.variant-switch button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--signal); }
.device-switch { display:flex; gap:7px; }
.device-switch button { border:1px solid var(--line); background:transparent; min-height:40px; padding:7px 14px; font-size:14px; }
.device-switch button[aria-pressed="true"] { background:var(--paper); border-color:var(--ink); }
.preview-stage { background:#dfe3d9; border:1px solid var(--line); padding:0; overflow:hidden; }
.preview-stage.is-mobile { padding:24px; }
.preview-stage iframe { display:block; width:100%; height:910px; border:0; margin:auto; background:var(--paper); }
.preview-stage.is-mobile iframe { max-width:390px; height:780px; border:1px solid var(--line); box-shadow:0 12px 45px #0b0d0c15; }
.review-footer { border-top:1px solid var(--line); padding:25px 0 40px; font-size:14px; color:#596158; display:flex; justify-content:space-between; gap:20px; }
.review-footer a { border-bottom:1px solid var(--line); }
.generation-board { margin-top:45px; border-top:1px solid var(--line); padding-top:24px; }
.generation-board summary { cursor:pointer; font-size:16px; font-weight:700; }
.generation-board img { display:block; max-width:100%; width:100%; margin-top:20px; }
@media(min-width:1700px) { .card-art .ww-lockup { --logo-size:86px; } }
@media(max-width:1150px) { .logo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .card-art .ww-lockup { --logo-size:clamp(62px,8.5vw,86px); } }
@media(max-width:700px) { .brand-shell { width:calc(100% - 32px); } .review-intro { padding-top:32px; } .review-intro p { font-size:16px; } .palette { display:none; } .logo-grid { grid-template-columns:1fr; gap:16px; } .logo-card { min-height:330px; } .card-art .ww-lockup { --logo-size:clamp(64px,20vw,82px); } .review-header { padding-block:18px; } .review-header > span { font-size:12px; letter-spacing:.04em; } .website-section { padding-top:60px; } .website-title { display:block; } .open-website { margin-top:20px; } .preview-toolbar { padding:12px; flex-wrap:wrap; } .variant-switch { gap:6px; } .variant-switch > span { display:none; } .device-switch { display:none; } .preview-stage.is-mobile { padding:0; } .preview-stage iframe { height:780px; } .review-footer { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
@media(max-width:380px) { .card-art { padding-inline:16px; } .card-art .ww-lockup { --logo-size:62px; } .card-top,.card-bottom { padding-inline:20px; } }