.tool-page{padding:64px 0 96px}.tool-page__inner{max-width:620px;margin:0 auto}.tool-page__header{text-align:center;flex-direction:column;align-items:center;gap:10px;margin-bottom:36px;display:flex}.tool-page__icon{border-radius:var(--radius-lg);background-color:var(--color-primary-light);width:56px;height:56px;color:var(--color-primary);justify-content:center;align-items:center;margin-bottom:4px;display:inline-flex}.tool-page__header h1{letter-spacing:-.02em;font-size:28px;font-weight:800}.tool-page__header p{color:var(--color-text-muted);max-width:440px;font-size:15px;line-height:1.6}.icon-btn{border-radius:var(--radius-sm);border:1px solid var(--color-border);background-color:var(--color-surface);width:38px;height:38px;color:var(--color-text-muted);cursor:pointer;transition:border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.icon-btn:active{transform:scale(.93)}.icon-btn--success{border-color:var(--color-success);color:var(--color-success)}.length-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.length-row label{color:var(--color-text);font-size:14px;font-weight:600}.length-row__value{border-radius:var(--radius-full);background-color:var(--color-primary-light);min-width:34px;height:26px;color:var(--color-primary);justify-content:center;align-items:center;padding:0 8px;font-size:13px;font-weight:700;display:inline-flex}.length-slider{border-radius:var(--radius-full);appearance:none;background-color:var(--color-border);cursor:pointer;outline:none;width:100%;height:6px;margin-bottom:22px}.length-slider::-webkit-slider-thumb{appearance:none;background-color:var(--color-primary);width:18px;height:18px;box-shadow:0 0 0 1px var(--color-border);cursor:pointer;border:3px solid #fff;border-radius:50%}.length-slider::-moz-range-thumb{background-color:var(--color-primary);width:18px;height:18px;box-shadow:0 0 0 1px var(--color-border);cursor:pointer;border:3px solid #fff;border-radius:50%}.checkbox-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.checkbox-card{border-radius:var(--radius-md);border:1px solid var(--color-border);cursor:pointer;transition:border-color var(--transition-fast), background-color var(--transition-fast);align-items:center;gap:10px;padding:12px 14px;display:flex;position:relative}.checkbox-card:hover{border-color:var(--color-primary)}.checkbox-card:has(input:checked){border-color:var(--color-primary);background-color:var(--color-primary-light)}.checkbox-card input{opacity:0;width:0;height:0;position:absolute}.checkbox-card__box{border:1.5px solid var(--color-border);color:#0000;width:20px;height:20px;transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.checkbox-card input:checked~.checkbox-card__box{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.checkbox-card__text{flex-direction:column;line-height:1.3;display:flex}.checkbox-card__label{color:var(--color-text);font-size:13.5px;font-weight:600}.checkbox-card__sample{color:var(--color-text-subtle);font-family:Courier New,monospace;font-size:11.5px}.tool-content{flex-direction:column;gap:48px;margin-top:64px;display:flex}.content-section h2{letter-spacing:-.01em;margin-bottom:14px;font-size:21px;font-weight:800}.content-section p{color:var(--color-text-muted);font-size:15px;line-height:1.75}.content-list{flex-direction:column;gap:12px;display:flex}.content-list li{color:var(--color-text-muted);align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.65;display:flex}.content-list__icon{background-color:var(--color-primary-light);width:20px;height:20px;color:var(--color-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;display:inline-flex}.steps-list{flex-direction:column;gap:18px;display:flex}.steps-list li{align-items:flex-start;gap:14px;display:flex}.steps-list__number{background-color:var(--color-primary);width:26px;height:26px;color:var(--color-text-on-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:inline-flex}.steps-list__title{color:var(--color-text);margin-bottom:2px;font-size:14.5px;font-weight:700;display:block}.steps-list__desc{color:var(--color-text-muted);font-size:14px;line-height:1.6;display:block}.form-field{flex-direction:column;gap:6px;display:flex}.form-field label{color:var(--color-text);font-size:13.5px;font-weight:600}.form-input,.form-select{border-radius:var(--radius-sm);border:1px solid var(--color-border);background-color:var(--color-surface);height:42px;color:var(--color-text);transition:border-color var(--transition-fast);padding:0 14px;font-family:inherit;font-size:14px}.form-input:focus,.form-select:focus{border-color:var(--color-primary);outline:none}.form-textarea{border-radius:var(--radius-sm);border:1px solid var(--color-border);background-color:var(--color-surface);min-height:100px;color:var(--color-text);resize:vertical;transition:border-color var(--transition-fast);padding:12px 14px;font-family:inherit;font-size:14px}.form-textarea:focus{border-color:var(--color-primary);outline:none}.form-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;display:grid}.form-checkbox-row{color:var(--color-text);align-items:center;gap:8px;font-size:13.5px;font-weight:600;display:flex}.color-field{align-items:center;gap:10px;display:flex}.color-field input[type=color]{border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:0 0;width:38px;height:38px;padding:0}.segmented{border:1px solid var(--color-border);border-radius:var(--radius-sm);display:flex;overflow:hidden}.segmented button{background-color:var(--color-surface);height:38px;color:var(--color-text-muted);cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast);border:none;flex:1;font-size:13px;font-weight:700}.segmented button+button{border-left:1px solid var(--color-border)}.segmented button.is-active{background-color:var(--color-primary);color:var(--color-text-on-primary)}.tool-hint{color:var(--color-text-subtle);font-size:12.5px;line-height:1.5}@media (max-width:480px){.checkbox-grid{grid-template-columns:1fr}}