.th-box{aspect-ratio:1200/764;width:100%;position:relative;container-type:size}.th-box[data-box=phone]{aspect-ratio:414/824;max-width:340px;margin-inline:auto}.th-box[data-box=bare],.th-box[data-box=bare-auto]{aspect-ratio:2}.th-box[data-box=bare-phone]{aspect-ratio:390/720;max-width:380px;margin-inline:auto}@media (max-width:839.98px){.th-box[data-box=auto]{aspect-ratio:414/824;max-width:340px;margin-inline:auto}.th-box[data-box=stage]{aspect-ratio:1/1.08}.th-box[data-box=bare-auto]{aspect-ratio:390/720;max-width:380px;margin-inline:auto}}.th-frame{--fw:1200;--fh:720;--fc:44;--fb:0;--fr:12;--sr:0;--pm:0;--isl:0;--sb:0;--ow:calc(var(--fw) + 2 * var(--fb));--oh:calc(var(--fh) + var(--fc) + 2 * var(--fb));--k:min(tan(atan2(100cqw, calc(var(--ow) * 1px))), tan(atan2(100cqh, calc(var(--oh) * 1px))));width:calc(var(--ow) * 1px);height:calc(var(--oh) * 1px);transform-origin:0 0;transform:translate(calc((100cqw - var(--ow) * 1px * var(--k)) / 2), calc((100cqh - var(--oh) * 1px * var(--k)) / 2)) scale(var(--k));border-radius:calc(var(--fr) * 1px);-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0}.th-frame[data-auto=bare-auto]{--fh:600;--fc:0;--fr:0}@media (max-width:839.98px){.th-frame[data-auto=auto]{--fw:390;--fh:800;--fc:0;--fb:12;--fr:54;--sr:42;--pm:1;--isl:1;--sb:44}.th-frame[data-auto=bare-auto]{--fw:390;--fh:720}}.th-shell{border-radius:inherit;opacity:calc(1 - var(--pm));background:var(--md-surface-container-high);box-shadow:0 0 0 1px var(--md-outline-variant), 0 24px 48px -24px #00000047;position:absolute;inset:0}.th-bezel{border-radius:inherit;opacity:var(--pm);box-shadow:inset 0 0 0 1.5px #ffffff1a, 0 0 0 1px var(--md-outline-variant), 0 28px 56px -28px #00000073;background:#15171a;position:absolute;inset:0}.th-bar{inset-inline:0;height:calc(var(--fc) * 1px);opacity:max(0, calc(1 - var(--pm) * 1.6));position:absolute;top:0;overflow:hidden}.th-screen{left:calc(var(--fb) * 1px);top:calc((var(--fb) + var(--fc)) * 1px);width:calc(var(--fw) * 1px);height:calc(var(--fh) * 1px);border-radius:calc(var(--sr) * 1px) calc(var(--sr) * 1px) calc(max(var(--sr), var(--fr) - var(--fb) - 1) * 1px) calc(max(var(--sr), var(--fr) - var(--fb) - 1) * 1px);background:var(--md-surface);color:var(--md-on-surface);flex-direction:column;display:flex;position:absolute;overflow:hidden}.th-frame[data-bare] .th-screen{background:0 0}.th-status{height:calc(var(--sb) * 1px);opacity:var(--pm);flex-shrink:0;overflow:hidden}.th-safe{height:calc(var(--pm) * 22px);background:var(--md-surface-container);flex-shrink:0}.th-island{opacity:var(--isl)}.th-home{opacity:var(--pm)}.th-content{flex:1;min-height:0;position:relative;overflow:hidden;container-type:inline-size}.th-cursor{z-index:50;pointer-events:none;opacity:0;transition:opacity .2s;position:absolute;top:0;left:0}.th-cursor[data-on]{opacity:1}.th-cursor>[data-shape]{display:none;position:absolute}.th-cursor[data-mode=pointer]>[data-shape=pointer],.th-cursor[data-mode=text]>[data-shape=text],.th-cursor[data-mode=touch]>[data-shape=touch]{display:block}.th-cursor [data-shape=pointer]{filter:drop-shadow(0 2px 3px #00000047);transform-origin:3px 2px;transition:transform .1s ease-out;top:-2px;left:-3px}.th-cursor [data-shape=text]{top:-12px;left:-7px}.th-cursor [data-shape=touch]{background:#14161a52;border:2px solid #ffffffd9;border-radius:50%;width:34px;height:34px;transition:transform .12s ease-out;top:-17px;left:-17px;box-shadow:0 2px 8px #00000040}.th-cursor[data-down] [data-shape=pointer]{transform:scale(.86)}.th-cursor[data-down] [data-shape=touch]{transform:scale(.8)}.th-ring{border:2px solid var(--md-primary);opacity:0;border-radius:50%;width:44px;height:44px;position:absolute;top:-22px;left:-22px}.th-ring[data-pulse]{animation:.5s cubic-bezier(.2,0,0,1) forwards th-ring}@keyframes th-ring{0%{opacity:.6;transform:scale(.3)}to{opacity:0;transform:scale(1.3)}}.th-caret{vertical-align:-.2em;background:var(--md-primary);width:2px;height:1.15em;margin-left:1px;animation:1s step-end infinite th-blink;display:inline-block}@keyframes th-blink{50%{opacity:0}}.th-content [data-hover].state-layer:before,.th-content [data-hover] .state-layer:before{opacity:.08}.th-content [data-press]{transform:scale(.97)}.th-content [data-demo]{transition-property:transform,background-color,border-color,color,box-shadow,opacity}.th-spot{z-index:40;pointer-events:none;opacity:0;box-shadow:0 0 0 2px var(--md-primary), 0 0 0 9999px #0a0e1452;border-radius:12px;transition:opacity .25s,left .3s cubic-bezier(.2,0,0,1),top .3s cubic-bezier(.2,0,0,1),width .3s cubic-bezier(.2,0,0,1),height .3s cubic-bezier(.2,0,0,1);position:absolute}.th-tip{z-index:41;pointer-events:none;opacity:0;background:var(--md-inverse-surface);max-width:300px;color:var(--md-inverse-on-surface);box-shadow:var(--shadow-elevation-2);border-radius:8px;padding:8px 12px;font-size:.875rem;line-height:1.25rem;transition:opacity .25s,transform .25s cubic-bezier(.2,0,0,1);position:absolute;transform:translateY(4px)}.th-spot[data-on],.th-tip[data-on]{opacity:1;transform:none}.th-root[data-paused] .th-frame *,.th-root[data-paused] .th-frame :before,.th-root[data-paused] .th-frame :after{animation-play-state:paused!important}.th-fade{transition:opacity .12s linear}@media (prefers-reduced-motion:reduce){.th-caret{animation:none}}