:root{--color-ff: #FFFFFF;--color-ff-100: #FFFFFFFF;--color-ff-85: #FFFFFFDD;--color-ff-70: #FFFFFFB3;--color-ff-50: #FFFFFF80;--color-ff-20: #FFFFFF33;--color-f5: #F5F6F7;--color-f1: #F1F2F3;--color-ef: #EFEFF0;--color-e5: #E5E6E7;--color-d5: #D5D6D7;--color-00: #000000;--color-00-100: #000000FF;--color-00-90: #000000E6;--color-00-70: #000000B3;--color-00-40: #00000066;--color-00-20: #00000033;--color-00-10: #0000001A;--color-00-0: #00000000;--color-123: #112233;--color-123-100: #112233FF;--color-123-70: #112233B3;--color-123-40: #11223366;--color-123-20: #11223333;--color-123-10: #1122331A;--color-123-0: #11223300;--color-C30-1: #CC3300;--color-E03-1: #E03;--color-0C3-1: #00CC33;--c-bg-0: var(--color-f5, #F5F6F7);--c-bg-1: var(--color-e5, #E5E6E7);--c-bg-2: var(--color-d5, #D5D6D7);--c-bg-trans-1: var(--color-ff-85,rgba(130, 61, 61, .87));--c-bg-trans-2: var(--color-ff-70, #FFFFFFB3);--c-bg-trans-3: var(--color-ff-40, #FFFFFF66);--c-bg-trans-4: var(--color-ff-20, #FFFFFF33);--c-bg-trans-5: var(--color-ff-10, #FFFFFF1A);--c-bg-r-0: var(--color-00, #000000);--c-bg-r-1: var(--color-00-90, #000000E6);--c-bg-r-2: var(--color-00-70, #000000B3);--c-bg-r-3: var(--color-00-40, #00000066);--c-bg-r-4: var(--color-00-20, #00000033);--c-bg-r-5: var(--color-00-10, #0000001A);--c-bg-r-6: var(--color-00-05, #0000000D);--c-bg-r-9: var(--color-00-05, #0000000D);--c-fg-0: var(--color-00, #000000);--c-fg-1: var(--color-00-90, #000000E6);--c-fg-2: var(--color-00-70, #000000B3);--c-fg-3: var(--color-00-40, #00000066);--c-fg-4: var(--color-00-20, #00000033);--c-fg-5: var(--color-00-10, #0000001A);--c-fg-r-0: var(--color-ff, #FFFFFF);--c-fg-r-1: var(--color-ff-90, #FFFFFFE6);--c-fg-r-2: var(--color-ff-70, #FFFFFFB3);--c-fg-r-3: var(--color-ff-40, #FFFFFF66);--c-fg-r-4: var(--color-ff-20, #FFFFFF33);--c-fg-r-5: var(--color-ff-10, #FFFFFF1A);--c-border-0: rgba(0, 0, 0, .1);--c-danger-0: var(--color-E03-1, #E03);--c-positive-0: var(--color-0C3-1, #00CC33);--c-fav-0: #FFBF00;--c-like-0: #FF4800;--c-sync-0: #0099FF;--c-unsync-0: #F90;--c-com-green-0: #6FC;--c-tutorial-0: #FB3;--c-road-0: #303033;--c-road-1: #82848C;--c-road-2: #A1A6AF;--c-walkway-0: #A1A6AF;--c-walkway-t-5: #A1A6AF80;--cubic-in: cubic-bezier(.32, 0, .67, 0);--cubic-out: cubic-bezier(.33, 1, .68, 1);--cubic-in-out: cubic-bezier(.65, 0, .35, 1);--quart-out: cubic-bezier(.25, 1, .5, 1);--expo-out: cubic-bezier(.16, 1, .3, 1);--back-out: cubic-bezier(.34, 1.56, .64, 1);--z-scene: 1;--z-bg: 10;--z-content: 20;--z-nav: 100;--z-panel: 1000;--z-control: 10000;--z-model-panel: 10001;--s-radius-0: .0625rem;--s-radius-1: .3125rem;--s-radius-2: .5rem;--s-page-padding: .75rem;--s-panel-blur: 2.5rem;--s-space-0: .25rem;--s-space-1: .75rem;--s-space-2: 1.25rem;--s-1: .0625rem;--s-2: .125rem;--s-4: .25rem;--s-8: .5rem;--s-16: 1rem;--s-32: 2rem;--s-64: 4rem;--s-128: 8rem;--s-256: 16rem;--s-512: 32rem;--s-header-height: 4.5rem;--s-dock-height: 4.5rem;--s-footer-height: calc(2.25rem + env(safe-area-inset-bottom)) ;--s-footer-open-height: calc(11rem + env(safe-area-inset-bottom)) ;--s-aside-width: 22.5rem;--ani-fade-in: fade-in .3s var(--cubic-out)}@media (min-width: 50rem){:root{--s-footer-height: calc(2.25rem + env(safe-area-inset-bottom)) ;--s-footer-open-height: calc(11rem + env(safe-area-inset-bottom)) }}@keyframes fade-in{0%{opacity:0}to{opacity:1}}body{background-color:var(--c-bg-1);font-family:Space Mono,monospace;font-size:16px;margin:0}*,*:before,*:after{box-sizing:border-box}button,input,select,textarea{font-family:Space Mono,monospace}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-space-1);background:var(--btn-color-bg, transparent);border:none;outline:none;color:var(--btn-color-fg, var(--c-fg-0));cursor:pointer;white-space:nowrap;text-decoration:none}.btn strong{font-weight:700}.btn em{font-style:normal;text-transform:uppercase}.btn:hover{background:var(--btn-color-bg-active, var(--c-bg-0));color:var(--btn-color-fg-active, var(--c-fg-0))}.btn:disabled,.btn:disabled:hover,.btn:disabled:focus{background:var(--btn-color-bg-disabled, transparent);color:var(--btn-color-fg-disabled, var(--c-fg-3));cursor:not-allowed}.btn--reverse{--btn-color-fg: var(--btn-color-fg-reverse, var(--c-fg-r-0));--btn-color-fg-active: var(--c-fg-0);--btn-color-fg-disabled: var(--btn-color-fg-reverse-disabled, var(--c-fg-r-3))}.btn--bg{--btn-color-bg: var(--c-bg-0);--btn-color-fg: var(--c-fg-0);--btn-color-bg-active: var(--c-bg-0);--btn-color-fg-active: var(--c-fg-0);--btn-color-bg-disabled: var(--btn-color-bg);--btn-color-fg-disabled: var(--c-fg-3)}.btn--bg-reverse{--btn-color-bg: var(--c-bg-r-0);--btn-color-fg: var(--c-fg-r-0);--btn-color-bg-active: var(--c-bg-r-0);--btn-color-fg-active: var(--c-fg-r-0);--btn-color-bg-disabled: var(--c-bg-r-3);--btn-color-fg-disabled: var(--c-fg-r-3)}.btn--bg-danger{--btn-color-bg: var(--c-danger-0);--btn-color-fg: var(--c-fg-r-0);--btn-color-bg-active: var(--c-danger-0);--btn-color-fg-active: var(--c-fg-r-0)}.btn--size-s{font-size:.75rem;line-height:1rem;height:2.25rem;padding:.75rem 1rem;border-radius:var(--radius, 1.125rem)}.btn--size-m{font-size:.875rem;line-height:1rem;height:2.75rem;padding:1rem 1.25rem;border-radius:var(--radius, 1.375rem)}.btn--size-l{font-size:1rem;line-height:1.25rem;height:3.25rem;padding:1.25rem 1.5rem;border-radius:var(--radius, 1.625rem)}.btn[data-hint]:before{content:attr(data-hint);position:absolute;top:-1rem;left:50%;transform:translate(-50%,1rem) scale(.5);background-color:var(--c-walkway-0);color:var(--c-fg-r-0);font-size:.875rem;padding:.125rem .25rem;border-radius:var(--s-radius-1);width:fit-content;opacity:0;transition:opacity .15s,transform .15s var(--cubic-out);pointer-events:none}.btn[data-hint]:not(:disabled):hover:before{transform:translate(-50%) scale(1);opacity:1}.btn-group{display:flex;align-items:center;gap:.125rem;position:relative}.btn-group>.btn:not(:first-child){border-top-left-radius:var(--s-radius-1);border-bottom-left-radius:var(--s-radius-1)}.btn-group>.btn:not(:last-of-type){border-top-right-radius:var(--s-radius-1);border-bottom-right-radius:var(--s-radius-1)}.tab-group{display:flex;gap:.25rem;width:100%;padding:0 var(--s-page-padding);justify-content:var(--justify-content, space-evenly)}.tab-group__item{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;outline:none;color:var(--color-fg, var(--c-fg-0));font-size:.875rem;line-height:1rem;height:2.25rem;min-width:2.25rem;max-width:var(--item-max-width, unset);padding:0 var(--item-padding-inline, 1rem);border-radius:1.125rem;cursor:pointer;outline:1px solid transparent;outline-offset:4px;transition:outline 50ms var(--cubic-out),outline-offset .15s var(--cubic-out)}.tab-group__item:hover,.tab-group__item:focus{outline:1px solid var(--color-item-outline, var(--color-bg, var(--c-bg-0)));outline-offset:1px}.tab-group__item input[type=checkbox],.tab-group__item input[type=radio]{display:none}.tab-group__item--width{flex:none}.tab-group__item--active{background-color:var(--color-item-bg-active, var(--color-bg-active, var(--c-bg-0)));color:var(--color-item-fg-active, var(--color-fg-active, var(--c-fg-0)))}.tab-group__item:disabled,.tab-group__item:disabled:hover,.tab-group__item:disabled:focus,.tab-group__item--disabled,.tab-group__item--disabled:hover,.tab-group__item--disabled:focus{opacity:.5;cursor:not-allowed;outline:none}
