*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
a{color:inherit;text-decoration:none} h1,h2,h3{letter-spacing:var(--tracking-tight);line-height:var(--lh-tight);margin:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-5)}
/* header */
.cu-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}
.cu-header__in{display:flex;align-items:center;gap:var(--sp-5);height:64px}
.cu-logo{display:flex;align-items:center;gap:10px;font-weight:750;font-size:1.12rem;letter-spacing:-.03em}
.cu-logo svg{width:30px;height:30px}.cu-logo b{color:var(--accent);font-weight:500}
.cu-nav{display:flex;gap:2px;margin-left:var(--sp-4)}
.cu-nav a{padding:7px 12px;border-radius:var(--r-s);font-size:var(--fs-sm);color:var(--muted);font-weight:500;transition:var(--t-fast)}
.cu-nav a:hover,.cu-nav a[aria-current]{color:var(--ink);background:var(--surface-2)}
.cu-header__end{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}
.cu-iconbtn{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-m);border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;transition:var(--t-fast)}
.cu-iconbtn:hover{color:var(--ink);border-color:var(--border-strong)} .cu-iconbtn svg{width:18px;height:18px}
.cu-menu{display:none}
/* hero */
.cu-hero{background:var(--hero-glow);padding:var(--sp-9) 0 var(--sp-8);text-align:center}
.cu-hero h1{font-size:var(--fs-3xl);font-weight:750;max-width:15ch;margin:var(--sp-4) auto}
.cu-hero h1 em{font-style:normal;color:var(--accent)}
.cu-hero p{color:var(--muted);font-size:var(--fs-lg);max-width:56ch;margin:0 auto var(--sp-6)}
.cu-search{max-width:560px;margin:0 auto;position:relative}
.cu-search input{padding-left:46px;height:54px;font-size:var(--fs-md);border-radius:var(--r-l);box-shadow:var(--shadow-2)}
.cu-search svg{position:absolute;left:16px;top:17px;width:20px;color:var(--faint)}
.cu-search kbd{position:absolute;right:12px;top:14px;font:500 12px var(--font);color:var(--faint);border:1px solid var(--border);border-radius:6px;padding:3px 7px;background:var(--surface-2)}
.cu-trust{display:flex;gap:var(--sp-5);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-5);font-size:var(--fs-sm);color:var(--muted)}
.cu-trust span{display:inline-flex;gap:6px;align-items:center}.cu-trust svg{width:16px;color:var(--accent)}
/* badge */
.cu-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;padding:4px 10px;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent-text);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.cu-badge--new{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.cu-badge--neutral{background:var(--surface-2);color:var(--muted);border-color:var(--border)}
/* sections & grid */
.cu-section{padding:var(--sp-8) 0}
.cu-section__head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.cu-section h2{font-size:var(--fs-2xl);font-weight:700}.cu-section__head p{color:var(--muted);margin:6px 0 0}
.cu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-4)}
.cu-card{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--shadow-1);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.cu-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-3);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.cu-card__icon{width:44px;height:44px;border-radius:var(--r-m);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);margin-bottom:var(--sp-2)}
.cu-card__icon svg{width:22px;height:22px}
.cu-card h3{font-size:var(--fs-lg);font-weight:650}.cu-card p{margin:0;color:var(--muted);font-size:var(--fs-sm);flex:1}
.cu-card__cta{margin-top:var(--sp-3);font-size:var(--fs-sm);font-weight:600;color:var(--accent-text);display:inline-flex;gap:4px}
.cu-card:hover .cu-card__cta{gap:8px}
.cu-card .cu-badge{position:absolute;top:var(--sp-5);right:var(--sp-5)}
.cu-card--feature{grid-column:span 2;flex-direction:row;align-items:center;gap:var(--sp-6);background:linear-gradient(135deg,var(--brand) 0%,var(--brand-bright) 100%);color:#fff;border:0}
.cu-card--feature p{color:rgba(255,255,255,.82);font-size:var(--fs-md)}
.cu-card--feature .cu-card__icon{background:rgba(255,255,255,.16);color:#fff;width:72px;height:72px;flex:none}.cu-card--feature .cu-card__icon svg{width:34px;height:34px}
.cu-card--feature h3{font-size:var(--fs-xl)}
.cu-card--feature .cu-badge{position:static;background:rgba(255,255,255,.18);color:#fff;border:0;align-self:start}
/* buttons */
.cu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-m);font:600 var(--fs-sm)/1 var(--font);cursor:pointer;border:1px solid transparent;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.cu-btn:active{transform:scale(.98)} .cu-btn:focus-visible{outline:0;box-shadow:var(--focus)}
.cu-btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 0 rgba(255,255,255,.15) inset,var(--shadow-1)}
.cu-btn--primary:hover{background:var(--accent-hover)}
.cu-btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.cu-btn--secondary:hover{background:var(--surface-2)}
.cu-btn--ghost{background:transparent;color:var(--muted)}.cu-btn--ghost:hover{background:var(--surface-2);color:var(--ink)}
.cu-btn--light{background:#fff;color:var(--brand-strong)} .cu-btn--lg{height:52px;padding:0 24px;font-size:var(--fs-md)} .cu-btn--block{width:100%}
/* forms */
.cu-field{display:flex;flex-direction:column;gap:6px}.cu-label{font-size:var(--fs-sm);font-weight:600}
.cu-hint{font-size:var(--fs-xs);color:var(--faint)}
.cu-input,.cu-select,.cu-search input{width:100%;height:46px;padding:0 14px;border-radius:var(--r-m);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font:400 var(--fs-md) var(--font);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.cu-input::placeholder{color:var(--faint)}
.cu-input:focus,.cu-select:focus,.cu-search input:focus{outline:0;border-color:var(--accent);box-shadow:var(--focus)}
.cu-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238A99A4' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.cu-seg{display:flex;padding:4px;gap:4px;background:var(--surface-2);border-radius:var(--r-m);border:1px solid var(--border)}
.cu-seg label{flex:1;text-align:center;padding:8px;border-radius:9px;font-size:var(--fs-sm);font-weight:600;color:var(--muted);cursor:pointer}
.cu-seg input{display:none}.cu-seg input:checked+label{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.cu-range{width:100%;accent-color:var(--accent);height:6px}
.cu-range-row{display:flex;justify-content:space-between;font-size:var(--fs-sm)}.cu-range-row output{font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.cu-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}.cu-form .full{grid-column:1/-1}
/* tool layout */
.cu-crumb{font-size:var(--fs-sm);color:var(--faint);display:flex;gap:8px;padding-top:var(--sp-6)}.cu-crumb a:hover{color:var(--ink)}
.cu-toolhead{padding:var(--sp-4) 0 var(--sp-6)} .cu-toolhead h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);font-weight:750;margin:var(--sp-3) 0}
.cu-toolhead p{color:var(--muted);max-width:60ch;margin:0;font-size:var(--fs-lg)}
.cu-tool{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--sp-5);align-items:start}
.cu-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-6);box-shadow:var(--shadow-2)}
.cu-panel__title{font-size:var(--fs-sm);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--sp-5)}
.cu-actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
/* result */
.cu-result{border-radius:var(--r-xl);padding:var(--sp-6);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);position:sticky;top:88px}
.cu-result__label{font-size:var(--fs-sm);color:var(--accent-text);font-weight:600}
.cu-result__value{font:700 clamp(1.5rem,1rem + 1.8vw,2.1rem)/1.2 var(--font-mono);letter-spacing:.06em;margin:var(--sp-3) 0 var(--sp-4);word-break:break-all}
.cu-result__meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin:var(--sp-5) 0 0;padding-top:var(--sp-5);border-top:1px solid color-mix(in srgb,var(--accent) 20%,transparent);font-size:var(--fs-sm)}
.cu-result__meta dt{color:var(--muted)}.cu-result__meta dd{margin:0;font-weight:600}
.cu-note{display:flex;gap:10px;font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-4)}.cu-note svg{flex:none;width:18px;color:var(--accent)}
/* faq */
.cu-faq{display:grid;gap:var(--sp-3);max-width:820px}
.cu-faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:0 var(--sp-5);transition:border-color var(--t)}
.cu-faq details[open]{border-color:var(--border-strong);box-shadow:var(--shadow-1)}
.cu-faq summary{list-style:none;cursor:pointer;padding:var(--sp-4) 0;font-weight:600;display:flex;justify-content:space-between;gap:var(--sp-4)}
.cu-faq summary::-webkit-details-marker{display:none}
.cu-faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--faint);transition:transform var(--t)}
.cu-faq details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.cu-faq details p{margin:0 0 var(--sp-5);color:var(--muted)}
/* trust band */
.cu-band{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.cu-band div{padding:var(--sp-5);border-radius:var(--r-l);background:var(--surface-2);border:1px solid var(--border)}
.cu-band strong{display:block;margin-bottom:4px}.cu-band span{color:var(--muted);font-size:var(--fs-sm)}
/* footer */
.cu-footer{border-top:1px solid var(--border);padding:var(--sp-7) 0 var(--sp-6);margin-top:var(--sp-8);color:var(--muted);font-size:var(--fs-sm)}
.cu-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-6)}
.cu-footer h4{color:var(--ink);font-size:var(--fs-sm);margin:0 0 var(--sp-3)}.cu-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.cu-footer a:hover{color:var(--ink)}.cu-footer__bottom{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--border);display:flex;justify-content:space-between}
/* responsive */
@media (max-width:900px){.cu-tool{grid-template-columns:1fr}.cu-result{position:static}.cu-footer__grid{grid-template-columns:1fr 1fr}.cu-band{grid-template-columns:1fr}}
@media (max-width:720px){
  .cu-nav,.cu-search kbd{display:none}.cu-menu{display:grid}
  .cu-hero{padding:var(--sp-7) 0 var(--sp-6)} .cu-hero p{font-size:var(--fs-md)}
  .cu-card--feature{grid-column:auto;flex-direction:column;align-items:start;gap:var(--sp-3)}
  .cu-grid{grid-template-columns:1fr;gap:var(--sp-3)} .cu-panel{padding:var(--sp-5)}
  .cu-form{grid-template-columns:1fr}.cu-section{padding:var(--sp-7) 0}.cu-section__head{flex-direction:column;align-items:start}
  .cu-footer__bottom{flex-direction:column;gap:8px}.cu-actions{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.cu-badge svg{width:14px;height:14px}
.cu-card--ghost{grid-column:span 2;border-style:dashed;background:transparent;box-shadow:none;justify-content:center;align-items:start}
@media (max-width:720px){.cu-card--ghost{grid-column:auto}}
.cu-btn svg{width:18px;height:18px;flex:none}.cu-result .cu-actions{flex-wrap:wrap}
.cu-search input.cu-search__input,.cu-search input{padding-left:46px}.cu-search svg{height:20px}