*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f8fafc;--surface: #ffffff;--surface2: #f1f5f9;--border: rgba(0, 0, 0, .08);--purple: #7c3aed;--indigo: #4f46e5;--purple-lt: #6d28d9;--text: #0f172a;--muted: #64748b;--success: #059669;--error: #dc2626;--radius: 14px;--radius-sm: 8px;--shadow: 0 10px 30px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03);--glow: 0 0 30px rgba(124, 58, 237, .15)}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(124,58,237,.08) 0%,transparent 60%)}.header{border-bottom:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:#fffc;position:sticky;top:0;z-index:100}.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--text);text-decoration:none}.logo strong{color:var(--purple)}.badge{font-size:.75rem;font-weight:500;color:var(--success);background:#10b9811a;border:1px solid rgba(16,185,129,.2);border-radius:999px;padding:4px 12px}.nav-links{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.nav-link{display:flex;align-items:center;gap:6px;padding:8px 14px;color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;border-radius:var(--radius-sm);transition:color .2s,background .2s}.nav-link:hover{color:var(--text);background:var(--surface2)}.nav-link.active{color:var(--purple);background:#7c3aed1a}.hero{max-width:1200px;margin:0 auto;padding:56px 24px 32px;text-align:center}.hero h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:1.2;margin-bottom:12px}.gradient-text{background:linear-gradient(135deg,var(--purple),var(--indigo));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{color:var(--muted);font-size:1.05rem;max-width:520px;margin:0 auto}.tools-grid{max-width:1200px;margin:0 auto;padding:0 24px 64px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;gap:12px;box-shadow:0 4px 6px -1px #0000000d}.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--purple)}.tool-card-icon{font-size:2rem;margin-bottom:4px}.tool-card h3{font-size:1.1rem;font-weight:600;margin-bottom:4px}.tool-card p{color:var(--muted);font-size:.85rem;line-height:1.5}.page-container{max-width:900px;margin:0 auto;padding:32px 24px 64px}.page-header{margin-bottom:32px}.page-header h1{font-size:1.8rem;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}.page-header p{color:var(--muted);font-size:1rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);animation:fadeUp .35s ease}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.card-header{margin-bottom:24px}.card-header h2{font-size:1.35rem;font-weight:700;letter-spacing:-.03em;margin-bottom:6px}.card-header p{color:var(--muted);font-size:.9rem}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:40px 24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;background:var(--surface2);margin-bottom:16px}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--purple);background:#7c3aed0a;box-shadow:var(--glow)}.drop-icon{font-size:2.5rem;margin-bottom:10px}.drop-title{font-weight:600;font-size:1rem;margin-bottom:6px}.drop-sub{color:var(--muted);font-size:.875rem}.link{color:var(--purple);text-decoration:underline;cursor:pointer}.file-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.file-list:empty{display:none}.file-item{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:.875rem;animation:fadeUp .2s ease}.file-item .file-icon{font-size:1.2rem;flex-shrink:0}.file-item .file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item .file-size{color:var(--muted);font-size:.75rem;flex-shrink:0}.file-item .remove-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:2px 4px;border-radius:4px;transition:color .2s,background .2s}.file-item .remove-btn:hover{color:var(--error);background:#dc26261a}.hint{font-size:.8rem;color:var(--muted);margin-bottom:20px;text-align:center}.form-group{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;display:flex;flex-direction:column;gap:10px}.form-group label{font-size:.85rem;font-weight:600;color:var(--text)}.form-group input[type=text],.form-group input[type=number]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:.95rem;padding:10px 14px;outline:none;transition:border-color .2s,box-shadow .2s}.form-group input[type=text]:focus,.form-group input[type=number]:focus{border-color:var(--purple);box-shadow:0 0 0 3px #7c3aed1a}.field-hint{font-size:.78rem;color:var(--muted)}.field-hint code{background:#0000000d;border-radius:4px;padding:1px 5px;font-family:monospace;font-size:.8rem}.angle-group{display:flex;gap:10px;flex-wrap:wrap}.angle-option{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 18px;cursor:pointer;font-size:.9rem;font-weight:500;transition:border-color .2s,background .2s;flex:1;justify-content:center;min-width:90px}.angle-option input[type=radio]{accent-color:var(--purple)}.angle-option:has(input:checked){border-color:var(--purple);background:#7c3aed0d;color:var(--purple)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:.95rem;font-weight:600;border:none;border-radius:var(--radius-sm);padding:12px 28px;cursor:pointer;transition:opacity .2s,transform .15s,box-shadow .2s;width:100%}.btn-primary{background:linear-gradient(135deg,var(--purple),var(--indigo));color:#fff;box-shadow:0 4px 14px #7c3aed4d}.btn-primary:hover:not(:disabled){box-shadow:0 6px 20px #7c3aed66;transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn.loading{pointer-events:none}.btn.loading:after{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin-left:8px}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%) translateY(120%);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:12px 24px;font-size:.875rem;font-weight:500;color:var(--text);box-shadow:var(--shadow);z-index:999;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;opacity:0;white-space:nowrap}.toast.show{transform:translate(-50%) translateY(0);opacity:1}.toast.success{border-color:#10b98166;color:var(--success)}.toast.error{border-color:#dc262666;color:var(--error)}.footer{text-align:center;padding:24px;color:var(--muted);font-size:.8rem;border-top:1px solid var(--border)}@media(max-width:768px){.header-inner{flex-direction:column;height:auto;padding:16px 24px;gap:12px}.nav-links{flex-wrap:wrap;justify-content:center}.nav-link{padding:6px 10px;font-size:.8rem}.nav-link span{display:none}}@media(max-width:600px){.tools-grid{grid-template-columns:1fr;padding:0 16px 48px}.card{padding:20px}.hero{padding:32px 16px 24px}.page-container{padding:24px 16px 48px}.drop-zone{padding:30px 16px}.angle-group{flex-direction:column}.angle-option{min-width:auto}}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:8px 16px;z-index:100}.mobile-nav-items{display:flex;justify-content:space-around;list-style:none}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;color:var(--muted);text-decoration:none;font-size:.7rem;transition:color .2s}.mobile-nav-item.active{color:var(--purple)}.mobile-nav-item svg{width:20px;height:20px}@media(max-width:768px){.mobile-nav{display:block}body{padding-bottom:70px}}.tool-card h2{font-size:1.1rem;font-weight:600;margin-bottom:4px}.how-section{margin-top:48px}.how-inner{max-width:900px;margin:0 auto;padding:0 24px}.how-inner>h2,.faq-inner>h2,.internal-links>h2{font-size:1.4rem;font-weight:700;letter-spacing:-.03em;margin-bottom:24px;color:var(--text)}.how-steps{list-style:none;display:flex;flex-direction:column;gap:20px}.how-step{display:flex;align-items:flex-start;gap:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 2px 8px #00000008}.how-num{flex-shrink:0;width:36px;height:36px;background:linear-gradient(135deg,var(--purple),var(--indigo));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}.how-step h3{font-size:1rem;font-weight:600;margin-bottom:6px;color:var(--text)}.how-step p{font-size:.875rem;color:var(--muted);line-height:1.6}.faq-section{margin-top:48px;margin-bottom:16px}.faq-inner{max-width:900px;margin:0 auto;padding:0 24px}.faq-list{display:flex;flex-direction:column;gap:10px}.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .2s}.faq-item[open]{border-color:var(--purple)}.faq-q{font-size:.95rem;font-weight:600;color:var(--text);padding:16px 20px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none}.faq-q::-webkit-details-marker{display:none}.faq-q:after{content:"+";font-size:1.2rem;color:var(--muted);transition:transform .2s;flex-shrink:0;margin-left:12px}.faq-item[open] .faq-q:after{transform:rotate(45deg);color:var(--purple)}.faq-a{font-size:.875rem;color:var(--muted);line-height:1.7;padding:0 20px 16px}.internal-links{margin-top:48px;max-width:900px;margin-left:auto;margin-right:auto;padding:0 24px 64px}.internal-links-grid{display:flex;flex-wrap:wrap;gap:10px}.internal-link{display:inline-flex;align-items:center;padding:8px 18px;background:var(--surface);border:1px solid var(--border);border-radius:999px;font-size:.875rem;font-weight:500;color:var(--purple);text-decoration:none;transition:background .2s,border-color .2s,transform .15s}.internal-link:hover{background:#7c3aed0f;border-color:var(--purple);transform:translateY(-1px)}