.demo-board{width:100%;aspect-ratio:1;width:round(down,100%,8px);box-shadow:0 0 0 6px rgb(var(--fx-ink) / .08), 0 30px 70px -28px rgb(var(--fx-shadow) / .55), 0 0 90px rgb(var(--fx-accent) / .2);background:repeating-conic-gradient(#b58863 0% 25%,#f0d9b5 0% 50%) 0 0/25% 25%;border-radius:.5rem;margin-inline:auto;position:relative;overflow:hidden}.demo-board.cg-wrap{height:auto}.cg-wrap square.demo-bad{background-color:#ef44448c}.cg-wrap square.demo-good{background-color:#22c55e8c}.cg-wrap square.demo-mark{background-color:#6366f173;box-shadow:inset 0 0 0 3px #4338cae6}.hero-demo{--s:min(74vw, 360px);width:var(--s);margin-inline:auto;position:relative}@media (width>=1024px){.hero-demo{--s:clamp(300px, 34vw, 430px)}}.demo-float{z-index:3;position:absolute}.demo-eval{width:4.2rem;height:.45rem;box-shadow:inset 0 0 0 1px rgb(var(--fx-ink) / .18);background:#0f172a;border-radius:9999px;display:block;overflow:hidden}.demo-eval>i{width:50%;height:100%;transition:width .9s var(--fx-ease);background:#fff;display:block}.demo-verdict{transition:color .3s,border-color .3s,background-color .3s}.demo-verdict[data-tone=bad]{color:#b91c1c;background:#fef2f2f2;border-color:#ef444480}.demo-verdict[data-tone=good]{color:#047857;background:#ecfdf5f2;border-color:#10b98180}.dark .demo-verdict[data-tone=bad]{color:#fecaca;background:#450a0ad9;border-color:#ef44448c}.dark .demo-verdict[data-tone=good]{color:#a7f3d0;background:#022c22d9;border-color:#10b9818c}.demo-hud{z-index:3;position:absolute;bottom:-9%;left:50%;translate:-50%}@media (width<=639px){.demo-hud{bottom:-22%}}.demo-hud-card{border:1px solid rgb(var(--fx-ink) / .1);min-width:min(15.5rem,86%);box-shadow:0 14px 34px -14px rgb(var(--fx-shadow) / .45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;background:#ffffffeb;border-radius:.9rem;flex-direction:column;gap:.4rem;padding:.6rem .9rem;font-size:.8rem;font-weight:500;display:flex}.dark .demo-hud-card{background:#0f172ae0;border-color:#ffffff1f;box-shadow:0 14px 34px -12px #000000bf}.demo-hud-bar{background:rgb(var(--fx-ink) / .12);border-radius:9999px;height:.3rem;overflow:hidden}.demo-hud-bar>i{transform-origin:0;background:linear-gradient(90deg, rgb(var(--fx-accent)), rgb(var(--fx-accent-2)));width:100%;height:100%;display:block;transform:scaleX(0)}@keyframes demo-progress{to{transform:scaleX(1)}}.demo-hud-bar.is-running>i{animation:demo-progress var(--scene-ms,9s) linear forwards}.demo-hud-bar.is-done>i{background:#10b981;transform:scaleX(1)}.showcase-tab{transition:transform .25s var(--fx-ease), background-color .25s, border-color .25s, color .25s, scale .12s ease-out;position:relative;overflow:hidden}.showcase-tab:active{scale:.97}.showcase-tab.is-active{color:#fff;background-color:#4f46e5;border-color:#4f46e5}.showcase-tab:after{content:"";transform-origin:0;opacity:.55;background:currentColor;height:2px;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}@keyframes showcase-timer{to{transform:scaleX(1)}}.showcase.is-auto .showcase-tab.is-active:after{animation:showcase-timer var(--tab-ms,6s) linear forwards}@media (hover:hover) and (pointer:fine){.showcase-tab:hover{transform:translateY(-2px)}.showcase.is-auto:hover .showcase-tab.is-active:after{animation-play-state:paused}}.showcase-panel[hidden]{display:none}@media (prefers-reduced-motion:reduce){.demo-hud-bar.is-running>i,.showcase.is-auto .showcase-tab.is-active:after{animation:none}.demo-eval>i{transition:none}.showcase-tab{transition:background-color .25s,border-color .25s,color .25s}.showcase-tab:hover{transform:none}.showcase-tab:active{scale:none}}