:root{color-scheme:light;--color-background: #f4f6f8;--color-surface: #ffffff;--color-surface-raised: #ffffff;--color-surface-hover: #f8fafc;--color-surface-muted: #eef1f5;--color-text: #151a21;--color-text-secondary: #53606d;--color-text-muted: #87919d;--color-text-inverse: #ffffff;--color-border: #d7dde5;--color-border-strong: #c4ccd6;--color-border-light: #e8ecf0;--color-primary: #315bd6;--color-primary-dark: #2447ad;--color-primary-light: #9fb5f2;--color-primary-wash: #edf2ff;--color-accent: #d96a4f;--color-accent-dark: #b84f38;--color-accent-light: #efb2a2;--color-accent-wash: #fff1ed;--color-secondary: #318b70;--color-secondary-dark: #246b55;--color-secondary-light: #b9dfd1;--color-secondary-wash: #eaf7f1;--color-danger: #c94d4d;--color-danger-wash: #fff0f0;--color-success: #2e8561;--color-success-wash: #eaf7f0;--color-warning: #a8741a;--color-warning-wash: #fff7e5;--color-info: #3468a8;--color-info-wash: #edf4ff;--font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-serif: var(--font-sans);--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-2xs: var(--space-1);--space-xs: var(--space-2);--space-sm: var(--space-3);--space-md: var(--space-4);--space-lg: var(--space-6);--space-xl: var(--space-8);--space-2xl: var(--space-12);--space-3xl: var(--space-16);--radius-xs: 6px;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgb(21 26 33 / 4%);--shadow-sm: 0 3px 10px rgb(21 26 33 / 6%);--shadow-md: 0 8px 24px rgb(21 26 33 / 8%);--shadow-lg: 0 16px 42px rgb(21 26 33 / 11%);--card-hover-shadow: 0 8px 22px rgb(21 26 33 / 10%);--transition-fast: .14s ease;--transition-normal: .22s ease;--transition-slow: .32s ease;--sidebar-width: 232px;--color-ink: var(--color-text);--color-ink-light: var(--color-text-secondary);--color-ink-muted: var(--color-text-muted);--color-paper: var(--color-surface);--color-paper-warm: var(--color-surface-muted);--color-line: var(--color-border);--color-line-light: var(--color-border-light);--color-blue: var(--color-primary);--color-blue-light: var(--color-primary-light);--color-blue-pale: var(--color-primary-wash);--color-coral: var(--color-accent);--color-coral-light: var(--color-accent-light);--color-coral-pale: var(--color-accent-wash);--color-green: var(--color-secondary);--color-green-light: var(--color-secondary-light);--color-green-pale: var(--color-secondary-wash)}*,*:before,*:after{box-sizing:border-box}html{min-width:320px;background:var(--color-background);scroll-behavior:smooth}body{min-width:320px;min-height:100vh;margin:0;background:var(--color-background);color:var(--color-text);font-family:var(--font-sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input,select,textarea{color:inherit;font:inherit}button{border:0;cursor:pointer}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}img,svg,video,canvas{display:block;max-width:100%}img{height:auto}input::placeholder,textarea::placeholder{color:var(--color-text-muted);opacity:1}::selection{background:var(--color-primary-light);color:var(--color-text)}:focus-visible{outline:3px solid rgb(49 91 214 / 28%);outline-offset:2px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--radius-full);background:var(--color-border-strong);background-clip:padding-box}.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--color-primary);color:var(--color-text-inverse);font-size:13px;font-weight:700;line-height:1;white-space:nowrap;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}.btn:hover:not(:disabled){background:var(--color-primary-dark);box-shadow:var(--shadow-xs)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.48}.btn-sm{min-height:34px;padding:0 11px;font-size:12px}.btn-lg{min-height:46px;padding:0 17px;font-size:14px}.btn-block{width:100%}.btn-secondary{border-color:var(--color-border);background:var(--color-surface);color:var(--color-text)}.btn-secondary:hover:not(:disabled){border-color:var(--color-primary-light);background:var(--color-primary-wash);color:var(--color-primary-dark)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--color-surface-muted);color:var(--color-text);box-shadow:none}.btn-danger{background:var(--color-danger)}.btn-danger:hover:not(:disabled){background:#a93b3b}.btn-success{background:var(--color-success)}.btn-success:hover:not(:disabled){background:var(--color-secondary-dark)}.card{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-xs)}.card-hover{transition:border-color var(--transition-normal),box-shadow var(--transition-normal),transform var(--transition-normal)}.card-hover:hover{border-color:var(--color-border-strong);box-shadow:var(--card-hover-shadow);transform:translateY(-2px)}.eyebrow{display:inline-flex;align-items:center;margin-bottom:8px;color:var(--color-primary-dark);font-size:11px;font-weight:760;letter-spacing:.09em;line-height:1.2;text-transform:uppercase}.section-heading{display:grid;gap:5px;margin-bottom:18px}.section-heading h2{margin:0;color:var(--color-text);font-size:22px;font-weight:740;letter-spacing:-.035em}.section-heading p{max-width:660px;margin:0;color:var(--color-text-secondary);font-size:13px}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:0 0 22px}.page-header h1{margin:0;color:var(--color-text);font-size:clamp(26px,4vw,36px);font-weight:760;letter-spacing:-.055em;line-height:1.1}.page-header p{max-width:680px;margin:9px 0 0;color:var(--color-text-secondary);font-size:14px}.breadcrumb{display:flex;align-items:center;gap:8px;min-height:32px;margin-bottom:14px;color:var(--color-text-muted);font-size:12px}.breadcrumb button{display:inline-flex;align-items:center;gap:5px;padding:0;background:transparent;color:var(--color-text-secondary);font-size:inherit;font-weight:650}.breadcrumb button:hover{color:var(--color-primary-dark)}.breadcrumb .back-arrow{transform:rotate(180deg)}.badge{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 9px;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface-muted);color:var(--color-text-secondary);font-size:11px;font-weight:700;white-space:nowrap}.badge-primary{border-color:var(--color-primary-light);background:var(--color-primary-wash);color:var(--color-primary-dark)}.badge-accent{border-color:var(--color-accent-light);background:var(--color-accent-wash);color:var(--color-accent-dark)}.badge-secondary{border-color:var(--color-secondary-light);background:var(--color-secondary-wash);color:var(--color-secondary-dark)}.badge-dot,.status-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:currentColor}.field,.select-field,.range-field{display:grid;gap:7px;min-width:0;color:var(--color-text-secondary);font-size:12px;font-weight:650}.field-input-wrap{position:relative;display:flex;align-items:center}.field input,.select-wrap select{width:100%;height:40px;border:1px solid var(--color-border);border-radius:var(--radius-sm);outline:none;background:var(--color-surface);color:var(--color-text);font-size:14px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.field input{padding:0 40px 0 11px}.field input:hover,.select-wrap select:hover{border-color:var(--color-border-strong)}.field input:focus,.select-wrap select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #315bd621}.field-input-wrap em{position:absolute;right:11px;color:var(--color-text-muted);font-size:11px;font-style:normal;font-weight:700;pointer-events:none}.select-wrap{position:relative;display:block}.select-wrap select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 34px 0 11px}.select-wrap svg{position:absolute;top:50%;right:10px;color:var(--color-text-muted);pointer-events:none;transform:translateY(-50%)}.color-field{display:grid;gap:7px;color:var(--color-text-secondary);font-size:12px;font-weight:650}.color-field input{width:100%;height:40px;padding:4px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer}.checkbox{display:inline-flex;align-items:center;gap:8px;width:fit-content;color:var(--color-text-secondary);font-size:12px;font-weight:600;cursor:pointer}.checkbox input{position:absolute;width:1px;height:1px;opacity:0}.checkbox-box{display:grid;width:18px;height:18px;place-items:center;border:1px solid var(--color-border-strong);border-radius:5px;background:var(--color-surface);color:transparent;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.checkbox input:checked+.checkbox-box{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-text-inverse)}.checkbox input:focus-visible+.checkbox-box{outline:3px solid rgb(49 91 214 / 22%);outline-offset:2px}.segmented-control{display:flex;width:fit-content;max-width:100%;padding:3px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-muted)}.segmented-control button{min-height:32px;padding:0 13px;border-radius:6px;background:transparent;color:var(--color-text-secondary);font-size:12px;font-weight:700;white-space:nowrap;transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast)}.segmented-control button:hover{color:var(--color-text)}.segmented-control button.selected,.segmented-control button[aria-pressed=true]{background:var(--color-surface);color:var(--color-primary-dark);box-shadow:var(--shadow-xs)}.status-message{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;margin:14px 0 0;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:12px;line-height:1.45}.status-success{border-color:var(--color-secondary-light);background:var(--color-success-wash);color:var(--color-secondary-dark)}.status-error{border-color:#efb6b6;background:var(--color-danger-wash);color:#9b3333}.status-info{border-color:#b9cce7;background:var(--color-info-wash);color:var(--color-info)}.status-warning{border-color:#ead39b;background:var(--color-warning-wash);color:#866013}.notice{padding:11px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-muted);color:var(--color-text-secondary);font-size:12px}.metric{display:grid;min-width:0;gap:3px;padding:11px 12px;border:1px solid var(--color-border-light);border-radius:var(--radius-sm);background:var(--color-surface-muted)}.metric-label{overflow:hidden;color:var(--color-text-muted);font-size:10px;font-weight:700;letter-spacing:.03em;text-overflow:ellipsis;white-space:nowrap}.metric strong{overflow:hidden;color:var(--color-text);font-size:15px;font-weight:720;text-overflow:ellipsis;white-space:nowrap}.metric-detail{color:var(--color-text-secondary);font-size:11px}.data-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.key-value{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0;padding:10px 0;border-bottom:1px solid var(--color-border-light);font-size:12px}.key-value span{color:var(--color-text-secondary)}.key-value strong{overflow:hidden;color:var(--color-text);font-family:var(--font-mono);font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.connection-pill{display:inline-flex;align-items:center;gap:6px;width:fit-content;min-height:24px;padding:0 8px;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface-muted);color:var(--color-text-muted);font-size:10px;font-weight:700;white-space:nowrap}.connection-pill>span{width:6px;height:6px;border-radius:50%;background:currentColor}.connection-pill.connected{border-color:var(--color-secondary-light);background:var(--color-secondary-wash);color:var(--color-secondary-dark)}.spinner{display:inline-block;width:15px;height:15px;flex:0 0 15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}.spinner-dark{color:var(--color-text)}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{display:grid;justify-items:center;gap:9px;padding:28px 18px;color:var(--color-text-secondary);font-size:13px;text-align:center}.empty-state-icon{display:grid;width:52px;height:52px;place-items:center;border:1px solid var(--color-border);border-radius:13px;background:var(--color-surface-muted);color:var(--color-text-muted)}.empty-state strong{color:var(--color-text);font-size:14px}.empty-state.large{min-height:176px;place-content:center}.drop-zone{position:relative;display:grid;justify-items:center;gap:7px;min-height:150px;padding:24px 18px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface-muted);color:var(--color-text-secondary);text-align:center;cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast),color var(--transition-fast)}.drop-zone:hover,.drop-zone.is-dragging{border-color:var(--color-primary);background:var(--color-primary-wash);color:var(--color-primary-dark)}.drop-zone.has-file{border-style:solid;border-color:var(--color-secondary-light);background:var(--color-secondary-wash)}.drop-zone-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.drop-zone-icon{display:grid;width:42px;height:42px;place-items:center;border:1px solid currentColor;border-radius:11px;color:var(--color-primary)}.drop-zone.has-file .drop-zone-icon{color:var(--color-secondary)}.drop-zone strong{max-width:100%;overflow:hidden;color:var(--color-text);font-size:14px;font-weight:720;text-overflow:ellipsis;white-space:nowrap}.drop-zone>span:not(.drop-zone-icon){color:var(--color-text-muted);font-size:12px}.tip-strip{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-muted);color:var(--color-text-secondary);font-size:12px}.tip-strip>svg{flex:0 0 auto;color:var(--color-primary)}.tip-target{margin-left:auto;color:var(--color-text);font-family:var(--font-mono);font-size:11px}.tool-info{display:grid;gap:8px;padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted);color:var(--color-text-secondary);font-size:12px}.tool-info-title{display:flex;align-items:center;gap:7px;padding-bottom:3px;color:var(--color-text);font-weight:720}.tool-info-title svg{color:var(--color-secondary)}.tool-info-row{display:flex;align-items:flex-start;gap:7px}.tool-info-row svg{flex:0 0 auto;margin-top:2px;color:var(--color-secondary)}@media(max-width:760px){.page-header{padding-bottom:18px}.page-header h1{font-size:28px}.data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:440px){.page-header{display:grid;gap:10px}.page-header h1{font-size:25px}.data-grid{grid-template-columns:1fr}.segmented-control{width:100%}.segmented-control button{flex:1;padding:0 8px}}.app-shell{min-height:100vh}.header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--color-border);background:#fffffff5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.header-inner{display:flex;align-items:center;width:min(100%,1440px);height:64px;padding:0 28px;margin:0 auto}.logo{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;padding:0;background:transparent;color:var(--color-text);font-size:17px;font-weight:760;letter-spacing:-.035em}.logo-mark{display:grid;width:28px;height:28px;place-items:center;border-radius:8px;background:var(--color-primary);color:var(--color-text-inverse);font-size:15px;font-weight:800;letter-spacing:-.04em}.nav{display:flex;align-items:stretch;gap:4px;height:100%;margin-left:42px}.nav-item{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 13px;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-size:13px;font-weight:620;transition:color var(--transition-fast),background var(--transition-fast)}.nav-item:hover{background:var(--color-surface-muted);color:var(--color-text)}.nav-item.active{background:var(--color-primary-wash);color:var(--color-primary-dark)}.header-right{display:flex;align-items:center;gap:10px;margin-left:auto}.language-select{min-width:92px;height:36px;padding:0 29px 0 11px;border:1px solid var(--color-border);border-radius:var(--radius-sm);outline:none;background-color:var(--color-surface);color:var(--color-text-secondary);font-size:13px;font-weight:600;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.language-select:hover{border-color:var(--color-border-strong)}.language-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #315bd624}.mobile-menu-toggle{display:none;width:36px;height:36px;place-items:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary)}.mobile-nav{display:none}.workspace{display:flex;align-items:stretch;min-height:calc(100vh - 64px)}.sidebar{position:sticky;top:64px;width:var(--sidebar-width);height:calc(100vh - 64px);flex:0 0 var(--sidebar-width);overflow-y:auto;padding:22px 14px 28px;border-right:1px solid var(--color-border);background:var(--color-surface)}.sidebar-suite{display:flex;align-items:center;gap:11px;min-height:54px;padding:9px 10px;margin-bottom:14px;border:1px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-surface-muted)}.sidebar-suite-icon{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border-radius:9px;background:var(--color-primary-wash);color:var(--color-primary-dark)}.suite-accent-orange .sidebar-suite-icon{background:var(--color-accent-wash);color:var(--color-accent-dark)}.suite-accent-mint .sidebar-suite-icon{background:var(--color-secondary-wash);color:var(--color-secondary-dark)}.suite-accent-violet .sidebar-suite-icon{background:var(--color-primary-wash);color:var(--color-primary-dark)}.sidebar-suite-copy{display:grid;min-width:0;gap:1px}.sidebar-suite-copy strong{overflow:hidden;color:var(--color-text);font-size:13px;font-weight:720;text-overflow:ellipsis;white-space:nowrap}.sidebar-suite-copy span{color:var(--color-text-muted);font-size:11px}.sidebar-overview{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;padding:0 10px;margin-bottom:21px;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-size:13px;font-weight:650;text-align:left;transition:color var(--transition-fast),background var(--transition-fast)}.sidebar-overview:hover,.sidebar-overview[aria-current=page]{background:var(--color-primary-wash);color:var(--color-primary-dark)}.sidebar-overview-icon{display:grid;place-items:center;color:currentColor}.sidebar-arrow{margin-left:auto;opacity:.7;transform:translate(0);transition:transform var(--transition-fast)}.sidebar-overview:hover .sidebar-arrow{transform:translate(2px)}.sidebar-label{display:flex;align-items:center;justify-content:space-between;padding:0 10px 8px;color:var(--color-text-muted);font-size:10px;font-weight:760;letter-spacing:.08em;text-transform:uppercase}.sidebar-label span{color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0}.tool-nav{display:grid;gap:2px}.tool-nav-item{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:0 10px;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-size:12px;font-weight:570;text-align:left;transition:color var(--transition-fast),background var(--transition-fast)}.tool-nav-item:hover{background:var(--color-surface-muted);color:var(--color-text)}.tool-nav-item.active{background:var(--color-primary-wash);color:var(--color-primary-dark);font-weight:700}.tool-nav-item svg{flex:0 0 auto;opacity:.86}.main-content{min-width:0;width:100%;padding:0 28px}.main-content.has-sidebar{max-width:calc(100vw - var(--sidebar-width))}@media(max-width:1190px){.header-inner{padding:0 22px}.nav{margin-left:24px}.main-content{padding:0 22px}}@media(max-width:980px){.workspace{display:block}.sidebar{position:relative;top:auto;width:100%;height:auto;min-height:0;padding:12px 18px 10px;border-right:0;border-bottom:1px solid var(--color-border)}.sidebar-suite{display:inline-flex;min-width:210px;margin:0 9px 10px 0}.sidebar-overview{display:inline-flex;width:auto;min-width:130px;margin:0 0 10px;vertical-align:top}.sidebar-label{display:none}.tool-nav{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px}.tool-nav-item{width:auto;min-width:max-content;padding:0 11px;border:1px solid var(--color-border-light);background:var(--color-surface)}.tool-nav-item.active{border-color:var(--color-primary-light);background:var(--color-primary-wash)}.main-content.has-sidebar{max-width:none}}@media(max-width:760px){.header-inner{height:60px;padding:0 16px}.nav{display:none}.mobile-menu-toggle{display:grid}.mobile-nav{position:absolute;top:60px;right:12px;left:12px;display:grid;gap:4px;padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity var(--transition-fast),transform var(--transition-fast)}.mobile-nav.open{opacity:1;pointer-events:auto;transform:translateY(0)}.mobile-nav .nav-item{justify-content:flex-start;width:100%;min-height:40px}.main-content{padding:0 16px}.sidebar{padding-right:16px;padding-left:16px}}@media(max-width:440px){.header-inner{padding:0 12px}.logo{gap:7px;font-size:16px}.logo-mark{width:26px;height:26px}.language-select{min-width:82px;padding-left:9px}.sidebar,.main-content{padding-right:12px;padding-left:12px}}.home-page,.overview-page,.tool-page{width:min(100%,1180px);margin:0 auto}.home-page{padding:52px 0 80px}.home-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--color-border)}.home-hero h1,.overview-hero h1{margin:0;color:var(--color-text);font-size:clamp(34px,5vw,52px);font-weight:780;letter-spacing:-.07em;line-height:1}.home-tool-count,.overview-hero>div>span{color:var(--color-text-muted);font-family:var(--font-mono);font-size:11px;white-space:nowrap}.home-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 0 28px}.search-field{display:flex;align-items:center;gap:9px;width:min(100%,340px);height:42px;padding:0 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-muted);box-shadow:var(--shadow-xs);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-field:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #315bd621}.search-field input{min-width:0;flex:1;height:100%;padding:0;border:0;outline:0;background:transparent;color:var(--color-text);font-size:13px}.search-field input::-webkit-search-cancel-button{cursor:pointer}.suite-filters{display:flex;align-items:center;gap:6px;max-width:100%;overflow-x:auto;scrollbar-width:none}.suite-filters::-webkit-scrollbar{display:none}.suite-filter{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary);font-size:12px;font-weight:680;white-space:nowrap;transition:border-color var(--transition-fast),background var(--transition-fast),color var(--transition-fast)}.suite-filter:hover{border-color:var(--color-border-strong);background:var(--color-surface-muted);color:var(--color-text)}.suite-filter.active{border-color:var(--color-primary-light);background:var(--color-primary-wash);color:var(--color-primary-dark)}.home-tool-section{min-width:0}.home-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.home-section-head h2{margin:0;color:var(--color-text);font-size:18px;font-weight:740;letter-spacing:-.035em}.home-section-head>span{color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px}.featured-grid,.tool-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.tool-card{display:grid;gap:10px;min-width:0;padding:9px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-xs);color:var(--color-text);text-align:left;transition:border-color var(--transition-normal),box-shadow var(--transition-normal),transform var(--transition-normal)}.tool-card:hover{border-color:var(--color-border-strong);box-shadow:var(--card-hover-shadow);transform:translateY(-2px)}.tool-card:focus-visible{outline:3px solid rgb(49 91 214 / 25%);outline-offset:2px}.tool-card-topline{position:relative;display:block;overflow:hidden;aspect-ratio:1.35;border-radius:9px;background:var(--color-surface-muted)}.tool-card-cover{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.tool-card:hover .tool-card-cover{transform:scale(1.025)}.tool-card-icon{position:absolute;right:8px;bottom:8px;display:grid;width:32px;height:32px;place-items:center;border:1px solid rgb(255 255 255 / 72%);border-radius:9px;background:#ffffffe0;color:var(--color-text);box-shadow:var(--shadow-xs)}.tool-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:0 2px 1px}.tool-card-title{overflow:hidden;color:var(--color-text);font-size:13px;font-weight:700;line-height:1.28;text-overflow:ellipsis;white-space:nowrap}.tool-card-arrow{display:grid;flex:0 0 auto;width:24px;height:24px;place-items:center;border-radius:7px;background:var(--color-surface-muted);color:var(--color-text-secondary);transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}.tool-card:hover .tool-card-arrow{background:var(--color-primary-wash);color:var(--color-primary-dark);transform:translate(2px)}.home-empty{display:grid;justify-items:center;gap:9px;padding:62px 20px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-muted)}.home-empty strong{color:var(--color-text-secondary);font-size:13px}.overview-page{padding:48px 0 80px}.overview-hero{display:flex;align-items:flex-end;justify-content:space-between;min-height:100px;padding-bottom:24px;border-bottom:1px solid var(--color-border)}.overview-hero>div{display:grid;gap:9px}.overview-tools-section{padding-top:24px}.tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tool-page{padding:28px 0 80px}.tool-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:16px}.tool-main-card,.result-card,.device-frame{min-width:0;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-xs)}.tool-main-card{min-width:0;padding:18px}.tool-workspace>.tool-main-card:only-child{grid-column:1 / -1}.result-card{position:sticky;top:84px;padding:16px}.result-card-head{display:flex;align-items:center;gap:8px;min-height:26px;margin-bottom:14px;color:var(--color-text);font-size:13px}.result-card-head strong{overflow:hidden;font-weight:730;text-overflow:ellipsis;white-space:nowrap}.result-dot{display:grid;width:23px;height:23px;flex:0 0 23px;place-items:center;border-radius:7px;background:var(--color-success-wash);color:var(--color-success)}.audio-empty-result .result-dot,.utility-result-card .result-dot{background:var(--color-primary-wash);color:var(--color-primary-dark)}.result-format{min-height:21px;padding:3px 7px;margin-left:auto;border-radius:5px;background:var(--color-surface-muted);color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px;font-weight:700}.result-preview,.collage-result-preview{display:grid;min-height:164px;place-items:center;overflow:hidden;border:1px solid var(--color-border-light);border-radius:var(--radius-sm)}.result-preview img,.collage-result-preview img{max-width:100%;max-height:260px;object-fit:contain}.result-metrics{display:grid;gap:8px;margin:13px 0}.image-work-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(250px,.94fr);align-items:start;gap:17px;margin-top:17px}.image-preview-card{min-width:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.preview-card-head,.preview-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;color:var(--color-text-secondary);font-size:11px}.preview-card-head{border-bottom:1px solid var(--color-border-light);font-weight:700}.preview-card-head span:last-child,.preview-card-foot span:last-child{color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px;font-weight:500}.preview-card-foot{border-top:1px solid var(--color-border-light);font-family:var(--font-mono);font-weight:700}.checkerboard{background-color:#f8fafc;background-image:linear-gradient(45deg,#eef1f5 25%,transparent 25%),linear-gradient(-45deg,#eef1f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef1f5 75%),linear-gradient(-45deg,transparent 75%,#eef1f5 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.preview-canvas{display:grid;min-height:300px;max-height:430px;place-items:center;padding:16px;overflow:hidden}.preview-canvas img{max-width:100%;max-height:390px;object-fit:contain}.preview-empty{display:grid;justify-items:center;gap:9px;padding:30px 18px;color:var(--color-text-muted);font-size:12px;text-align:center}.image-controls,.utility-controls{display:grid;gap:11px}.control-section{display:grid;gap:12px;padding:13px;border:1px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-surface-muted)}.fields-row,.crop-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.crop-fields{grid-template-columns:repeat(4,minmax(0,1fr))}.format-flow{display:flex;align-items:center;justify-content:center;gap:9px;padding-top:2px;color:var(--color-text-muted)}.format-chip{display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:30px;padding:0 9px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text-secondary);font-family:var(--font-mono);font-size:11px;font-weight:700}.format-chip.active{border-color:var(--color-primary-light);background:var(--color-primary-wash);color:var(--color-primary-dark)}.format-chip.muted{color:var(--color-text-muted)}.metadata-list{display:grid;gap:10px;color:var(--color-text-secondary);font-size:12px;font-weight:620}.metadata-list span{display:flex;align-items:center;gap:8px}.metadata-list svg{color:var(--color-success)}.result-processing{display:flex;align-items:center;justify-content:center;gap:9px;min-height:120px;color:var(--color-text-secondary);font-size:12px}.result-processing.result-card{position:sticky}.utility-workspace{grid-template-columns:minmax(0,1fr) 300px}.color-picker-stage{display:grid;min-height:350px;margin-top:17px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted);place-items:center}.color-picker-canvas{width:100%;max-height:520px;cursor:crosshair;object-fit:contain}.color-swatch-large{min-height:110px;border:1px solid rgb(21 26 33 / 12%);border-radius:var(--radius-md)}.palette-history{display:grid;gap:8px;margin-top:16px;color:var(--color-text-muted);font-size:11px;font-weight:700}.palette-history>div{display:flex;flex-wrap:wrap;gap:6px}.palette-history button{width:25px;height:25px;border:1px solid rgb(21 26 33 / 14%);border-radius:6px}.multi-image-picker{display:grid;justify-items:center;gap:8px;padding:25px 18px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface-muted);color:var(--color-text-muted);text-align:center}.multi-image-picker>svg{color:var(--color-primary)}.multi-image-picker strong{color:var(--color-text);font-size:14px}.multi-image-picker>span{font-size:11px}.file-chip-list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:100%;padding-top:5px}.file-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:26px;padding:0 7px 0 9px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text-secondary);font-size:10px}.file-chip:first-letter{color:var(--color-text-muted)}.file-chip button{display:grid;width:18px;height:18px;place-items:center;border-radius:4px;background:var(--color-surface-muted);color:var(--color-text-secondary);font-size:15px;line-height:1}.base64-preview{display:grid;min-height:260px;margin-top:17px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);place-items:center}.base64-preview img{max-height:420px;object-fit:contain}.encoded-text{display:block;width:100%;min-height:150px;resize:vertical;padding:10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);outline:none;background:var(--color-surface-muted);color:var(--color-text-secondary);font-family:var(--font-mono);font-size:10px;line-height:1.55}.encoded-text:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #315bd621}.utility-button-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.audio-tool-page .tool-workspace{grid-template-columns:minmax(0,1fr) 300px}.audio-player{width:100%;min-height:38px}.audio-empty-body{display:grid;min-height:150px;justify-items:center;align-content:center;gap:9px;color:var(--color-text-muted);font-size:12px;text-align:center}.audio-empty-body svg{color:var(--color-primary)}.audio-meta-grid{grid-template-columns:1fr 1fr}.audio-cover-result{display:flex;align-items:center;gap:10px;padding-top:14px;margin-top:14px;border-top:1px solid var(--color-border-light)}.audio-cover-result img{width:46px;height:46px;flex:0 0 46px;border-radius:7px;object-fit:cover}.audio-cover-result>div{display:grid;min-width:0;gap:2px}.audio-cover-result span{color:var(--color-text-muted);font-size:10px}.audio-cover-result strong{overflow:hidden;color:var(--color-text-secondary);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.text-button{width:fit-content;padding:0;background:transparent;color:var(--color-primary-dark);font-size:11px;font-weight:700}.text-button:hover{text-decoration:underline}.audio-cutter-workspace{grid-template-columns:minmax(0,1fr) 300px}.audio-source-meta{display:grid;gap:2px;padding:16px 0 11px}.audio-source-meta strong{overflow:hidden;color:var(--color-text);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.audio-source-meta span{color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px}.waveform-canvas{width:100%;height:auto;min-height:130px;border:1px solid var(--color-border);border-radius:var(--radius-sm)}.audio-range-fields{display:grid;gap:14px;padding-top:16px}.range-field{grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px}.range-field span{color:var(--color-text-secondary)}.range-field input{width:100%;accent-color:var(--color-primary)}.range-field output{color:var(--color-text);font-family:var(--font-mono);font-size:11px;text-align:right}.audio-cut-actions{display:flex;justify-content:flex-end;padding-top:16px}.device-tool-body{width:min(100%,1040px);margin:0 auto}.device-frame{padding:18px}.media-preview{position:relative;display:grid;min-height:340px;overflow:hidden;border-radius:var(--radius-md);place-items:center}.dark-grid{background-color:#17212c;background-image:linear-gradient(rgb(255 255 255 / 4%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 4%) 1px,transparent 1px);background-size:28px 28px}.media-preview video{width:100%;height:100%;min-height:340px;object-fit:contain}.media-preview video.mirrored{transform:scaleX(-1)}.media-preview .empty-state{color:#ffffffad}.media-preview .empty-state strong{color:#fff}.media-preview .empty-state-icon{border-color:#ffffff2e;background:#ffffff14;color:#ffffffa3}.live-indicator{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;min-height:25px;padding:0 8px;border:1px solid rgb(255 255 255 / 14%);border-radius:var(--radius-full);background:#0f141bb8;color:#ffffffb8;font-size:10px;font-weight:700}.live-dot{width:6px;height:6px;border-radius:50%;background:#ffffff73}.live-dot.on{background:#56d394;box-shadow:0 0 0 3px #56d3942e}.media-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;padding-top:17px}.control-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.meter-stage{position:relative;display:grid;min-height:290px;overflow:hidden;border-radius:var(--radius-md);background:#17212c;place-items:center}.meter-grid{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;background-image:linear-gradient(rgb(255 255 255 / 5%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 5%) 1px,transparent 1px);background-size:32px 32px}.meter-orb{position:absolute;display:grid;width:118px;height:118px;place-items:center;border:1px solid rgb(159 181 242 / 55%);border-radius:50%;background:#315bd63d;color:#dce5ff;box-shadow:0 0 0 14px #315bd614,0 0 0 28px #315bd60d;transition:transform .1s linear}.meter-readout{position:relative;display:grid;justify-items:center;gap:2px;color:#fff}.meter-readout strong{font-family:var(--font-mono);font-size:34px;line-height:1}.meter-readout span{color:#ffffff9e;font-size:10px}.meter-bar{position:relative;height:10px;margin:15px 0 1px;overflow:hidden;border-radius:var(--radius-full);background:var(--color-surface-muted)}.meter-bar span{display:block;width:0;height:100%;border-radius:inherit;background:var(--color-secondary);transition:width 80ms linear}.meter-bar i{position:absolute;top:0;width:2px;height:100%;background:var(--color-accent);transform:translate(-1px)}.speaker-visual{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.speaker-side{display:grid;justify-items:center;gap:9px;padding:22px 10px 15px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted);color:var(--color-text-secondary);text-align:center;transition:border-color var(--transition-fast),background var(--transition-fast)}.speaker-side.playing{border-color:var(--color-primary-light);background:var(--color-primary-wash)}.speaker-side strong{color:var(--color-text);font-size:13px}.speaker-side>span:not(.speaker-ring){color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px}.speaker-ring,.sensor-emblem,.gamepad-emblem{display:grid;width:58px;height:58px;place-items:center;border:1px solid var(--color-primary-light);border-radius:50%;background:var(--color-primary-wash);color:var(--color-primary-dark)}.speaker-side.playing .speaker-ring{border-color:var(--color-secondary-light);background:var(--color-secondary-wash);color:var(--color-secondary-dark)}.speaker-frame>.range-field{margin-top:18px}.keyboard-status{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--color-border-light)}.keyboard-status>div:first-child{min-width:0;margin-right:auto}.keyboard-status>div:first-child strong{display:block;overflow:hidden;color:var(--color-text);font-family:var(--font-mono);font-size:15px;text-overflow:ellipsis;white-space:nowrap}.key-counter{display:inline-flex;align-items:center;gap:6px;color:var(--color-text-muted);font-size:11px;white-space:nowrap}.keyboard{display:grid;gap:7px;min-width:0;padding:16px;margin-top:16px;overflow-x:auto;border-radius:var(--radius-md);background:#202a36}.keyboard-row{display:flex;gap:6px;min-width:760px}.key-cap{display:flex;align-items:center;justify-content:space-between;min-width:39px;min-height:39px;flex:1 1 39px;padding:0 8px;border:1px solid rgb(255 255 255 / 12%);border-radius:6px;background:#354252;color:#ffffffd6;font-family:var(--font-mono);font-size:10px;transition:background 80ms ease,color 80ms ease,border-color 80ms ease,transform 80ms ease}.key-cap.is-pressed{border-color:#8aa7ff;background:var(--color-primary);color:#fff;transform:translateY(2px)}.key-cap svg{color:#fff}.key-esc{flex-basis:59px}.key-wide{flex-grow:1.8}.key-enter{flex-grow:1.55}.key-shift{flex-grow:2.2}.key-space{flex-grow:5}.mouse-head{display:flex;justify-content:flex-end;min-height:36px}.mouse-coordinates{display:flex;align-items:baseline;gap:6px;color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px}.mouse-coordinates strong{min-width:34px;color:var(--color-text);font-size:13px;font-weight:650}.mouse-pad{position:relative;min-height:290px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:#f8fafc;background-image:linear-gradient(#e4e9ef 1px,transparent 1px),linear-gradient(90deg,#e4e9ef 1px,transparent 1px);background-size:32px 32px;cursor:crosshair}.mouse-crosshair{position:absolute;width:17px;height:17px;border:2px solid var(--color-primary);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}.mouse-crosshair:before,.mouse-crosshair:after{position:absolute;content:"";background:var(--color-primary)}.mouse-crosshair:before{top:6px;left:-7px;width:27px;height:1px}.mouse-crosshair:after{top:-7px;left:6px;width:1px;height:27px}.mouse-event-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:12px}.mouse-event{display:grid;gap:3px;min-width:0;padding:10px;border:1px solid var(--color-border-light);border-radius:var(--radius-sm);background:var(--color-surface-muted)}.mouse-event span{overflow:hidden;color:var(--color-text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.mouse-event strong{color:var(--color-text-secondary);font-family:var(--font-mono);font-size:11px}.mouse-event.is-down{border-color:var(--color-primary-light);background:var(--color-primary-wash)}.mouse-event.is-down strong{color:var(--color-primary-dark)}.event-readout{display:flex;align-items:center;gap:7px;min-height:34px;padding-top:12px;color:var(--color-text-secondary);font-size:12px}.pixel-frame{overflow:hidden}.pixel-stage{position:relative;display:grid;min-height:330px;place-items:center}.pixel-stage-content{display:grid;justify-items:center;gap:7px;color:#fff;text-align:center;text-shadow:0 1px 4px rgb(0 0 0 / 32%)}.pixel-stage-content strong{font-size:18px}.pixel-stage-content span{font-family:var(--font-mono);font-size:11px}.pixel-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px}.swatch-list{display:flex;flex-wrap:wrap;gap:7px}.swatch-list button{width:27px;height:27px;border:2px solid var(--color-surface);border-radius:7px;box-shadow:0 0 0 1px var(--color-border)}.swatch-list button.selected{box-shadow:0 0 0 2px var(--color-primary)}.pixel-overlay-controls{position:absolute;right:22px;bottom:18px;left:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#ffffffc7;font-size:11px}.pixel-overlay-controls button{padding:7px 10px;border:1px solid rgb(255 255 255 / 38%);border-radius:6px;background:#0000003d;color:#fff;font-size:11px}.pixel-frame.is-testing{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:1fr auto;width:auto;height:auto;padding:0;border:0;border-radius:0;background:#000}.pixel-frame.is-testing .pixel-stage{min-height:0}.pixel-frame.is-testing .pixel-controls{padding:14px 20px;background:#111820}.refresh-visual{position:relative;display:grid;min-height:300px;place-items:center;overflow:hidden;border-radius:var(--radius-md);background:#17212c}.refresh-orbit{position:absolute;top:50%;left:50%;width:200px;height:200px;border:1px solid rgb(159 181 242 / 50%);border-radius:50%;transform:translate(-50%,-50%)}.refresh-orbit:before,.refresh-orbit:after,.refresh-orbit span{position:absolute;top:50%;left:50%;display:block;width:12px;height:12px;border-radius:50%;background:var(--color-primary-light);content:"";transform-origin:-75px 0}.refresh-orbit:before{transform:translate(-50%,-50%) rotate(0)}.refresh-orbit:after{transform:translate(-50%,-50%) rotate(120deg)}.refresh-orbit span:nth-child(1){transform:translate(-50%,-50%) rotate(240deg)}.refresh-orbit span:nth-child(2),.refresh-orbit span:nth-child(3){display:none}.refresh-orbit.spinning{animation:orbit-spin 1.1s linear infinite}@keyframes orbit-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.refresh-result{position:relative;display:grid;justify-items:center;gap:6px;color:#fff;text-align:center}.refresh-result strong{font-family:var(--font-mono);font-size:30px;line-height:1}.refresh-result strong small{margin-left:4px;color:#ffffffad;font-size:13px}.refresh-result span{color:#ffffffa3;font-size:11px}.refresh-explainer{display:flex;justify-content:center;padding-top:17px}.resolution-hero{display:flex;align-items:center;gap:28px;padding:12px 0 24px}.resolution-outline{display:grid;justify-items:center;gap:8px;width:220px;flex:0 0 220px}.resolution-screen{display:grid;width:220px;min-height:124px;place-items:center;border:8px solid #263444;border-radius:8px;background:var(--color-primary-wash);color:var(--color-primary-dark);text-align:center}.resolution-screen span{font-family:var(--font-mono);font-size:15px;font-weight:700}.resolution-screen small{color:var(--color-text-muted);font-size:10px}.resolution-stand{width:76px;height:10px;border-radius:4px 4px 2px 2px;background:#263444}.resolution-hero>div:last-child{display:grid;gap:5px}.resolution-hero>div:last-child strong{color:var(--color-text);font-family:var(--font-mono);font-size:18px}.resolution-hero p{margin:0;color:var(--color-text-secondary);font-size:12px}.gamepad-header,.sensor-header,.touch-head,.browser-info-banner{display:flex;align-items:center;gap:12px;min-width:0}.gamepad-emblem,.sensor-emblem{width:54px;height:54px;flex:0 0 54px}.gamepad-header>div:nth-child(2),.sensor-header>div:nth-child(2),.browser-info-banner>div{display:grid;min-width:0;gap:2px}.gamepad-header strong,.sensor-header strong,.browser-info-banner strong{color:var(--color-text);font-size:14px;font-weight:720}.gamepad-header p{max-width:590px;overflow:hidden;margin:0;color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.gamepad-header .connection-pill,.sensor-header .connection-pill{margin-left:auto}.gamepad-readout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.9fr);gap:22px;padding-top:22px}.button-matrix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.game-button{display:grid;justify-items:center;gap:4px;padding:10px 5px;border:1px solid var(--color-border);border-radius:7px;background:var(--color-surface-muted);color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px}.game-button strong{color:var(--color-text-secondary);font-size:11px}.game-button.active{border-color:var(--color-primary-light);background:var(--color-primary-wash);color:var(--color-primary-dark)}.game-button.active strong{color:var(--color-primary-dark)}.axes-list{display:grid;gap:13px}.axis-row{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:9px;color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px}.axis-row>div{position:relative;height:7px;border-radius:var(--radius-full);background:var(--color-surface-muted)}.axis-row>div:before{position:absolute;top:-3px;bottom:-3px;left:50%;width:1px;background:var(--color-border-strong);content:""}.axis-row i{position:absolute;top:50%;width:9px;height:9px;border:2px solid var(--color-primary);border-radius:50%;background:var(--color-surface);transform:translate(-50%,-50%)}.axis-row strong{color:var(--color-text-secondary);font-size:11px;text-align:right}.touch-head{justify-content:flex-end;min-height:30px}.touch-pad{position:relative;min-height:360px;margin-top:10px;overflow:hidden;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);background-color:#f8fafc;background-image:linear-gradient(#e6ebf0 1px,transparent 1px),linear-gradient(90deg,#e6ebf0 1px,transparent 1px);background-size:32px 32px;touch-action:none}.touch-point{position:absolute;display:grid;width:42px;height:42px;place-items:center;border:2px solid var(--color-primary);border-radius:50%;background:#315bd633;color:var(--color-primary-dark);transform:translate(-50%,-50%)}.touch-point i{font-family:var(--font-mono);font-size:11px;font-style:normal;font-weight:700}.touch-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding-top:13px}.browser-info-banner{padding-bottom:17px;border-bottom:1px solid var(--color-border-light)}.browser-info-icon{display:grid;width:48px;height:48px;flex:0 0 48px;place-items:center;border-radius:12px;background:var(--color-info-wash);color:var(--color-info)}.browser-data-list{padding-top:9px}.browser-data-row{display:grid;grid-template-columns:minmax(130px,.36fr) minmax(0,1fr);gap:18px;padding:12px 0;border-bottom:1px solid var(--color-border-light);font-size:12px}.browser-data-row span{color:var(--color-text-secondary)}.browser-data-row strong{overflow:hidden;color:var(--color-text);font-family:var(--font-mono);font-size:10px;font-weight:550;text-overflow:ellipsis;white-space:nowrap}.battery-gauge{display:grid;grid-template-columns:minmax(0,1fr) 58px;align-items:center;gap:15px;padding:24px 0 20px}.battery-gauge-track{height:15px;overflow:hidden;border-radius:var(--radius-full);background:var(--color-surface-muted)}.battery-gauge-track span{display:block;width:0;height:100%;border-radius:inherit;background:var(--color-secondary);transition:width var(--transition-normal)}.battery-gauge>strong{color:var(--color-text);font-family:var(--font-mono);font-size:17px;text-align:right}.sensor-actions{display:flex;justify-content:flex-end;padding-top:16px}.orientation-visual{display:grid;min-height:250px;padding:22px 0;place-items:center}.orientation-compass{position:relative;display:grid;width:166px;height:166px;place-items:center;border:1px solid var(--color-border-strong);border-radius:50%;background:var(--color-surface-muted);color:var(--color-text-muted)}.orientation-compass:before,.orientation-compass:after{position:absolute;background:var(--color-border);content:""}.orientation-compass:before{width:1px;height:100%}.orientation-compass:after{width:100%;height:1px}.orientation-compass svg,.orientation-compass span{position:relative}.orientation-compass span{margin-top:76px;color:var(--color-text);font-family:var(--font-mono);font-size:12px}.orientation-compass.is-active{border-color:var(--color-primary-light);background:var(--color-primary-wash);color:var(--color-primary)}.recording-result{display:grid;gap:12px;padding-top:17px;margin-top:17px;border-top:1px solid var(--color-border-light)}.recording-result-head{display:flex;align-items:center;gap:8px;color:var(--color-text-secondary);font-size:12px}.recording-result-head strong{color:var(--color-text)}.recording-result-head>span:last-child{margin-left:auto;color:var(--color-text-muted);font-family:var(--font-mono);font-size:10px}.recording-result audio,.recording-result video{width:100%;max-height:360px;border-radius:var(--radius-sm);background:#17212c}.recorder-video{overflow:hidden;border-radius:var(--radius-md);background:#17212c}.record-video-placeholder{position:relative;display:grid;min-height:330px;place-items:center}.record-video-placeholder video{width:100%;height:100%;min-height:330px;object-fit:contain}.record-video-placeholder .empty-state{color:#ffffffad}.record-video-placeholder .empty-state strong{color:#fff}.screen-placeholder{background:#17212c}.recording-chip{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;min-height:25px;padding:0 8px;border:1px solid rgb(255 255 255 / 16%);border-radius:var(--radius-full);background:#0f141bb8;color:#ffffffc7;font-size:10px;font-weight:700}.recorder-hero{display:flex;align-items:center;gap:11px;padding:18px 0 14px}.recorder-hero>div:nth-child(2){min-width:0}.recorder-hero strong{color:var(--color-text);font-size:14px;font-weight:720}.recorder-hero time{margin-left:auto;color:var(--color-text-muted);font-family:var(--font-mono);font-size:13px}.record-orb{display:grid;width:50px;height:50px;flex:0 0 50px;place-items:center;border:1px solid var(--color-border);border-radius:50%;background:var(--color-surface-muted);color:var(--color-text-secondary)}.record-orb.recording{border-color:#efb6b6;background:var(--color-danger-wash);color:var(--color-danger);animation:recorder-pulse 1.3s ease-in-out infinite}@keyframes recorder-pulse{50%{box-shadow:0 0 0 8px #c94d4d1a}}.recorder-hero.compact{padding-bottom:10px}.recorder-hero.compact .record-orb{width:38px;height:38px;flex-basis:38px}.recorder-actions{display:flex;justify-content:flex-end;gap:8px}.not-found{display:grid;justify-items:center;max-width:440px;padding:110px 20px;margin:0 auto;text-align:center}.not-found-icon{display:grid;width:64px;height:64px;margin-bottom:18px;place-items:center;border-radius:16px;background:var(--color-primary-wash);color:var(--color-primary)}.not-found h1{margin:0 0 22px;color:var(--color-text);font-size:30px;font-weight:760;letter-spacing:-.05em}@media(max-width:1190px){.home-page,.overview-page,.tool-page{width:100%}.featured-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:980px){.home-page,.overview-page,.tool-page{padding-top:34px}.home-page{padding-bottom:64px}.featured-grid,.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-workspace,.utility-workspace,.audio-tool-page .tool-workspace,.audio-cutter-workspace{grid-template-columns:minmax(0,1fr) 280px}.image-work-grid{grid-template-columns:1fr}.preview-canvas{min-height:260px}.gamepad-readout{grid-template-columns:1fr}.mouse-event-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.home-page,.overview-page,.tool-page{padding-top:26px;padding-bottom:54px}.home-hero{align-items:center}.home-hero h1,.overview-hero h1{font-size:35px}.home-toolbar{display:grid;align-items:stretch;padding:17px 0 22px}.search-field,.suite-filters{width:100%}.featured-grid,.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.tool-card{padding:8px}.tool-card-topline{aspect-ratio:1.25}.tool-card-title{font-size:12px}.tool-workspace,.utility-workspace,.audio-tool-page .tool-workspace,.audio-cutter-workspace{grid-template-columns:1fr}.tool-main-card,.result-card,.device-frame{padding:14px}.result-card,.result-processing.result-card{position:static}.result-card{order:initial}.image-work-grid{gap:13px;margin-top:13px}.preview-canvas{min-height:230px}.media-preview,.media-preview video{min-height:280px}.speaker-visual{grid-template-columns:1fr}.speaker-side{grid-template-columns:58px minmax(0,1fr) auto auto;align-items:center;justify-items:start;padding:10px;text-align:left}.speaker-side .speaker-ring{grid-row:span 2}.speaker-side>span:not(.speaker-ring){grid-column:2}.speaker-side .btn{grid-column:3 / span 2;grid-row:span 2}.keyboard-status{align-items:flex-start;flex-wrap:wrap}.keyboard-status>div:first-child{width:100%;flex-basis:100%}.keyboard{margin-right:-2px;margin-left:-2px}.mouse-pad{min-height:250px}.pixel-stage{min-height:270px}.resolution-hero{align-items:flex-start;gap:18px}.resolution-outline,.resolution-screen{width:172px;flex-basis:172px}.resolution-screen{min-height:100px;border-width:6px}.resolution-hero>div:last-child strong{font-size:15px}.touch-pad{min-height:290px}.record-video-placeholder,.record-video-placeholder video{min-height:260px}.browser-data-row{grid-template-columns:1fr;gap:4px}}@media(max-width:440px){.home-hero h1,.overview-hero h1{font-size:31px}.home-tool-count,.overview-hero>div>span{font-size:10px}.featured-grid,.tool-grid{gap:8px}.tool-card{gap:8px;padding:6px;border-radius:10px}.tool-card-topline{border-radius:7px}.tool-card-icon{right:5px;bottom:5px;width:27px;height:27px;border-radius:7px}.tool-card-title{font-size:11px}.tool-card-arrow{width:21px;height:21px}.tool-main-card,.result-card,.device-frame{padding:12px;border-radius:11px}.fields-row,.crop-fields,.utility-button-row,.audio-meta-grid{grid-template-columns:1fr}.format-flow{justify-content:flex-start}.data-grid,.touch-summary{grid-template-columns:1fr}.range-field{grid-template-columns:44px minmax(0,1fr) 42px;gap:7px}.resolution-hero{display:grid;justify-items:center}.resolution-outline,.resolution-screen{width:100%;max-width:240px;flex-basis:auto}.resolution-hero>div:last-child{justify-items:center;text-align:center}.mouse-event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pixel-controls{align-items:flex-start;flex-direction:column}.pixel-controls .btn{width:100%}.recorder-hero{gap:8px}.recorder-hero strong{font-size:12px}.recorder-actions{justify-content:stretch}.recorder-actions .btn{width:100%}}