.melek-font-tester-container{max-width:100%;margin:0;font-family:var(--font-sans,'Plus Jakarta Sans',system-ui,-apple-system,sans-serif);color:#fff;margin-bottom:48px;box-sizing:border-box}.font-metadata-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.metadata-card{padding:20px;border:1px solid rgb(255 255 255 / .2);border-radius:0;background:#fff0}.metadata-card-title{color:rgb(255 255 255 / .7);font-size:16px;font-weight:400;margin-bottom:8px;opacity:.7}.metadata-card-value{color:#fff;font-size:16px;font-weight:400;opacity:1}.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)}}.loading-state{text-align:center;padding:40px 20px;color:#fff}.loading-spinner{border:2px solid #333;border-top:2px solid #007cba;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 16px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.font-section{margin-bottom:32px}.font-name{color:#fff;margin:0 0 16px 0;font-size:16px;font-weight:400;opacity:.7}.font-render-area{color:#fff;font-size:48px;line-height:1.2;word-break:break-word;font-weight:400}.font-controls{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;align-items:stretch}.control-group{display:flex;flex-direction:column;min-height:100px}.custom-select{position:relative;flex:1;display:flex;flex-direction:column;border:1px solid rgb(255 255 255 / .2);border-radius:0}.control-group label{color:rgb(255 255 255 / .7);font-weight:400;font-size:14px;display:block;margin-bottom:12px}.control-group select,.control-group input[type='text']{width:100%;padding:8px 12px;border:1px solid rgb(255 255 255 / .2);border-radius:4px;background:#fff0;color:#fff;font-size:14px}.control-group select:focus,.control-group input:focus{outline:none;border-color:#007cba}.control-group.font-size-control{display:flex;flex-direction:column;padding:20px;border:1px solid rgb(255 255 255 / .2);border-radius:0}.font-size-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.font-size-header label{margin:0;font-size:16px;color:#fff;opacity:.7}.font-size-value{font-size:16px;color:#fff;opacity:1}.control-group input[type='range']{width:100%;height:4px;background:rgb(255 255 255 / .2);border:none;border-radius:2px;outline:none;-webkit-appearance:none}.control-group input[type='range']::-webkit-slider-thumb{width:16px;height:16px;background:#007cba;border-radius:50%;cursor:pointer;-webkit-appearance:none}.control-group input[type='range']::-moz-range-thumb{width:16px;height:16px;background:#007cba;border-radius:50%;cursor:pointer;border:none}.custom-select{position:relative}.select-trigger{width:100%;padding:20px;border:none;border-radius:0;background:#fff0;color:#fff;font-size:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;flex:1;min-height:100px;box-sizing:border-box}.select-trigger:hover{border-color:rgb(255 255 255 / .3)}.select-trigger.active{border-color:#007cba}.select-arrow{font-size:12px;transition:transform 0.2s ease}.select-trigger.active .select-arrow{transform:rotate(180deg)}.select-options{position:absolute;top:calc(100% + 10px);left:0;right:0;background:rgb(25 25 25 / .95);border:1px solid rgb(255 255 255 / .2);z-index:1000;overflow-y:auto}.select-option{padding:12px 20px;color:#fff;cursor:pointer;font-size:14px;transition:background-color 0.2s ease}.select-option:hover{background:rgb(255 255 255 / .1)}.select-option.selected{background:rgb(0 124 186 / .2);color:#007cba}.full-width-text-input{width:100%;padding:20px;border:1px solid rgb(255 255 255 / .2);border-radius:0;background:#fff0;color:#fff;font-size:14px;margin-bottom:32px;box-sizing:border-box}.full-width-text-input:focus{outline:none;border-color:#007cba}.full-width-text-input::placeholder{color:rgb(255 255 255 / .5)}.font-tester-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;margin-top:32px}.font-tester-header h3{color:#fff;margin:0;font-size:32px;font-weight:400;line-height:48px}.font-info{color:rgb(255 255 255 / .7);font-size:14px}