:root{--suite-accent:#4f46e5;--suite-soft:#eef2ff;--suite-line:#c7d2fe}body{margin:0;background:#f6f8fc;color:#17213c;font:16px/1.6 system-ui,-apple-system,sans-serif}.suite-main{max-width:1080px;margin:0 auto;padding:32px 22px 50px;width:100%;box-sizing:border-box}.suite-breadcrumb{font-size:13px;color:#596783;margin-bottom:15px}.suite-breadcrumb a{color:var(--suite-accent);text-decoration:underline}.suite-hero{position:relative;padding:27px 32px;margin-bottom:25px;border:1px solid var(--suite-line);border-radius:24px;background:linear-gradient(125deg,#fff,var(--suite-soft));overflow:hidden}.suite-hero h1{position:relative;font-size:clamp(26px,4vw,38px);font-weight:800;line-height:1.25;margin:7px 0 10px;max-width:90%;letter-spacing:-1px}.suite-hero p{position:relative;max-width:740px;color:#455573;margin:0;font-size:15px}.suite-category{font-size:11px;letter-spacing:1.2px;font-weight:800;color:var(--suite-accent);text-transform:uppercase}.suite-sketch{position:absolute;right:20px;top:3px;width:180px;height:180px;opacity:.07;color:var(--suite-accent);pointer-events:none}.suite-card{background:white;border:1px solid #dce3ef;border-radius:22px;padding:27px;margin:22px 0;box-shadow:0 8px 25px #26395c06}.suite-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.suite-field{min-width:0}.suite-field label{display:block;font-size:13px;font-weight:750;margin-bottom:7px;color:#354564}.suite-field input:not([type=checkbox]),.suite-field textarea,.suite-field select,.suite-output{box-sizing:border-box;width:100%;border:1px solid #bdc9dc;border-radius:12px;background:#fff;padding:12px 14px;font:inherit;color:#17213c;min-width:0}.suite-field textarea,.suite-output{font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical}.suite-field input[type=checkbox]{width:19px;height:19px;accent-color:var(--suite-accent)}.suite-wide{grid-column:1/-1}.suite-help{font-size:12px;color:#64718b;margin:6px 0 0}.suite-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.suite-actions button,.suite-button{border:1px solid #b8c4d8;border-radius:11px;background:#f8fafc;padding:11px 19px;font:700 14px/1.4 system-ui;cursor:pointer;color:#263955}.suite-actions .suite-primary{background:var(--suite-accent);border-color:var(--suite-accent);color:#fff;box-shadow:0 4px 10px #182f6815}.suite-actions button:disabled,.suite-button:disabled{opacity:.5;cursor:default}.suite-output{min-height:175px;background:#f8fafc}.suite-result-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:15px}.suite-result-top label{font-weight:750;font-size:14px}.suite-status{font-size:14px;color:#374b6d;min-height:24px;margin:12px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.suite-about h2{font-size:20px;font-weight:750;margin:0 0 12px}.suite-about p,.suite-about li{font-size:14px;color:#4d5e7a}.suite-about ul{padding-left:22px;list-style:disc}.suite-about a{color:var(--suite-accent);text-decoration:underline}.suite-markdown{width:100%;min-height:350px;border:1px solid #cbd5e1;border-radius:12px;margin:15px 0}.suite-field :focus-visible,.suite-button:focus-visible,.suite-actions button:focus-visible{outline:3px solid var(--suite-line);outline-offset:3px}.suite-output:focus-visible{outline:3px solid var(--suite-line);outline-offset:3px}.suite-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.suite-tool-link{display:block;padding:20px;border:1px solid #d8e1ef;background:#fff;border-radius:15px;text-decoration:none;color:#17213c}.suite-tool-link strong{display:block;margin-bottom:7px}.suite-tool-link span{font-size:13px;color:#5e6c86}.suite-note{padding:14px 18px;border-left:3px solid var(--suite-accent);background:var(--suite-soft);font-size:13px;color:#364560;margin:20px 0}.suite-tool-link:hover{border-color:var(--suite-accent)}@media(max-width:680px){.suite-main{padding:20px 14px}.suite-hero{padding:22px}.suite-card{padding:20px}.suite-form{grid-template-columns:1fr}.suite-tool-grid{grid-template-columns:1fr}.suite-sketch{right:-50px}.suite-hero h1{max-width:100%}.suite-result-top{align-items:flex-start}.suite-button{padding:9px 12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}

.suite-tool-link[hidden]{display:none}

.suite-image-preview{display:block;max-width:100%;max-height:500px;margin:16px auto;border:1px solid #cbd5e1;border-radius:12px}.suite-visual-stage{min-height:260px;display:flex;align-items:center;justify-content:center;padding:50px;background:linear-gradient(135deg,#e0e7ff,#fef3c7);border-radius:14px;overflow:auto;margin:16px 0}.suite-visual-sample{display:flex;align-items:center;justify-content:center;min-width:0;width:180px;min-height:80px;padding:24px;box-sizing:border-box;font-weight:750}.suite-grid-item{background:#4f46e5;color:white;padding:14px;text-align:center}.suite-swatches{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}.suite-swatch{background:#fff;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden;min-width:100px}.suite-swatch span{display:block;height:65px}.suite-swatch code{display:block;padding:8px;font-size:13px}.suite-timer-display{display:block;font:700 clamp(28px,6vw,58px)/1.5 ui-monospace,monospace;letter-spacing:-1px;text-align:center;margin:20px 0}.suite-laps{font:14px/1.7 ui-monospace,monospace;padding:20px;list-style:decimal}