:root{--bg: #f8f9fa;--surface: #ffffff;--text: #1a1a2e;--text-secondary: #6c757d;--border: #e9ecef;--accent: #4361ee;--accent-hover: #3a56d4;--radius: 12px;--shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}.app{max-width:860px;margin:0 auto;padding:2.5rem 1.5rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.25rem}.header p{color:var(--text-secondary);font-size:.95rem}.github-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.75rem;padding:.35rem .85rem;border:1px solid var(--border);border-radius:6px;font-size:.8rem;font-weight:500;color:var(--text-secondary);text-decoration:none;transition:color .15s ease,border-color .15s ease,background .15s ease}.github-link:hover{color:var(--text);border-color:#adb5bd;background:var(--surface)}.github-link svg{fill:currentColor;flex-shrink:0}.main{display:flex;flex-direction:column;gap:1.5rem}.preview{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);height:180px;overflow:hidden;transition:height .3s ease}.preview-vertical{height:420px}.preview{position:relative}.cycle-badge{position:absolute;top:8px;right:10px;font-size:.7rem;font-weight:600;color:var(--text-secondary);background:var(--bg);padding:2px 8px;border-radius:4px;pointer-events:none;font-variant-numeric:tabular-nums}.item-card{display:flex;align-items:center;justify-content:center;width:160px;height:100px;border-radius:10px;font-size:2.5rem;-webkit-user-select:none;user-select:none;box-shadow:0 2px 8px #0000001a;flex-shrink:0}.controls{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}.controls h2,.code-preview h2{font-size:.75rem;font-weight:600;margin-bottom:1.25rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}@media(max-width:560px){.control-grid{grid-template-columns:1fr}}.toggles-column{gap:.85rem!important}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-group>label{font-size:.875rem;font-weight:500;display:flex;justify-content:space-between;align-items:center}.value{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--border);border-radius:3px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform .15s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--accent);border:none;border-radius:50%;cursor:pointer}.segmented{display:flex;background:var(--bg);border-radius:8px;padding:3px;gap:2px}.segmented button{flex:1;padding:.4rem .75rem;border:none;background:transparent;border-radius:6px;font-size:.8rem;font-weight:500;cursor:pointer;color:var(--text-secondary);transition:all .2s ease}.segmented button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000001a}.toggle-row{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;font-weight:500;cursor:pointer}.toggle{position:relative;width:44px;height:24px;background:var(--border);border:none;border-radius:12px;cursor:pointer;padding:0;transition:background .2s ease;flex-shrink:0}.toggle-on{background:var(--accent)}.toggle-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px #00000026}.toggle-on .toggle-thumb{transform:translate(20px)}.code-preview{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}.code-preview pre{background:#1e1e2e;color:#cdd6f4;border-radius:8px;padding:1.25rem;overflow-x:auto;font-size:.825rem;line-height:1.6;font-family:SF Mono,Fira Code,Cascadia Code,monospace}