:root{--color-bg-page:#f2f4f8;--color-bg-page-gradient:linear-gradient(135deg, #f2f4f8 0%, #e8ebf5 50%, #eef0f8 100%);--color-bg-card:#fff;--color-bg-input:#fff;--color-bg-input-focus:#fff;--color-bg-input-disabled:#e2e8ed;--color-bg-overlay:#f2f4f8f7;--color-text:#1a202c;--color-text-muted:#4a5568;--color-text-inverse:#fff;--color-primary:#5b6ba8;--color-primary-hover:#4a5a94;--color-primary-active:#3e4d7e;--color-primary-light:#e2e6f5;--color-primary-focus:#5b6ba8;--color-border:#9ca8c4;--color-border-light:#c5cde0;--color-border-input:#b8c0d4;--color-button-primary-bg:#5b6ba8;--color-button-primary-bg-hover:#4a5a94;--color-button-primary-bg-active:#3e4d7e;--color-button-primary-text:#fff;--color-button-secondary-bg:#e2e6f5;--color-button-secondary-text:#2d3548;--color-button-secondary-bg-hover:#d0d6eb;--color-button-disabled-bg:#e2e8ed;--color-button-disabled-text:#718096;--color-danger:#e05050;--color-danger-hover:#d04040;--color-danger-light:#fdeeee;--color-wheel-border:#5b6ba8;--color-wheel-hub:#5b6ba8;--color-pointer:#5b6ba8;--color-roulette-text-stroke:#2d3748;--shadow-card:0 4px 20px #1a202c14;--shadow-card-accent:0 4px 20px #5b6ba826;--shadow-button:0 4px 12px #5b6ba84d;--shadow-overlay:0 8px 32px #1a202c1f;--radius-sm:6px;--radius-md:10px;--radius-lg:16px}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-bg-page-gradient);margin:0;font-family:Kiwi Maru,serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{width:100%;min-height:100vh}body:has(.screen-only){background:0 0}body:has(.screen-only) #root{background:0 0}.app{max-width:600px;min-height:100vh;margin:0 auto;padding:16px;position:relative}.app:not(.screen-only){font-family:Kosugi Maru,sans-serif}.pattern-and-spin{flex-direction:column;gap:12px;max-width:800px;margin:0 auto 20px;padding-top:20px;display:flex}.pattern-and-spin .pattern-tabs{margin-bottom:0}.tabbed-panel{border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);max-width:800px;margin:0 auto 24px;overflow:hidden}.tabbed-panel .tabs-row .pattern-tabs{box-shadow:none;background:0 0;border:none;border-radius:0;margin:0;padding:0}.tabbed-panel .tabs-row .tabs-container{gap:0;padding:0}.tabbed-panel .tab{border-radius:var(--radius-md) var(--radius-md) 0 0;background:var(--color-bg-card);opacity:.6;padding:8px 12px 10px}.tabbed-panel .tab.active{opacity:1;font-weight:600}.tab-content{background:var(--color-bg-card);border-top-right-radius:var(--radius-md);min-height:200px}.tab-content-inner{flex-direction:column;gap:20px;padding:20px;display:flex}.pattern-settings-section{border-top:2px solid var(--color-border-light);padding-top:20px}.pattern-only-settings{grid-template-columns:1fr 1fr 1fr;gap:12px;display:grid}@media (max-width:490px){.pattern-only-settings{grid-template-columns:1fr}}.common-settings-panel{background:var(--color-bg-card);border-radius:var(--radius-lg);max-width:800px;margin:0 auto;padding:24px}.common-settings-title{color:var(--color-text);margin:0 0 8px;font-size:1.25rem;font-weight:700}.common-settings-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (max-width:490px){.common-settings-grid{grid-template-columns:1fr}}.usage-card{background:var(--color-bg-card);border-radius:var(--radius-lg);max-width:800px;margin:24px auto 0;padding:24px}.usage-card-title{color:var(--color-text);margin:0 0 8px;font-size:1.25rem;font-weight:700}.usage-steps{color:var(--color-text);margin:0;padding-left:1.25rem;font-size:.9rem;line-height:1.6}.usage-steps li{margin-bottom:8px}.usage-steps li:last-child{margin-bottom:0}.usage-url-row{align-items:center;gap:8px;margin-top:6px;margin-bottom:4px;display:flex}.usage-url-input{min-width:0;height:38px;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border,#e0e0e0);border-radius:var(--radius-md,6px);cursor:text;-webkit-user-select:all;user-select:all;box-sizing:border-box;flex:1;padding:0 12px;font-family:ui-monospace,monospace;font-size:.85rem}.usage-url-input:focus{border-color:var(--color-primary,#6366f1);outline:none;box-shadow:0 0 0 2px #6366f133}.usage-copy-btn{height:38px;color:var(--color-text);background:var(--color-bg-card);border:1px solid var(--color-border,#e0e0e0);border-radius:var(--radius-md,6px);cursor:pointer;white-space:nowrap;box-sizing:border-box;flex-shrink:0;padding:0 14px;font-size:.85rem;font-weight:500}.usage-copy-btn:hover{background:var(--color-bg);border-color:var(--color-primary,#6366f1);color:var(--color-primary,#6366f1)}.app-footer{text-align:center;border-top:1px solid var(--color-border-light);max-width:800px;margin:24px auto 0;padding:16px 0}.app-footer-link{color:var(--color-text-muted);font-size:.85rem;text-decoration:none}.app-footer-link:hover{color:var(--color-primary);text-decoration:underline}.app-footer-sep{color:var(--color-text-muted);margin:0 4px;font-size:.85rem}.main-content{z-index:1;flex-direction:column;gap:24px;max-width:800px;margin:0 auto;display:flex;position:relative}.left-panel,.center-panel{flex-direction:column;gap:20px;width:100%;display:flex}.wheel-section{flex-direction:column;gap:20px;display:flex}.wheel-container{background:var(--color-bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card-accent);border:2px solid var(--color-border-light);justify-content:center;align-items:center;min-width:600px;min-height:600px;padding:60px;display:flex;position:relative}.winner-overlay{background:var(--color-bg-overlay);border-radius:var(--radius-lg);z-index:10;justify-content:center;align-items:center;animation:.3s ease-out fadeIn;display:flex;position:absolute;inset:0}.winner-overlay.winner-overlay--fade-out{pointer-events:none;animation:1s ease-out forwards winnerFadeOut}.winner-overlay.winner-overlay--fade-out .winner-content{animation:1s ease-out forwards winnerContentFadeOut}.winner-overlay:not(.winner-overlay--fade-out) .winner-content{animation:.5s ease-out scaleIn}.winner-content{text-align:center}.winner-icon{margin-bottom:16px;font-size:80px;animation:.6s ease-out bounce}.winner-text{color:var(--color-primary);margin-bottom:12px;font-size:32px;font-weight:700}.winner-name{color:var(--color-primary);text-shadow:-3px -3px 0 var(--color-text-inverse), 3px -3px 0 var(--color-text-inverse), -3px 3px 0 var(--color-text-inverse), 3px 3px 0 var(--color-text-inverse), -3px 0 0 var(--color-text-inverse), 3px 0 0 var(--color-text-inverse), 0 -3px 0 var(--color-text-inverse), 0 3px 0 var(--color-text-inverse), 0 4px 8px #1a202c33;font-size:96px;font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes winnerFadeOut{0%{opacity:1}to{opacity:0}}@keyframes winnerContentFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.98)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}25%{transform:translateY(-20px)}50%{transform:translateY(0)}75%{transform:translateY(-10px)}}.settings-panel{background:var(--color-bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card-accent);border:2px solid var(--color-border-light);padding:20px}.setting-group{flex-direction:column;flex:1;gap:8px;display:flex}.setting-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.02em;font-size:12px;font-weight:700}.reset-button{color:var(--color-danger);border:2px solid var(--color-danger);border-radius:var(--radius-md);cursor:pointer;background:0 0;padding:10px 16px;font-size:14px;font-weight:600;transition:background .15s,color .15s,border-color .15s}.reset-button:hover:not(:disabled){background:var(--color-danger-light);color:var(--color-danger-hover);border-color:var(--color-danger-hover)}.reset-button:disabled{opacity:.6;cursor:not-allowed}.pattern-reset-row,.common-reset-row{grid-column:1/-1}.display-settings{border-top:2px solid var(--color-border-light);flex-wrap:wrap;margin-top:16px;padding-top:16px}.app.screen-only{background:0 0;padding:0}.app.screen-only .wheel-section.fullscreen{justify-content:center;align-items:center;height:100vh;display:flex}.app.screen-only .wheel-container{width:90vmin;height:90vmin;box-shadow:none;background:0 0;border:none;padding:0}.app.screen-only .winner-overlay{background:0 0}.app.screen-only .winner-name{color:var(--color-primary);text-shadow:-4px -4px 0 var(--color-text-inverse), 4px -4px 0 var(--color-text-inverse), -4px 4px 0 var(--color-text-inverse), 4px 4px 0 var(--color-text-inverse), -4px 0 0 var(--color-text-inverse), 4px 0 0 var(--color-text-inverse), 0 -4px 0 var(--color-text-inverse), 0 4px 0 var(--color-text-inverse), 0 8px 16px #1a202c40;font-size:15vmin}