.melek-font-tester-container{max-width:100%;margin:0;background:var(--primary-bg-color,oklch(.1902 .0101 294.59));border-radius:var(--radius,0);font-family:var(--font-sans,'Plus Jakarta Sans',sans-serif);color:var(--foreground,oklch(1 0 0));padding:var(--space-xl,48px) 0}.melek-font-metadata-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-l,24px);margin-bottom:var(--space-2xl,64px)}.metadata-column{background:var(--card,oklch(1 0 0 / 5%));border:1px solid var(--border,oklch(1 0 0 / 20%));border-radius:var(--radius,0);padding:var(--space-l,24px);text-align:left}.metadata-label{font-size:var(--text-m,16px);font-weight:400;color:var(--muted-foreground,oklch(1 0 0));margin-bottom:var(--space-m,16px);opacity:.8}.metadata-value{font-size:var(--text-m,16px);font-weight:500;color:var(--foreground,oklch(1 0 0))}.melek-font-tester-title{font-size:var(--text-3xl,48px);font-weight:300;color:var(--foreground,oklch(1 0 0));margin:0 0 var(--space-2xl,64px) 0;letter-spacing:var(--tracking-normal,0)}.melek-font-tester-top-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-xl,48px);margin-bottom:var(--space-xl,48px);align-items:end}.pangram-section{margin-bottom:0}.pangram-section .pangram-select{width:100%;padding:var(--space-m,16px) var(--space-l,24px);background:var(--input,oklch(.1902 .0101 294.5883));border:1px solid var(--border,oklch(1 0 0 / 20%));border-radius:var(--radius,0);color:var(--foreground,oklch(1 0 0));font-size:var(--text-m,16px);font-family:var(--font-sans,'Plus Jakarta Sans',sans-serif);outline:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-m,16px) center;padding-right:calc(var(--space-l, 24px) + 24px)}.pangram-section .pangram-select:focus{border-color:var(--primary-border,#3e71d9);box-shadow:0 0 0 1px var(--primary-border,#3e71d9)}.font-size-section{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-m,16px);margin-bottom:0;min-width:280px;padding:var(--space-l,24px);background:var(--card,oklch(1 0 0 / 5%));border:1px solid var(--border,oklch(1 0 0 / 20%));border-radius:var(--radius,0)}.font-size-section label{font-size:var(--text-m,16px);font-weight:400;color:var(--foreground,oklch(1 0 0));margin-bottom:0;text-align:right}.font-size-label-and-display{display:flex;justify-content:space-between;align-items:center;gap:var(--space-l,24px);width:100%}.font-size-display{font-size:var(--text-l,20px);font-weight:600;color:var(--foreground,oklch(1 0 0));white-space:nowrap}.font-size-slider{width:100%;height:4px;background:var(--border,oklch(1 0 0 / 20%));border-radius:2px;outline:none;-webkit-appearance:none;appearance:none;border:none}.font-size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--primary,oklch(.4778 .2095 262.3701));border:2px solid var(--foreground,oklch(1 0 0));border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px var(--primary,oklch(.4778 .2095 262.3701))}.font-size-slider::-moz-range-thumb{width:20px;height:20px;background:var(--primary,oklch(.4778 .2095 262.3701));border:2px solid var(--foreground,oklch(1 0 0));border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px var(--primary,oklch(.4778 .2095 262.3701))}.font-size-slider::-webkit-slider-track{background:var(--border,oklch(1 0 0 / 20%));height:4px;border-radius:2px}.font-size-slider::-moz-range-track{background:var(--border,oklch(1 0 0 / 20%));height:4px;border-radius:2px;border:none}.custom-text-section{margin-bottom:var(--space-2xl,64px)}.custom-text-section .custom-text-input{width:100%;padding:var(--space-l,24px);background:var(--input,oklch(.1902 .0101 294.5883));border:1px solid var(--border,oklch(1 0 0 / 20%));border-radius:var(--radius,0);color:var(--foreground,oklch(1 0 0));font-size:var(--text-m,16px);font-family:var(--font-sans,'Plus Jakarta Sans',sans-serif);outline:none;height:60px;line-height:1.5}.custom-text-section .custom-text-input:focus{border-color:var(--primary-border,#3e71d9);box-shadow:0 0 0 1px var(--primary-border,#3e71d9)}.custom-text-section .custom-text-input::placeholder{color:var(--muted-foreground,oklch(1 0 0));opacity:.6}.font-rendering-section{margin-top:0}.font-rendering-container{background:#fff0;border:none;padding:0;min-height:auto}.font-section{margin-bottom:var(--space-xl,48px);padding-bottom:0;border-bottom:none}.font-section:last-child{margin-bottom:0}.font-name{font-size:var(--text-m,16px);font-weight:400;color:var(--muted-foreground,oklch(1 0 0));margin:0 0 var(--space-l,24px) 0;padding:0;border-bottom:none;display:block;opacity:.8}.font-render-area{font-size:var(--text-3xl,48px);line-height:1.2;color:var(--foreground,oklch(1 0 0));word-wrap:break-word;overflow-wrap:break-word;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;letter-spacing:var(--tracking-normal,0)}.melek-font-tester-interface{background:#fff0;border:none;padding:0;border-radius:0}.font-loading,.font-error,.font-empty{text-align:center;padding:var(--space-2xl,64px) var(--space-l,24px);color:var(--muted-foreground,oklch(1 0 0))}.font-loading .loading-spinner{width:40px;height:40px;border:2px solid var(--muted,oklch(.3211 0 0));border-top:2px solid var(--primary,oklch(.4778 .2095 262.3701));border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--space-l,24px) auto}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.font-error{color:var(--destructive,oklch(.628 .2577 29.2339))}.font-empty{color:var(--muted-foreground,oklch(1 0 0))}@media (max-width:768px){.melek-font-tester-container{padding:var(--space-l,24px) 0}.melek-font-metadata-grid{grid-template-columns:1fr;gap:var(--space-m,16px)}.melek-font-tester-title{font-size:var(--text-2xl,32px);margin-bottom:var(--space-xl,48px)}.melek-font-tester-top-row{grid-template-columns:1fr;gap:var(--space-l,24px)}.font-size-section{align-items:stretch;min-width:auto}.font-size-label-and-display{justify-content:space-between}.custom-text-section .custom-text-input{padding:var(--space-l,24px);min-height:80px}.font-render-area{font-size:var(--text-2xl,32px)}}@media (max-width:480px){.melek-font-tester-title{font-size:var(--text-xl,24px)}.font-render-area{font-size:var(--text-xl,24px)}}