:root{--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--bg-canvas:#f2f8f8;--bg-surface:#fffffff0;--bg-surface-solid:#fff;--bg-surface-elevated:#f8fafc;--bg-surface-hover:#f1f5f9;--bg-input:#f8fafc;--bg-modal-backdrop:#0f172a73;--sidebar-bg:#ffffffeb;--sidebar-border:#e5edef;--sidebar-active-bg:#047857;--sidebar-active-shadow:0 8px 20px -4px #04785761;--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--border-subtle:#e8eef2;--border-strong:#cbd5e1;--border-focus:#059669;--accent-primary:#059669;--accent-primary-dark:#047857;--accent-primary-soft:#ecfdf5;--accent-emerald:#10b981;--accent-emerald-soft:#10b9811f;--accent-blue:#0284c7;--accent-blue-bright:#0ea5e9;--accent-blue-soft:#e0f2fe;--accent-purple:#7c3aed;--accent-purple-bright:#8b5cf6;--accent-purple-soft:#f3e8ff;--accent-rose:#e11d48;--accent-rose-bright:#f43f5e;--accent-rose-soft:#fff1f2;--accent-gold:#d97706;--accent-gold-soft:#fef3c7;--accent-cobalt:#0284c7;--accent-cobalt-soft:#e0f2fe;--accent-violet:#7c3aed;--accent-violet-soft:#f3e8ff;--radius-xs:8px;--radius-sm:12px;--radius-md:16px;--radius-lg:22px;--radius-xl:26px;--radius-full:9999px;--shadow-card:0 4px 24px -4px #0f172a0a, 0 1px 2px #0f172a05;--shadow-card-hover:0 12px 32px -6px #0f172a14;--shadow-modal:0 24px 60px -12px #0f172a38;--ease-out:cubic-bezier(.16, 1, .3, 1)}*,:before,:after{box-sizing:border-box}html,body{font-family:var(--font-sans);background-color:var(--bg-canvas);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;margin:0;padding:0;overflow-x:hidden}#root{min-height:100vh;position:relative}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.bg-orbs-stage{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.bg-orb{filter:blur(80px);opacity:.85;border-radius:50%;position:absolute}.bg-orb-1{background:radial-gradient(circle,#2dd4bf6b 0%,#10b9811f 65%,#0000 100%);width:540px;height:540px;top:-120px;left:200px}.bg-orb-2{background:radial-gradient(circle,#38bdf840 0%,#a78bfa24 60%,#0000 100%);width:620px;height:620px;top:60px;right:-120px}.bg-orb-3{background:radial-gradient(circle,#34d3993d 0%,#2dd4bf14 65%,#0000 100%);width:500px;height:500px;bottom:-140px;left:280px}.bg-orb-4{background:radial-gradient(circle,#c084fc26 0%,#38bdf81a 65%,#0000 100%);width:420px;height:420px;top:42%;left:48%}.workspace-layout{z-index:1;min-height:100vh;display:flex;position:relative}.studio-sidebar{background:var(--sidebar-bg);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--sidebar-border);z-index:60;flex-direction:column;flex-shrink:0;width:292px;height:100vh;padding:1.35rem 1rem 1.15rem;display:flex;position:sticky;top:0}.sidebar-brand-box{align-items:center;gap:.85rem;padding:.25rem .4rem 1.35rem;display:flex}.sidebar-logo-img{object-fit:cover;border-radius:12px;flex-shrink:0;width:46px;height:46px;box-shadow:0 4px 12px #05966938}.sidebar-brand-title{color:#0f172a;letter-spacing:-.03em;margin:0;font-size:1.22rem;font-weight:800;line-height:1.15}.sidebar-brand-title span{color:#059669}.sidebar-mode-pill{color:#059669;letter-spacing:.05em;text-transform:uppercase;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:6px;align-items:center;gap:.3rem;margin-top:.28rem;padding:.16rem .55rem;font-size:.62rem;font-weight:800;display:inline-flex}.sidebar-nav-scroll{flex-direction:column;flex:1;gap:.38rem;padding-top:.25rem;display:flex;overflow-y:auto}.sidebar-nav-item{color:#334155;width:100%;font-family:var(--font-sans);cursor:pointer;transition:all .18s var(--ease-out);text-align:left;background:0 0;border:none;border-radius:14px;justify-content:space-between;align-items:center;gap:.6rem;padding:.8rem .9rem;font-size:.82rem;font-weight:600;display:flex}.sidebar-nav-item:hover{color:#0f172a;background:#f1f5f9}.sidebar-nav-item.active{background:var(--sidebar-active-bg);color:#fff;box-shadow:var(--sidebar-active-shadow);font-weight:700}.sidebar-nav-left{align-items:center;gap:.75rem;min-width:0;display:flex}.sidebar-nav-icon{color:#059669;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}.sidebar-nav-item.active .sidebar-nav-icon{color:#fff}.sidebar-nav-badge{border-radius:var(--radius-full);color:#1e293b;font-variant-numeric:tabular-nums;background:#f1f5f9;padding:.16rem .62rem;font-size:.73rem;font-weight:700}.sidebar-nav-item.active .sidebar-nav-badge{color:#fff;background:#ffffff38}.sidebar-footer-box{margin-top:auto;padding-top:1rem}.sidebar-bottom-btn{color:#e11d48;width:100%;font-family:var(--font-sans);cursor:pointer;background:#fff1f2;border:1px solid #fecdd3;border-radius:14px;justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1rem;font-size:.83rem;font-weight:700;transition:all .16s;display:flex}.sidebar-bottom-btn:hover{background:#ffe4e6;border-color:#fda4af}.workspace-main{flex-direction:column;flex:1;width:100%;min-width:0;max-width:1540px;margin:0 auto;padding:1.85rem 2.25rem 3.5rem;display:flex}.open-page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1.25rem;margin-bottom:1.65rem;display:flex}.open-page-title{color:#0f172a;letter-spacing:-.03em;margin:0;font-size:1.68rem;font-weight:800}.open-page-subtitle{color:#64748b;margin:.3rem 0 0;font-size:.88rem;font-weight:500}.open-header-pills{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.header-info-pill{border-radius:var(--radius-full);color:#334155;background:#ffffffe0;border:1px solid #e2e8f0;align-items:center;gap:.45rem;padding:.58rem 1.05rem;font-size:.8rem;font-weight:600;display:inline-flex;box-shadow:0 2px 6px #0f172a08}.header-action-pill{border-radius:var(--radius-full);color:#0f172a;font-family:var(--font-sans);cursor:pointer;background:#fff;border:1px solid #e2e8f0;align-items:center;gap:.45rem;padding:.58rem 1.15rem;font-size:.8rem;font-weight:700;transition:all .16s;display:inline-flex;box-shadow:0 2px 8px #0f172a0a}.header-action-pill:hover{border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 12px #0f172a12}.mobile-menu-trigger{display:none}.ringkasan-super-card{background:var(--bg-surface);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);border:1px solid #fffffff2;margin-bottom:1.4rem;padding:1.75rem 1.9rem 1.65rem}.ringkasan-top-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.35rem;display:flex}.ringkasan-heading{color:#0f172a;align-items:center;gap:.55rem;margin:0;font-size:1.12rem;font-weight:800;display:flex}.ringkasan-green-dot{background:#10b981;border-radius:50%;width:9px;height:9px;display:inline-block}.metric-filter-pills{border-radius:var(--radius-full);background:#f8fafc;border:1px solid #eef2f6;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.28rem;display:inline-flex}.metric-filter-btn{border-radius:var(--radius-full);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;align-items:center;gap:.38rem;padding:.42rem .88rem;font-size:.77rem;font-weight:700;transition:all .15s;display:inline-flex}.metric-filter-btn.active-all{color:#fff;background:#0f172a;box-shadow:0 2px 8px #0f172a33}.metric-filter-btn.active-metric{background:#fff;box-shadow:0 2px 8px #0f172a14}.ringkasan-kpi-row{grid-template-columns:repeat(5,1fr);gap:.85rem;margin-bottom:1.75rem;display:grid}@media (width<=1360px){.ringkasan-kpi-row{grid-template-columns:repeat(3,1fr)}}@media (width<=780px){.ringkasan-kpi-row{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}}.ringkasan-subcard{background:#f9fbfd;border:1px solid #edf2f7;border-radius:16px;padding:1.05rem 1.1rem;transition:transform .16s,box-shadow .16s}.ringkasan-subcard:hover{transform:translateY(-2px);box-shadow:0 6px 18px -4px #0f172a0d}.subcard-label{letter-spacing:.04em;text-transform:uppercase;margin-bottom:.45rem;font-size:.68rem;font-weight:800}.subcard-value{letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:.4rem;font-size:1.85rem;font-weight:800;line-height:1.15}.subcard-compare{font-size:.74rem;font-weight:600}.spline-legend-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:1.65rem;margin-top:.85rem;display:flex}.spline-legend-item{cursor:pointer;align-items:center;gap:.42rem;font-size:.78rem;font-weight:700;display:inline-flex}.spline-legend-dash{border-radius:4px;width:12px;height:3.5px;display:inline-block}.bottom-cards-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;display:grid}@media (width<=1120px){.bottom-cards-grid{grid-template-columns:1fr}}.feature-white-card{background:var(--bg-surface);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);border:1px solid #fffffff2;flex-direction:column;gap:1.1rem;padding:1.5rem 1.6rem;display:flex}.feature-card-head{justify-content:space-between;align-items:flex-start;gap:.85rem;display:flex}.feature-card-head-left{align-items:flex-start;gap:.85rem;display:flex}.feature-icon-box{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.15rem;display:flex}.feature-card-title{color:#0f172a;margin:0;font-size:1.02rem;font-weight:800;line-height:1.25}.feature-card-sub{color:#64748b;margin:.2rem 0 0;font-size:.76rem}.feature-count-pill{color:#059669;border-radius:var(--radius-full);white-space:nowrap;background:#ecfdf5;padding:.3rem .75rem;font-size:.75rem;font-weight:800}.module-stack{flex-direction:column;gap:1.25rem;display:flex}.panel-card{background:var(--bg-surface);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);border:1px solid #fffffff2;padding:1.5rem 1.65rem}.panel-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.15rem;display:flex}.panel-title{color:#0f172a;margin:0;font-size:1.08rem;font-weight:800}.panel-subtitle{color:#64748b;margin:.2rem 0 0;font-size:.79rem}.studio-feature-banner{background:var(--bg-surface);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);border:1px solid #fffffff2;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem;padding:1.45rem 1.65rem;display:flex}.eyebrow-pill{letter-spacing:.07em;text-transform:uppercase;border-radius:var(--radius-full);color:#059669;background:#ecfdf5;margin-bottom:.35rem;padding:.2rem .6rem;font-size:.65rem;font-weight:800;display:inline-block}.studio-feature-title{color:#0f172a;margin:0 0 .25rem;font-size:1.25rem;font-weight:800}.studio-feature-desc{color:#64748b;max-width:680px;margin:0;font-size:.84rem;line-height:1.5}.studio-feature-actions{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.bento-grid-2{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:1.25rem;display:grid}.donut-legend-item{background:#f8fafc;border:1px solid #edf2f7;border-radius:12px;justify-content:space-between;align-items:center;padding:.55rem .75rem;font-size:.82rem;display:flex}.metric-bar-list{flex-direction:column;gap:.85rem;display:flex}.metric-bar-item{flex-direction:column;gap:.35rem;display:flex}.metric-bar-top{color:#334155;justify-content:space-between;font-size:.8rem;font-weight:700;display:flex}.metric-bar-track{border-radius:var(--radius-full);background:#f1f5f9;height:8px;overflow:hidden}.metric-bar-fill{border-radius:var(--radius-full);height:100%;transition:width .45s var(--ease-out)}.btn-ui{font-family:var(--font-sans);cursor:pointer;transition:all .16s var(--ease-out);white-space:nowrap;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:.45rem;padding:.6rem 1.05rem;font-size:.81rem;font-weight:700;text-decoration:none;display:inline-flex}.btn-ui:disabled{opacity:.55;cursor:not-allowed}.btn-primary,.btn-emerald{color:#fff;background:#047857;box-shadow:0 4px 14px #04785747}.btn-primary:hover:not(:disabled),.btn-emerald:hover:not(:disabled){background:#059669;transform:translateY(-1px)}.btn-secondary{color:#1e293b;background:#fff;border-color:#e2e8f0;box-shadow:0 1px 3px #0f172a08}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#059669}.btn-danger{color:#e11d48;background:#fff1f2;border-color:#fecdd3}.btn-danger:hover:not(:disabled){color:#fff;background:#e11d48}.btn-sm{border-radius:9px;padding:.4rem .75rem;font-size:.75rem}.form-grid-2{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;display:grid}.form-grid-3{grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:.9rem;display:grid}.form-field{flex-direction:column;gap:.38rem;display:flex}.field-label{color:#334155;font-size:.75rem;font-weight:700}.field-input,.field-select,.field-textarea{color:#0f172a;width:100%;font-family:var(--font-sans);background:#f8fafc;border:1px solid #cbd5e1;border-radius:11px;padding:.62rem .85rem;font-size:.84rem;transition:border-color .15s,box-shadow .15s}.field-input:focus,.field-select:focus,.field-textarea:focus{background:#fff;border-color:#059669;outline:none;box-shadow:0 0 0 3px #0596691f}.field-textarea{resize:vertical;min-height:92px;line-height:1.5}.data-table-wrapper{border-radius:var(--radius-lg);background:var(--bg-surface);width:100%;box-shadow:var(--shadow-card);border:1px solid #e8eef2;overflow-x:auto}.data-table{border-collapse:collapse;text-align:left;width:100%;font-size:.82rem}.data-table th{color:#64748b;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;background:#f8fafc;border-bottom:1px solid #e8eef2;padding:.85rem 1rem;font-size:.69rem;font-weight:800}.data-table td{color:#334155;vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:.85rem 1rem}.data-table tbody tr:hover{background:#f8fafc}.badge{border-radius:var(--radius-full);white-space:nowrap;align-items:center;gap:.3rem;padding:.22rem .62rem;font-size:.69rem;font-weight:700;display:inline-flex}.badge-pro{color:#d97706;background:#fef3c7;border:1px solid #fde68a}.badge-lifetime{color:#059669;background:#ecfdf5;border:1px solid #a7f3d0}.badge-expired{color:#e11d48;background:#fff1f2;border:1px solid #fecdd3}.badge-neutral{color:#475569;background:#f1f5f9;border:1px solid #e2e8f0}.badge-info{color:#0284c7;background:#e0f2fe;border:1px solid #bae6fd}.category-pills-bar{flex-wrap:wrap;gap:.5rem;display:flex}.category-pill-btn{border-radius:var(--radius-full);color:#334155;font-family:var(--font-sans);cursor:pointer;background:#fff;border:1px solid #e2e8f0;align-items:center;gap:.45rem;padding:.48rem .95rem;font-size:.78rem;font-weight:700;transition:all .15s;display:inline-flex}.category-pill-btn:hover{color:#059669;border-color:#059669}.category-pill-btn.active{color:#fff;background:#047857;border-color:#047857;box-shadow:0 4px 12px #04785740}.pill-counter{font-family:var(--font-mono);border-radius:var(--radius-full);background:#0f172a0f;padding:.08rem .42rem;font-size:.68rem}.category-pill-btn.active .pill-counter{color:#fff;background:#ffffff38}.specimen-toolbar-grid{grid-template-columns:1fr 1.4fr 220px;align-items:end;gap:1rem;display:grid}@media (width<=960px){.specimen-toolbar-grid{grid-template-columns:1fr}}.studio-range-slider{accent-color:#059669;cursor:pointer;width:100%;height:36px}.fonts-specimen-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1rem;display:grid}.font-specimen-card{background:var(--bg-surface);border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-card);transition:all .18s var(--ease-out);border:1px solid #e8eef2;flex-direction:column;justify-content:space-between;gap:.9rem;padding:1.15rem 1.25rem;display:flex}.font-specimen-card:hover{box-shadow:var(--shadow-card-hover);border-color:#059669;transform:translateY(-3px)}.font-specimen-header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.font-specimen-title-group{align-items:center;gap:.5rem;min-width:0;display:flex}.font-rank-badge{font-family:var(--font-mono);color:#059669;background:#ecfdf5;border-radius:6px;padding:.15rem .45rem;font-size:.68rem;font-weight:700}.font-family-name{color:#0f172a;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.92rem;font-weight:800;overflow:hidden}.font-specimen-stage{color:#0f172a;word-break:break-word;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;align-items:center;min-height:78px;padding:.95rem .85rem;line-height:1.3;display:flex;overflow:hidden}.font-specimen-footer{color:#64748b;align-items:center;gap:.5rem;font-size:.73rem;display:flex}.font-inspect-link{color:#059669;margin-left:auto;font-weight:700}.font-modal-hero-specimen{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;margin-bottom:1.25rem;padding:1.5rem}.info-stat-box{background:#f8fafc;border:1px solid #edf2f7;border-radius:14px;padding:.95rem 1.05rem}.tag-cloud-list{flex-wrap:wrap;gap:.35rem;margin-top:.5rem;display:flex}.font-files-list{flex-direction:column;gap:.45rem;display:flex}.font-file-row{background:#fff;border:1px solid #e2e8f0;border-radius:8px;justify-content:space-between;align-items:center;padding:.45rem .65rem;display:flex}.studio-pagination-bar{background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.25rem;display:flex}.pagination-controls{align-items:center;gap:.65rem;display:flex}.templates-grid{grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1.15rem;display:grid}.template-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);background:#fff;border:1px solid #e8eef2;flex-direction:column;display:flex;overflow:hidden}.template-card:hover{box-shadow:var(--shadow-card-hover);border-color:#059669;transform:translateY(-4px)}.template-media{background:#0f172a;justify-content:center;align-items:center;height:280px;display:flex;position:relative;overflow:hidden}.template-body{flex-direction:column;flex:1;gap:.65rem;padding:1rem;display:flex}.modal-backdrop{z-index:1000;background:var(--bg-modal-backdrop);-webkit-backdrop-filter:blur(8px);justify-content:center;align-items:center;padding:1.25rem;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-dialog{border-radius:var(--radius-xl);width:100%;max-width:680px;max-height:90vh;box-shadow:var(--shadow-modal);color:#0f172a;background:#fff;border:1px solid #e2e8f0;flex-direction:column;display:flex;overflow-y:auto}.modal-header{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem 1.5rem;display:flex}.modal-title{margin:0;font-size:1.15rem;font-weight:800}.modal-subtitle{color:#64748b;margin:.25rem 0 0;font-size:.78rem}.modal-close-btn{color:#475569;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;justify-content:center;align-items:center;width:34px;height:34px;display:inline-flex}.modal-close-btn:hover{color:#e11d48;background:#fff1f2}.modal-body{padding:1.4rem 1.5rem;overflow-y:auto}.modal-footer{border-bottom-left-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl);background:#f8fafc;border-top:1px solid #f1f5f9;justify-content:flex-end;align-items:center;gap:.65rem;padding:1rem 1.5rem;display:flex}.toast-banner{z-index:1200;color:#fff;border-radius:14px;align-items:center;gap:.65rem;padding:.9rem 1.25rem;font-size:.84rem;font-weight:700;display:flex;position:fixed;bottom:1.5rem;right:1.5rem;box-shadow:0 20px 40px -10px #00000040}.toast-success{background:#047857}.toast-error{background:#e11d48}.empty-state-box{text-align:center;color:#64748b;padding:3rem 1.5rem}@media (width<=980px){.studio-sidebar{transition:transform .25s var(--ease-out);position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.studio-sidebar.mobile-open{transform:translate(0)}.mobile-menu-trigger{display:inline-flex}.workspace-main{padding:1.25rem}}