.tool-hero{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;margin-bottom:1rem;}
.hero-text{flex:1;min-width:260px;}
.hero-text h1{font-size:40px;font-weight:700;line-height:1.2;margin-bottom:0;}
.hero-subtitle{font-size:18px;color:var(--text-muted);max-width:640px;margin-bottom:1rem;margin-top:0;}
@media (max-width:767px){.hero-text h1{font-size:clamp(1.75rem,5vw,2.5rem);}.hero-subtitle{font-size:clamp(1rem,3vw,1.125rem);}}
.g2p-tool{width:100%;max-width:900px;margin:0 auto 24px;}
.g2p-drop{position:relative;min-height:180px;padding:1.5rem 1rem;background:var(--surface-muted,#f8fafc);border:2px dashed var(--border,#e2e8f0);border-radius:20px;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .2s;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.g2p-drop:hover,.g2p-drop:focus-visible{border-color:var(--primary,#0ea5e9);outline:none;box-shadow:0 0 0 4px rgba(14,165,233,.12);}
.g2p-drop.g2p-dragover{border-color:var(--primary,#0ea5e9);background:rgba(14,165,233,.05);}
.g2p-file-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none;}
.g2p-drop-icon{width:56px;height:56px;margin-bottom:0.75rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5-5 5'/%3E%3Cpath d='m21 15-5 5'/%3E%3C/svg%3E") no-repeat center;background-size:100%;display:block;}
.g2p-drop:hover .g2p-drop-icon,.g2p-drop:focus-visible .g2p-drop-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5-5 5'/%3E%3Cpath d='m21 15-5 5'/%3E%3C/svg%3E");}
.g2p-drop-head{font-size:1.125rem;font-weight:600;color:var(--text-main,#1e293b);margin:0 0 0.25rem 0;}
.g2p-drop-note{font-size:0.875rem;color:var(--text-muted,#64748b);margin:0;}
.g2p-workspace{margin-top:1.25rem;padding:1.25rem;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
@media (min-width:768px){.g2p-workspace{padding:1.75rem;}}
.g2p-bar{display:flex;flex-direction:column;gap:1rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border,#e2e8f0);margin-bottom:1.25rem;}
@media (min-width:640px){.g2p-bar{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:1.25rem;}}
.g2p-mode-wrap{display:flex;flex-direction:column;gap:0.375rem;}
.g2p-mode-label,.g2p-frame-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted,#64748b);}
.g2p-select{min-height:44px;padding:0.5rem 2rem 0.5rem 0.75rem;font-size:0.9375rem;color:var(--text-main,#1e293b);background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:12px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;}
.g2p-select:focus{border-color:var(--primary,#0ea5e9);outline:none;box-shadow:0 0 0 3px rgba(14,165,233,.2);}
.g2p-frame-row{display:flex;flex-direction:column;gap:0.375rem;min-width:0;}
.g2p-range{width:100%;max-width:200px;height:6px;accent-color:var(--primary,#0ea5e9);cursor:pointer;}
.g2p-check-wrap{display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer;user-select:none;}
.g2p-checkbox{width:18px;height:18px;accent-color:var(--primary,#0ea5e9);cursor:pointer;}
.g2p-check-label{font-size:0.9375rem;color:var(--text-main,#1e293b);}
.g2p-actions{flex:1;min-width:0;}
@media (min-width:640px){.g2p-actions{flex:0 0 auto;}}
.g2p-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:48px;padding:0.75rem 1.5rem;font-size:0.9375rem;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;}
.g2p-btn:disabled{opacity:0.55;cursor:not-allowed;}
.g2p-btn-dl{background:var(--accent,#10b981);color:#fff;}
.g2p-btn-dl:hover:not(:disabled){background:#059669;}
.g2p-btn-dl:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(16,185,129,.35);}
.g2p-previews{display:flex;flex-direction:column;gap:1.5rem;}
@media (min-width:640px){.g2p-previews{flex-direction:row;align-items:flex-start;gap:2rem;}}
.g2p-panel{flex:1;min-width:0;}
.g2p-panel-label{display:block;font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted,#64748b);margin-bottom:0.5rem;}
.g2p-panel-img-wrap{aspect-ratio:16/10;max-height:280px;background:var(--surface-muted,#f1f5f9);border-radius:14px;overflow:hidden;border:1px solid var(--border,#e2e8f0);display:flex;align-items:center;justify-content:center;}
.g2p-panel-canvas-wrap{background:repeating-conic-gradient(var(--surface-muted,#f1f5f9) 0% 25%,#fff 0% 50%) 50%/12px 12px;}
.g2p-panel-img{max-width:100%;max-height:280px;width:auto;height:auto;object-fit:contain;display:block;}
.g2p-panel-img-wrap canvas{max-width:100%;max-height:280px;width:auto;height:auto;display:block;border-radius:14px;}
.g2p-meta{font-size:0.8125rem;color:var(--text-muted,#64748b);margin:0.5rem 0 0 0;line-height:1.4;}