.variable-font-demo{max-width:600px;margin:20px 0;padding:20px;border:1px solid var(--border);border-radius:8px;background-color:var(--theme)}.demo-text{font-family:roboto serif,serif;font-size:2rem;line-height:1.2;margin-bottom:20px;padding:15px;background:var(--theme);border-radius:4px;border:1px solid var(--border);text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center;word-break:break-word;hyphens:auto}.demo-text-input{width:100%;padding:8px 12px;margin-bottom:15px;border:1px solid var(--border);border-radius:4px;font-size:14px;font-family:inherit;color:var(--primary)}.demo-controls{display:grid;gap:15px}.control-group{display:flex;flex-direction:column;gap:5px}.control-label{font-weight:600;font-size:12px;text-transform:uppercase;color:var(--primary);display:flex;justify-content:space-between;align-items:center}.control-value{background:var(--theme);padding:2px 6px;border-radius:3px;font-size:11px}.control-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--tertiary);outline:none;cursor:pointer}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#007acc;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}.control-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#007acc;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}.toggle-switch{display:flex;align-items:center;margin-top:5px}.toggle-input{display:none}.toggle-label{position:relative;display:inline-block;width:44px;height:24px;background-color:var(--tertiary);border-radius:12px;cursor:pointer;transition:background-color .2s ease}.toggle-slider{position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 2px 4px rgba(0,0,0,.2)}.toggle-input:checked+.toggle-label{background-color:#007acc}.toggle-input:checked+.toggle-label .toggle-slider{transform:translateX(20px)}.toggle-label:hover{opacity:.8}.font-variation-settings{margin-top:15px;padding:10px;background:var(--code-bg);border-radius:4px;font-family:monospace;font-size:11px;color:var(--primary);word-break:break-all}.reset-button{margin-top:10px}@supports not (font-variation-settings:normal){.demo-text{font-family:serif}}@media(max-width:480px){.demo-text{font-size:1.5rem;padding:10px}.variable-font-demo{padding:15px;margin:15px 0}.control-label{font-size:11px}}