.demo-phone{--tile: #e8c079;--tileDark: #c8a568;--tileTxt: #5e4119;--green: #7cd957;--greenD: #54b533;--blue: #66c7ff;--blueD: #3aa1e0;--orange: #ff8e2b;--ink: #243339;--inkSoft: #6e7e84;--peach0: #ffe6bd;--peach1: #ffd38c;--board0: #e9f1ea;--board1: #e3eaf3;position:relative;z-index:3;width:min(320px,82%);aspect-ratio:1080 / 1920;border-radius:44px;overflow:hidden;box-shadow:0 22px 50px #2e5a3a38;border:10px solid #0e1418;background:#0e1418;animation:demo-floaty 6s ease-in-out infinite}@keyframes demo-floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@media(max-width:860px){.demo-phone{width:min(248px,66%)}}.demo-fit{position:absolute;inset:0;width:1080px;height:1920px;transform-origin:top left}.demo-stage{position:absolute;inset:0;overflow:hidden;background:linear-gradient(160deg,#f3f1fb,#edf4fb 55%,#ebf6f1)}.demo-stage.shake{animation:demo-shake .4s cubic-bezier(.36,.07,.19,.97)}.demo-stage.shake-big{animation:demo-shake-big .5s cubic-bezier(.36,.07,.19,.97)}@keyframes demo-shake{0%,to{transform:translate(0)}20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}@keyframes demo-shake-big{0%,to{transform:translate(0)}15%{transform:translate(-10px,5px) rotate(-.4deg)}35%{transform:translate(9px,-5px) rotate(.4deg)}55%{transform:translate(-7px,4px)}75%{transform:translate(6px,-3px)}}.demo-safe{position:absolute;inset:0;padding:56px 44px;display:flex;flex-direction:column;gap:30px}.demo-panel{background:#fff;border-radius:40px;padding:36px 44px 26px;box-shadow:0 18px 40px #3a4a5a29;position:relative}.demo-statsRow{display:flex;align-items:center;justify-content:space-between;gap:8px}.demo-scoreBlock{flex:1}.demo-wordsBlock{flex:1;display:flex;flex-direction:column;align-items:flex-end}[dir=rtl] .demo-wordsBlock{align-items:flex-start}.demo-label{font-size:22px;font-weight:800;letter-spacing:2.6px;color:var(--inkSoft);text-transform:uppercase}.demo-scoreValue{margin-top:4px;font-size:84px;line-height:.9;font-weight:900;color:var(--ink);letter-spacing:-1px;transform-origin:left center}[dir=rtl] .demo-scoreValue{transform-origin:right center}.demo-scoreValue.bump{animation:demo-bump .52s cubic-bezier(.2,1.4,.4,1)}@keyframes demo-bump{0%{transform:scale(1)}35%{transform:scale(1.22);color:var(--greenD)}to{transform:scale(1)}}.demo-wordsValue{font-size:60px;line-height:1;font-weight:900;color:var(--ink);letter-spacing:-1px;transform-origin:right center}[dir=rtl] .demo-wordsValue{transform-origin:left center}.demo-wordsValue.bump{animation:demo-bump .52s cubic-bezier(.2,1.4,.4,1)}.demo-timerCluster{display:flex;flex-direction:column;align-items:center;gap:8px}.demo-timerBadge{position:relative;width:140px;height:140px;border-radius:50%;border:8px solid rgba(255,255,255,.85);background:linear-gradient(150deg,var(--peach0),var(--peach1));box-shadow:0 10px 22px #c68b3a59;display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s}.demo-timerBadge.crit{background:linear-gradient(150deg,#ffd2ce,#ffb0ac)}.demo-timerBadge.tplus{animation:demo-tplus .5s cubic-bezier(.2,1.3,.5,1)}@keyframes demo-tplus{0%{transform:scale(1)}45%{transform:scale(1.12)}to{transform:scale(1)}}.demo-ticks{position:absolute;inset:0}.demo-tick{position:absolute;left:50%;top:50%;width:5px;height:16px;margin:-8px 0 0 -2.5px;border-radius:999px;background:#ffffff4d;transform-origin:50% 50%}.demo-tick.on{background:var(--greenD)}.demo-timerCenter{width:84px;height:84px;border-radius:50%;background:#ffffff59;border:3px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center}.demo-timerPause{font-size:34px;font-weight:900;letter-spacing:2px;color:#9a6a22}.demo-timerReadout{font-size:38px;font-weight:900;color:var(--ink);letter-spacing:1px}.demo-timerReadout.crit{color:#ff5d6c}.demo-recent{margin-top:16px;font-size:24px;font-weight:700;color:var(--inkSoft);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-gainLayer{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;pointer-events:none}.demo-gainPill{display:flex;align-items:center;gap:14px;background:#fffffff7;border-radius:999px;padding:9px 24px;box-shadow:0 8px 18px #3a4a5a2e;opacity:0}.demo-gainPill.go{animation:demo-gain 1.15s cubic-bezier(.22,.61,.36,1) forwards}.demo-gainPts{font-size:38px;font-weight:900;color:var(--orange)}.demo-gainTime{font-size:30px;font-weight:900;color:var(--greenD)}@keyframes demo-gain{0%{opacity:0;transform:translateY(8px) scale(.8)}14%{opacity:1;transform:translateY(0) scale(1.08)}26%{transform:translateY(-2px) scale(1)}62%{opacity:1;transform:translateY(-34px) scale(1)}to{opacity:0;transform:translateY(-70px) scale(1)}}.demo-boardWrap{flex:1;border-radius:44px;background:linear-gradient(150deg,var(--board0),var(--board1));box-shadow:0 18px 40px #3a4a5a29;padding:36px;display:flex;align-items:center;justify-content:center}.demo-board{position:relative;width:100%;aspect-ratio:5/6;max-height:100%;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(6,1fr);gap:16px}.demo-tile{position:relative;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:900;color:var(--tileTxt);background:linear-gradient(180deg,var(--tile),var(--tileDark));box-shadow:inset 0 -12px #0000001f,0 8px 14px #7c674a40;transition:transform .16s ease,background .14s,color .14s,box-shadow .16s;will-change:transform}.demo-tile.ready{animation:demo-ready 1.05s ease-in-out infinite;z-index:2}@keyframes demo-ready{0%,to{box-shadow:inset 0 -12px #0000001f,0 8px 14px #7c674a40}50%{box-shadow:inset 0 -12px #0000001a,0 0 0 6px #66c7ff4d,0 10px 20px #3aa1e066}}.demo-tile.touch{color:#fff;background:linear-gradient(180deg,var(--blue),var(--blueD));z-index:3;transform:translateY(-4px) scale(1.06);box-shadow:inset 0 -12px #0000001a,0 12px 24px #3aa1e08c}.demo-tile.valid{color:#fff;background:linear-gradient(180deg,var(--green),var(--greenD));z-index:3;transform:translateY(-6px) scale(1.1);box-shadow:inset 0 -12px #0000001a,0 16px 30px #54b53399}.demo-tile.flash{filter:brightness(1.7) saturate(1.2)}.demo-tile.out{transform:scale(.05) rotate(8deg);opacity:0;transition:transform .26s cubic-bezier(.5,0,.75,0),opacity .26s}.demo-tile.pop{animation:demo-pop .5s cubic-bezier(.18,1.5,.4,1);z-index:2}@keyframes demo-pop{0%{transform:scale(.3) rotate(-6deg)}55%{transform:scale(1.14) rotate(2deg)}to{transform:scale(1) rotate(0)}}.demo-trail{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:4}.demo-trail line{stroke:#66c7ffd9;stroke-width:24;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(102,199,255,.7))}.demo-finger{position:absolute;width:70px;height:70px;border-radius:50%;margin:-35px 0 0 -35px;background:radial-gradient(circle at 38% 32%,#ffffffe6,#ffffff40 60%,#fff0 70%),#24333929;border:3px solid rgba(255,255,255,.7);box-shadow:0 8px 20px #2433394d;left:0;top:0;opacity:0;z-index:6;transition:left .2s cubic-bezier(.4,0,.2,1),top .2s cubic-bezier(.4,0,.2,1),opacity .2s}.demo-confetti{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:5}.demo-spark{position:absolute;width:22px;height:22px;border-radius:6px;opacity:0;will-change:transform,opacity}.demo-spark.go{animation:demo-spark var(--dur, .9s) cubic-bezier(.18,.7,.3,1) forwards}@keyframes demo-spark{0%{opacity:1;transform:translate(0) rotate(0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.3)}}.demo-combo{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);pointer-events:none;z-index:7;opacity:0;text-align:center}.demo-combo.go{animation:demo-combo .95s cubic-bezier(.2,1.4,.4,1) forwards}.demo-comboNum{font-size:110px;font-weight:900;line-height:.9;color:#fff;text-shadow:0 6px 0 var(--greenD),0 12px 26px rgba(84,181,51,.5);-webkit-text-stroke:4px var(--greenD)}.demo-comboTxt{font-size:34px;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:var(--orange);text-shadow:0 3px 0 rgba(0,0,0,.12)}@keyframes demo-combo{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}45%{transform:translate(-50%,-50%) scale(1) rotate(0)}75%{opacity:1;transform:translate(-50%,-60%) scale(1)}to{opacity:0;transform:translate(-50%,-78%) scale(.95)}}.demo-caption{position:absolute;left:0;right:0;bottom:70px;display:flex;justify-content:center;pointer-events:none;z-index:8}.demo-captionPill{max-width:900px;background:#14201cd1;color:#fff;font-size:42px;font-weight:900;text-align:center;line-height:1.15;padding:22px 40px;border-radius:28px;box-shadow:0 14px 34px #14281e59;opacity:0;transform:translateY(24px) scale(.96);transition:opacity .4s ease,transform .4s cubic-bezier(.2,1.2,.4,1)}.demo-captionPill.show{opacity:1;transform:translateY(0) scale(1)}@media(prefers-reduced-motion:reduce){.demo-phone{animation:none}}