.workspace .category-tabs{grid-column:1/-1;display:flex;gap:8px;overflow:auto;padding-bottom:2px}.category-tabs button{display:flex;gap:8px;align-items:center;white-space:nowrap;border:1px solid #aca99f;background:transparent;color:#5f5e5a;padding:9px 12px;font:700 10px ui-monospace,monospace;text-transform:uppercase;cursor:pointer}.category-tabs button span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:#dedad0;font-size:9px}.category-tabs button:hover,.category-tabs button.active{background:var(--ink);border-color:var(--ink);color:var(--acid)}.category-tabs button.active span{background:var(--acid);color:var(--ink)}
.tool-list{max-height:740px;overflow:auto}.tool-group h3{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;margin:0;padding:10px 13px;background:#dedad0;border-bottom:1px solid #aaa79e;color:#4f4e4a;font:800 9px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em}.tool-group h3 i{width:7px;height:7px;border-radius:50%;background:var(--violet)}.tool-group h3 span{margin-left:auto;color:#777}.tool-group[data-group="domain"] h3 i{background:var(--pink)}.tool-group[data-group="web"] h3 i{background:#ffb338}.tool-group[data-group="developer"] h3 i{background:#54cfff}.tool-group[data-group="image"] h3 i{background:var(--acid)}.tool-group+.tool-group{border-top:2px solid var(--ink)}
#port-field,#record-field,#util-field{margin-top:24px}
select{width:100%;background:#1c1d23;color:#fff;border:1px solid #41434b;padding:12px;font:13px ui-monospace,monospace}
.result .line>span:last-child{min-width:0;overflow-wrap:anywhere}
.muted{color:#666873}
@media(max-width:800px){.workspace .category-tabs{margin-bottom:-8px}.tool-list{display:block;max-height:520px;overflow:auto}.tool-group{display:grid;grid-template-columns:1fr 1fr}.tool-group h3{grid-column:1/-1}.tool-group .tool{border-right:0}.tool-group .tool:nth-child(even){border-right:1px solid #aaa79e}}
.image-studio{font-family:ui-monospace,monospace}.drop-zone{display:grid;gap:8px;text-align:center;padding:28px;border:1px dashed #686a73;background:#18191e;cursor:pointer}.drop-zone:hover,.drop-zone.dragging{border-color:var(--acid);background:#20251a}.drop-zone b{color:var(--acid);font-size:14px}.drop-zone small,.image-focus{color:#777985}.drop-zone input{position:absolute;opacity:0;pointer-events:none}.image-focus{text-align:center;font-size:11px}.image-preview{display:grid;place-items:center;margin:20px 0;background:repeating-conic-gradient(#222 0 25%,#2c2d33 0 50%) 50%/18px 18px;min-height:180px;max-height:420px;overflow:auto}.image-preview canvas{display:block;max-width:100%;max-height:400px;object-fit:contain}.image-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.image-stats span{padding:9px;border:1px solid #303139;color:#777985;font-size:9px}.image-stats b{display:block;color:#eee;font-size:11px;margin-bottom:4px}.palette{display:flex;gap:8px;margin:15px 0;overflow:auto}.palette span{display:flex;align-items:center;gap:6px;color:#a8a9b0;font-size:9px}.palette i{display:block;width:28px;height:28px;border-radius:50%;background:var(--swatch);border:1px solid #555}.image-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.image-controls label{margin:0}.image-controls input,.image-controls select{width:100%;margin-top:7px;background:#1c1d23;color:white;border:1px solid #41434b;padding:9px}.image-controls input[type=range]{padding:0}.image-controls output{float:right;color:var(--acid)}.image-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.image-actions button{border:1px solid #464851;background:#222329;color:white;padding:10px 12px;cursor:pointer}.image-actions button:hover{border-color:var(--acid)}.image-actions .download-image{margin-left:auto;background:var(--acid);color:#111;border-color:var(--acid);font-weight:900}@media(max-width:650px){.image-stats{grid-template-columns:1fr 1fr}.image-controls{grid-template-columns:1fr 1fr}.image-actions .download-image{width:100%;margin-left:0}}
@media(max-width:480px){.tool-group{grid-template-columns:1fr}.tool-group .tool:nth-child(even){border-right:0}}
.tool-group[data-group="data"] h3 i{background:#ff7657}.tool-group[data-group="crypto"] h3 i{background:#ffd84c}.tool-group[data-group="api"] h3 i{background:#6ee7ff}
.data-studio{font-family:ui-monospace,monospace}.data-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.data-toolbar label{flex:1;min-width:130px;margin:0}.data-toolbar select,.data-toolbar input{width:100%;margin-top:6px;background:#1c1d23;color:#fff;border:1px solid #41434b;padding:9px}.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.data-grid.single{grid-template-columns:1fr}.data-grid label{margin:0}.data-area{width:100%;min-height:210px;resize:vertical;margin-top:7px;padding:13px;background:#18191e;color:#e5e6e9;border:1px solid #3c3e46;font:12px/1.6 ui-monospace,monospace;tab-size:2}.data-area:focus{outline:1px solid var(--acid);border-color:var(--acid)}.data-run{margin-top:12px;border:0;background:var(--acid);color:#111;padding:11px 18px;font-weight:900;cursor:pointer}.data-output{margin-top:16px;padding:14px;border:1px solid #303139;overflow:auto}.data-output pre{white-space:pre-wrap;margin:0}.data-output table{width:100%;border-collapse:collapse;font-size:10px}.data-output th,.data-output td{padding:8px;border:1px solid #34363e;text-align:left;white-space:nowrap}.data-output th{color:var(--acid)}.diff-add{color:#9fea63}.diff-remove{color:#ff7fac}.markdown-preview{font-family:system-ui,sans-serif;line-height:1.6;color:#e7e7e8}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3{color:#fff}.markdown-preview code{font-family:ui-monospace,monospace;background:#292b31;padding:2px 5px}.match{background:#4b5d1d;color:var(--acid);padding:1px 2px}@media(max-width:650px){.data-grid{grid-template-columns:1fr}}
.crypto-studio{font-family:ui-monospace,monospace}.crypto-studio .data-output{overflow-wrap:anywhere}.crypto-note{color:#83858e;font-size:10px;line-height:1.5}.secret-output{font-size:16px;color:var(--acid);letter-spacing:.04em}.qr-preview{display:grid;place-items:center;min-height:200px;background:#fff;margin-top:14px}.qr-preview img{width:min(100%,384px);height:auto}.file-pick{display:grid;gap:7px;padding:18px;border:1px dashed #555861;cursor:pointer;color:var(--acid)}.file-pick input{color:#aaa}.query-row{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid #303139}.query-row b{color:var(--pink)}
.api-studio{font-family:ui-monospace,monospace}.api-studio .data-area{min-height:125px}.api-log{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}.api-log p{margin:0;padding:8px;border-left:2px solid #52545d;background:#1b1c21}.api-log .sent{border-color:var(--pink)}.api-log .received{border-color:var(--acid)}.api-status{display:flex;gap:10px;align-items:center;margin-bottom:10px}.api-status b{color:var(--acid);font-size:18px}.operation{display:grid;grid-template-columns:65px 1fr 1fr;gap:8px;padding:8px;border-bottom:1px solid #34363e}.operation b{color:var(--pink)}
.tool-group[data-group="frontend"] h3 i{background:#c084fc}.front-studio{font-family:ui-monospace,monospace}.front-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.front-controls.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.front-controls label{margin:0}.front-controls input,.front-controls select{width:100%;margin-top:7px;background:#1c1d23;color:#fff;border:1px solid #41434b;padding:9px}.front-controls input[type=color]{height:42px;padding:3px}.front-preview{display:grid;place-items:center;min-height:190px;margin:16px 0;border:1px solid #3c3e46;overflow:hidden}.front-code{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--acid)}.contrast-sample{padding:32px;text-align:center;font:900 28px/1.2 system-ui,sans-serif}.score-card{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.score-card span{padding:12px;border:1px solid #34363e;text-align:center}.score-card b{display:block;color:var(--acid);font-size:18px}.pass{color:#9fea63}.fail{color:#ff7fac}.favicon-canvas{width:192px;height:192px;border-radius:24%}.easing-track{position:relative;width:85%;height:8px;background:#34363e;border-radius:8px}.easing-dot{position:absolute;left:0;top:50%;width:28px;height:28px;translate:-50% -50%;border-radius:50%;background:var(--acid);animation:ease-demo 1.6s infinite alternate var(--ease)}@keyframes ease-demo{to{left:100%}}.layout-preview{display:flex;gap:12px;align-items:stretch;padding:18px;min-height:220px;background:#15161b}.layout-preview.grid{display:grid}.layout-item{display:grid;place-items:center;min-width:52px;min-height:52px;padding:12px;background:#c084fc;color:#17121e;font-weight:900;border:1px solid #e9d5ff}.front-run{margin-top:12px;border:0;background:var(--acid);color:#111;padding:11px 18px;font-weight:900;cursor:pointer}@media(max-width:650px){.front-controls,.front-controls.cols-3,.score-card{grid-template-columns:1fr}}
.media-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.media-palette button{display:grid;gap:5px;padding:8px;background:#202127;color:#fff;border:1px solid #3b3d45;cursor:pointer}.media-palette i{height:58px;background:var(--swatch)}.media-palette small{color:#858791}.media-studio #media-work{margin-top:16px}#svg-preview svg{max-width:100%;max-height:250px}.media-studio code{overflow-wrap:anywhere}@media(max-width:650px){.media-palette{grid-template-columns:repeat(2,1fr)}}
.tool-group[data-group="productivity"] h3 i{background:#f59e0b}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.choice-grid label{margin:0;padding:10px;border:1px solid #3b3d45}.prod-studio input,.prod-studio select,.seo-studio input{width:100%;margin-top:7px;background:#1c1d23;color:#fff;border:1px solid #41434b;padding:9px}@media(max-width:650px){.choice-grid{grid-template-columns:1fr 1fr}}
.tool-group[data-group="infra"] h3 i{background:#22d3ee}.infra-studio input,.infra-studio select{width:100%;margin-top:7px;background:#1c1d23;color:#fff;border:1px solid #41434b;padding:9px}
.tool-group[data-group="a11y"] h3 i{background:#34d399}.a11y-studio input,.a11y-studio select{width:100%;margin-top:7px;background:#1c1d23;color:#fff;border:1px solid #41434b;padding:9px}.a11y-warn{color:#fbbf24}.focus-demo{padding:14px 20px;background:#c084fc;color:#17121e;border:0;font-weight:900}.focus-demo:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}