:root{--background: #ffffff;--text-primary: #1d1d1f;--text-secondary: #6e6e73;--accent: #0071e3;--fill: #f5f5f7;--border: #d2d2d7;--white: #ffffff;--shadow: 0 4px 12px rgba(0, 0, 0, .08);--border-radius: 12px;--transition: .3s ease}.dark{--background: #000000;--text-primary: #f5f5f7;--text-secondary: #86868b;--accent: #0077ed;--fill: #1d1d1f;--border: #424245;--shadow: 0 4px 12px rgba(0, 0, 0, .4)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--background);color:var(--text-primary);margin:0;padding:0;min-height:100vh;min-height:100dvh;transition:background-color var(--transition),color var(--transition);overflow-x:hidden;padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}.app-container{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.main-content{max-width:1200px;margin:0 auto;padding:clamp(1rem,4vw,2rem) clamp(.75rem,4vw,1rem);padding-bottom:max(clamp(1rem,4vw,2rem),env(safe-area-inset-bottom,0px));width:100%;flex:1}.navbar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:1rem 2rem;padding-top:max(1rem,env(safe-area-inset-top,0px));padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px));background-color:var(--background);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.logo{font-size:1.5rem;font-weight:700;color:var(--text-primary);text-decoration:none}.logo:hover{color:var(--accent)}.theme-toggle{padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color var(--transition);touch-action:manipulation;min-width:44px;min-height:44px;flex-shrink:0}.theme-toggle:hover{background-color:var(--fill)}.theme-toggle:active{background-color:var(--fill);opacity:.9}.playground{display:flex;flex-direction:column;gap:clamp(1rem,3vw,1.5rem);align-items:stretch}.playground-heading{font-size:clamp(1.125rem,2.5vw,1.375rem);font-weight:600;line-height:1.3;margin:0;color:var(--text-primary);letter-spacing:-.02em;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.playground-body{display:flex;flex-direction:column;gap:clamp(1.25rem,4vw,2rem);align-items:stretch}@media (max-width: 767px){.playground-body .wheel-container{order:-1}}@media (min-width: 768px){.playground-body{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}}.sidebar{display:flex;flex-direction:column;gap:1.5rem}.card{background-color:var(--fill);border:1px solid var(--border);border-radius:var(--border-radius);padding:clamp(1rem,4vw,1.5rem);box-shadow:var(--shadow)}.input-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch}input{flex:1;min-width:0;min-height:44px;padding:.75rem 1rem;border-radius:2rem;border:1px solid var(--border);background-color:var(--background);color:var(--text-primary);outline:none;font-size:16px;touch-action:manipulation}input:focus{border-color:var(--accent)}.btn{padding:.75rem 1.5rem;border-radius:2rem;font-weight:600;font-size:1rem;min-height:44px;touch-action:manipulation;transition:transform .1s,opacity .2s}.btn-primary{background-color:var(--accent);color:var(--white)}.btn-primary:hover{opacity:.9}.btn-primary:active{transform:scale(.95)}.item-list{display:flex;flex-direction:column;gap:.75rem;max-height:min(45vh,400px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.item-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.75rem 1rem;min-height:48px;background-color:var(--background);border-radius:var(--border-radius);border:1px solid var(--border)}.item-row span{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.delete-btn{color:#ff3b30;padding:.5rem;border-radius:8px;flex-shrink:0;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation}.delete-btn:hover{background-color:#ff3b301a}.delete-btn:active{background-color:#ff3b3026}.wheel-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1.25rem,4vw,2rem);padding:clamp(1rem,4vw,2rem);background:linear-gradient(165deg,var(--fill) 0%,color-mix(in srgb,var(--fill) 88%,var(--border)) 100%);border-radius:var(--border-radius);border:1px solid var(--border);min-height:400px;transition:box-shadow .45s ease,transform .45s ease;width:100%;max-width:100%}@media (max-width: 767px){.wheel-container{min-height:auto}}.wheel-container--spinning{box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}.wheel-wrapper{position:relative;width:100%;max-width:min(400px,92vw);min-width:0;aspect-ratio:1;touch-action:manipulation;filter:drop-shadow(0 14px 28px rgba(0,0,0,.12)) drop-shadow(0 4px 8px rgba(0,0,0,.08));transition:filter .5s ease,transform .05s linear}.dark .wheel-wrapper{filter:drop-shadow(0 18px 36px rgba(0,0,0,.55)) drop-shadow(0 6px 12px rgba(0,0,0,.35))}.wheel-container--spinning .wheel-wrapper{filter:drop-shadow(0 20px 40px rgba(0,113,227,.2)) drop-shadow(0 8px 16px rgba(0,0,0,.12))}.wheel-canvas{display:block;width:100%;height:100%;border-radius:50%}.wheel-winner{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;animation:wheel-winner-in .55s cubic-bezier(.22,1,.36,1) both}.wheel-winner__label{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}.wheel-winner__name{font-size:clamp(1.35rem,4vw,1.75rem);font-weight:700;color:var(--accent);text-shadow:0 1px 0 color-mix(in srgb,var(--background) 40%,transparent)}@keyframes wheel-winner-in{0%{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.spin-btn{position:relative;padding:1rem 2.75rem;min-height:48px;border-radius:999px;touch-action:manipulation;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,#ffffff) 0%,var(--accent) 48%,color-mix(in srgb,var(--accent) 72%,#0a0a0a) 100%);color:var(--white);font-size:1.125rem;font-weight:700;letter-spacing:.02em;box-shadow:0 1px #ffffff38 inset,0 4px 14px #0071e359,0 12px 28px #0071e32e;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,opacity .2s ease,filter .2s ease}.spin-btn:hover:not(:disabled){transform:translateY(-1px) scale(1.02);box-shadow:0 1px #ffffff47 inset,0 6px 20px #0071e36b,0 14px 32px #0071e338;filter:brightness(1.03)}.spin-btn:active:not(:disabled){transform:translateY(0) scale(.98);transition-duration:.08s}.spin-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:0 2px 8px #00000014;filter:grayscale(.15)}.spin-btn__spinning{animation:spin-btn-pulse 1.05s ease-in-out infinite}@keyframes spin-btn-pulse{0%,to{opacity:1}50%{opacity:.78}}@media (max-width: 767px){.logo{font-size:1.25rem}.spin-btn{width:min(100%,320px)}.input-group{flex-direction:column}.input-group .btn{width:100%}}@media (max-width: 380px){.navbar{padding-left:max(.75rem,env(safe-area-inset-left,0px));padding-right:max(.75rem,env(safe-area-inset-right,0px))}}