:root{--bg-color:#f2f2f7;--panel-bg:#ffffffbf;--card-bg:#fff;--card-text:#1c1c1e;--card-shadow:0 8px 30px #0000000f;--btn-bg:#007aff;--btn-hover:#06c;--btn-text:#fff;--divider-color:#0000000d;--apple-font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif}@media (prefers-color-scheme:dark){:root{--bg-color:#000;--panel-bg:#1c1c1ebf;--card-bg:#1c1c1e;--card-text:#fff;--card-shadow:0 8px 30px #0006;--btn-bg:#0a84ff;--btn-hover:#007aff;--divider-color:#ffffff1a}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--apple-font);background-color:var(--bg-color);color:var(--card-text);-webkit-font-smoothing:antialiased;justify-content:center;align-items:center;height:100vh;margin:0;display:flex;overflow:hidden}#root{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}.app-container{background:var(--panel-bg);-webkit-backdrop-filter:blur(40px);border-radius:40px;flex-direction:column;align-items:center;gap:32px;padding:48px 64px;display:flex;box-shadow:0 20px 40px #0000001a,inset 0 0 0 1px #fff3}.logo{object-fit:contain;width:auto;height:52px;margin-bottom:-16px}.title{color:var(--card-text);letter-spacing:-.5px;margin-bottom:2px;font-size:28px;font-weight:700}.segmented-control{background-color:#0000000d;border-radius:100px;margin-bottom:16px;padding:4px;display:flex}.segmented-control button{color:#8e8e93;cursor:pointer;font-size:15px;font-weight:600;font-family:var(--apple-font);background:0 0;border:none;border-radius:100px;padding:10px 24px;transition:all .2s}.segmented-control button:hover{color:var(--card-text)}.segmented-control button.active{background-color:var(--card-bg);color:var(--card-text);box-shadow:0 2px 8px #0000001a}.slots-container{gap:16px;display:flex}.flip-clock{perspective:1000px}.flip-clock.clickable{cursor:pointer;transition:all .2s cubic-bezier(.25,1,.5,1)}.flip-clock.clickable:hover{filter:drop-shadow(0 12px 30px #00000014);transform:scale(1.02)}.flip-clock.clickable:active{filter:drop-shadow(0 4px 10px #0000000a);transform:scale(.95)}.flip-card{background-color:var(--card-bg);width:140px;height:200px;box-shadow:var(--card-shadow), inset 0 0 0 1px #0000000d;color:var(--card-text);text-transform:lowercase;transform-style:preserve-3d;border-radius:24px;font-size:84px;font-weight:600;position:relative}.flip-card .top,.flip-card .bottom,.flip-card .flipper-front,.flip-card .flipper-back{background-color:var(--card-bg);width:100%;height:50%;position:absolute;left:0;overflow:hidden}.text-content{justify-content:center;align-items:center;width:100%;height:200px;padding-bottom:24px;line-height:normal;display:flex;position:absolute;left:0}.text-content.text-long{letter-spacing:-2px;font-size:72px}.flip-card .top,.flip-card .flipper-front{transform-origin:bottom;border-top-left-radius:24px;border-top-right-radius:24px;top:0}.flip-card .top .text-content,.flip-card .flipper-front .text-content{top:0}.flip-card .bottom,.flip-card .flipper-back{transform-origin:top;border-bottom-right-radius:24px;border-bottom-left-radius:24px;bottom:0}.flip-card .bottom .text-content,.flip-card .flipper-back .text-content{bottom:0}.flip-card .flipper{width:100%;height:100%;transform-style:preserve-3d;z-index:5;position:absolute;top:0;left:0}.flip-card .flipper-front,.flip-card .flipper-back{backface-visibility:hidden}.flip-card .flipper-back{transform:rotateX(180deg)}.flip-card:after{content:"";background-color:var(--divider-color);z-index:10;height:1px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.flip-card.flipping .flipper{animation:.4s cubic-bezier(.455,.03,.515,.955) forwards flipDown}.flip-card.flipping .bottom:before{content:"";z-index:1;background:#0000001a;animation:.4s forwards fadeDepth;position:absolute;inset:0}@keyframes flipDown{0%{transform:rotateX(0)}to{transform:rotateX(-180deg)}}@keyframes fadeDepth{0%{background:#0003}to{background:0 0}}.controls{flex-direction:column;align-items:center;gap:16px;margin-top:8px;display:flex}.spin-button{background-color:var(--btn-bg);color:var(--btn-text);font-size:20px;font-weight:600;font-family:var(--apple-font);cursor:pointer;border:none;border-radius:100px;padding:16px 56px;transition:all .2s cubic-bezier(.25,1,.5,1)}.spin-button:hover{background-color:var(--btn-hover);transform:scale(1.02)}.spin-button:active{opacity:.8;transform:scale(.96)}.hint-text{color:#8e8e93;font-size:14px;font-weight:400}
