:root{--ink:#172033;--muted:#5d687b;--line:#dce3eb;--paper:#fff;--soft:#f5f7fa;--accent:#6457e8;--accent2:#14a38b;--shadow:0 22px 55px rgba(22,30,50,.1);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--soft)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--soft);color:var(--ink)}button,input,select,textarea{font:inherit}a{color:inherit}.cs-wrap{width:min(1160px,calc(100% - 2rem));margin-inline:auto}.cs-service{background:#fff;border-bottom:1px solid var(--line)}.cs-service__inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.cs-brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:750}.cs-brand small{font-size:.72rem;color:var(--muted);font-weight:650}.cs-brand img{width:128px;height:34px;object-fit:contain}.cs-tools-link{text-decoration:none;font-size:.9rem;font-weight:750;color:var(--accent)}.cs-crumbs{padding:1rem 0;color:var(--muted);font-size:.86rem}.cs-crumbs a{text-decoration:none}.cs-hero{padding:clamp(2.5rem,7vw,5.8rem) 0 3rem;overflow:hidden;position:relative}.cs-hero:after{content:"";position:absolute;right:-8%;top:8%;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0,transparent 66%);opacity:.1;pointer-events:none}.cs-eyebrow{display:inline-flex;padding:.42rem .7rem;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:999px;color:var(--accent);font-size:.75rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.cs-hero h1{max-width:920px;margin:.9rem 0 1rem;font-size:clamp(2.25rem,6vw,5.1rem);line-height:.98;letter-spacing:-.055em}.cs-hero p{max-width:730px;margin:0;color:var(--muted);font-size:clamp(1rem,2vw,1.18rem);line-height:1.7}.cs-private{display:flex;align-items:center;gap:.55rem;margin-top:1.15rem;font-size:.86rem;font-weight:750}.cs-private:before{content:"";width:.65rem;height:.65rem;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent2) 16%,transparent)}
.cs-main{padding:0 0 4rem}.cs-tool{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:1.1rem;align-items:start}.cs-panel{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:clamp(1.1rem,3vw,1.8rem);box-shadow:var(--shadow);min-width:0}.cs-panel h2{margin:0 0 1rem;font-size:1.25rem}.cs-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.cs-field{display:grid;gap:.45rem;color:var(--muted);font-size:.82rem;font-weight:750}.cs-field--full{grid-column:1/-1}.cs-field input,.cs-field select,.cs-field textarea{width:100%;min-width:0;padding:.78rem .85rem;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}.cs-field textarea{min-height:160px;resize:vertical;line-height:1.5}.cs-field input[type=color]{padding:.25rem;height:48px}.cs-field input[type=range]{padding:0;border:0}.cs-check{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--ink)}.cs-check input{width:1.05rem;height:1.05rem}.cs-drop{display:grid;place-items:center;min-height:150px;padding:1.2rem;border:2px dashed color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--accent) 4%,#fff);text-align:center;cursor:pointer}.cs-drop strong{display:block;font-size:1.05rem}.cs-drop span{display:block;margin-top:.35rem;color:var(--muted);font-size:.84rem}.cs-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}.cs-btn{border:0;border-radius:12px;padding:.78rem 1rem;background:var(--accent);color:#fff;font-weight:800;cursor:pointer;text-decoration:none}.cs-btn:hover{filter:brightness(.94)}.cs-btn:disabled{opacity:.45;cursor:not-allowed}.cs-btn--ghost{background:transparent;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line))}.cs-status{margin:.9rem 0 0;min-height:1.4em;color:var(--muted);font-size:.88rem}.cs-status[data-state=error]{color:#a12636}.cs-stage{display:grid;place-items:center;min-height:420px;overflow:auto;background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 12px,#f1f5f9 12px,#f1f5f9 24px);border-radius:18px;border:1px solid var(--line)}.cs-stage canvas,.cs-stage img,.cs-stage svg,.cs-stage video{display:block;max-width:100%;max-height:620px}.cs-empty{max-width:310px;padding:2rem;text-align:center;color:var(--muted)}.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-top:1rem}.cs-metric{padding:.8rem;border-radius:14px;background:var(--soft);text-align:center}.cs-metric strong{display:block;font-size:1.05rem}.cs-metric span{font-size:.72rem;color:var(--muted)}.cs-list{display:grid;gap:.6rem;margin-top:1rem}.cs-file{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:12px;font-size:.84rem}.cs-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-file button{border:0;background:transparent;color:#a12636;cursor:pointer}.cs-output{margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.cs-output:empty{display:none}.cs-note{padding:.85rem 1rem;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,#fff);color:var(--muted);font-size:.84rem;line-height:1.55}.cs-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:.6rem}.cs-swatch{min-height:115px;border:0;border-radius:16px;padding:.7rem;display:flex;align-items:flex-end;justify-content:center;font-weight:850;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.cs-diff{display:grid;gap:2px;margin-top:1rem;max-height:420px;overflow:auto;background:#111827;padding:.7rem;border-radius:14px;color:#e5e7eb;font:13px/1.5 ui-monospace,monospace}.cs-diff div{white-space:pre-wrap;padding:.12rem .4rem}.cs-diff .add{background:#123d2c}.cs-diff .remove{background:#4a2028}.cs-diff .same{opacity:.72}.cs-timer{text-align:center;padding:2rem}.cs-clock{font-size:clamp(4rem,12vw,7.5rem);font-weight:900;letter-spacing:-.07em;font-variant-numeric:tabular-nums}.cs-mode{color:var(--accent);font-weight:850;text-transform:uppercase;letter-spacing:.12em}.cs-task-list{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.5rem}.cs-task-list li{display:flex;align-items:center;gap:.55rem;padding:.65rem;border:1px solid var(--line);border-radius:10px}.cs-task-list button{margin-left:auto;border:0;background:none;color:#a12636}.cs-guide{padding:clamp(3rem,6vw,5.5rem) 0;background:#fff;border-top:1px solid var(--line)}.cs-guide__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem}.cs-guide h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:0 0 1rem}.cs-guide h3{margin:1.5rem 0 .5rem}.cs-guide p,.cs-guide li{color:var(--muted);line-height:1.75}.cs-faq{margin-top:2.5rem}.cs-faq details{border-bottom:1px solid var(--line)}.cs-faq summary{padding:1rem 0;font-weight:800;cursor:pointer}.cs-faq details p{margin:0 0 1rem}.cs-related{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}.cs-related a{padding:.55rem .8rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.86rem;font-weight:750}.cs-foot{padding:2rem 0;background:#101726;color:#d9e1ec}.cs-foot__inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.cs-foot a{text-decoration:none}.cs-foot span{font-size:.84rem;color:#aeb8c7}
body[data-family=media]{--soft:#11131a;--paper:#1b1e28;--ink:#f6f2ff;--muted:#aaa9bb;--line:#303543;--accent:#ff5c8a;--accent2:#4ee0c4;background:var(--soft)}body[data-family=media] .cs-service,body[data-family=media] .cs-guide{background:#161821}body[data-family=media] .cs-field input,body[data-family=media] .cs-field select,body[data-family=media] .cs-field textarea{background:#11131a;color:#fff}body[data-family=media] .cs-stage{background:radial-gradient(circle at 20% 20%,#262a37,#11131a)}body[data-family=media] .cs-metric,body[data-family=media] .cs-output{background:#12151d}
body[data-family=design]{--soft:#fff9ef;--paper:#fffdf8;--ink:#2c2340;--muted:#71667f;--line:#eadfce;--accent:#e24e34;--accent2:#246bce}body[data-family=design] .cs-panel{border-radius:6px;box-shadow:8px 8px 0 #2c2340}body[data-family=design] .cs-eyebrow,body[data-family=design] .cs-btn,body[data-family=design] .cs-field input,body[data-family=design] .cs-field select,body[data-family=design] .cs-field textarea{border-radius:4px}body[data-family=design] .cs-hero h1{font-family:Georgia,serif;font-weight:500;letter-spacing:-.04em}
body[data-family=focus]{--soft:#eef8f3;--paper:#fbfffd;--ink:#17382e;--muted:#557267;--line:#cce0d7;--accent:#166b50;--accent2:#e49a24}body[data-family=focus] .cs-tool{grid-template-columns:1fr}body[data-family=focus] .cs-panel{box-shadow:none;border-radius:32px}body[data-family=focus] .cs-hero{text-align:center}body[data-family=focus] .cs-hero p{margin-inline:auto}body[data-family=focus] .cs-private{justify-content:center}
@media(max-width:860px){.cs-tool,.cs-guide__grid{grid-template-columns:1fr}.cs-stage{min-height:330px}.cs-hero h1{max-width:760px}.cs-panel{min-width:0}}
@media(max-width:580px){.cs-wrap{width:min(100% - 1.2rem,1160px)}.cs-service__inner{min-height:62px}.cs-brand small{display:none}.cs-brand img{width:112px}.cs-hero{padding-top:2rem}.cs-hero h1{font-size:2.55rem}.cs-fields{grid-template-columns:1fr}.cs-field--full{grid-column:auto}.cs-metrics{grid-template-columns:1fr}.cs-panel{padding:1rem;border-radius:18px}.cs-tool{gap:.75rem}.cs-stage{min-height:270px}.cs-foot__inner{display:grid}.cs-clock{font-size:4rem}}
@media print{.cs-service,.cs-crumbs,.cs-hero,.cs-panel:first-child,.cs-guide,.cs-foot{display:none!important}.cs-main,.cs-tool,.cs-panel{padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;background:#fff!important}.cs-stage{border:0!important;min-height:0!important;background:#fff!important}}