html{font-size:62.5%}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#f8f9fa;color:#212529;font-size:1.6rem;line-height:1.5;scrollbar-width:none}body::-webkit-scrollbar{display:none}.button-wrap-link{display:flex;text-decoration:none}.app-container{width:100%;padding:0}.icon-btn{display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:.4rem;background:transparent;cursor:pointer;transition:all .15s}.icon-btn:hover{background:#f1f5f9;border-color:#e2e8f0}.icon-btn--sm{padding:.3rem}.icon-btn--md{padding:.5rem}.icon-btn--lg{padding:.7rem}.tooltip{position:relative;display:inline-flex}.tooltip:after{content:attr(data-label);position:absolute;background:#0f172a;color:#f8fafc;font-size:1.2rem;font-weight:500;white-space:nowrap;padding:.4rem .8rem;border-radius:.6rem;pointer-events:none;opacity:0;transition:opacity .15s ease,transform .15s ease;z-index:100}.tooltip:before{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity .15s ease,transform .15s ease;z-index:101}.tooltip:hover:after,.tooltip:hover:before{opacity:1}.tooltip--top:after{bottom:calc(100% + .6rem);left:50%;transform:translate(-50%) translateY(.4rem)}.tooltip--top:before{bottom:calc(100% + .1rem);left:50%;transform:translate(-50%) translateY(.4rem);border:.5rem solid transparent;border-top-color:#0f172a;border-bottom:0}.tooltip--top:hover:after{transform:translate(-50%) translateY(0)}.tooltip--top:hover:before{transform:translate(-50%) translateY(0)}.tooltip--bottom:after{top:calc(100% + .6rem);left:50%;transform:translate(-50%) translateY(-.4rem)}.tooltip--bottom:before{top:calc(100% + .1rem);left:50%;transform:translate(-50%) translateY(-.4rem);border:.5rem solid transparent;border-bottom-color:#0f172a;border-top:0}.tooltip--bottom:hover:after{transform:translate(-50%) translateY(0)}.tooltip--bottom:hover:before{transform:translate(-50%) translateY(0)}.tooltip--left:after{right:calc(100% + .6rem);top:50%;transform:translateY(-50%) translate(.4rem)}.tooltip--left:before{right:calc(100% + .1rem);top:50%;transform:translateY(-50%) translate(.4rem);border:.5rem solid transparent;border-left-color:#0f172a;border-right:0}.tooltip--left:hover:after{transform:translateY(-50%) translate(0)}.tooltip--left:hover:before{transform:translateY(-50%) translate(0)}.tooltip--right:after{left:calc(100% + .6rem);top:50%;transform:translateY(-50%) translate(-.4rem)}.tooltip--right:before{left:calc(100% + .1rem);top:50%;transform:translateY(-50%) translate(-.4rem);border:.5rem solid transparent;border-right-color:#0f172a;border-left:0}.tooltip--right:hover:after{transform:translateY(-50%) translate(0)}.tooltip--right:hover:before{transform:translateY(-50%) translate(0)}.level-card{position:relative;border:.1rem solid #e2e8f0;padding:1.8rem 1.5rem 1.5rem;border-radius:2rem;transition:all .2s ease;background-color:#fff;overflow:visible;cursor:pointer}.level-card:hover{box-shadow:0 .4rem 1.6rem #0000001a;border-color:#cbd5e1}.level-card__number{position:absolute;top:1rem;left:1rem;width:2.4rem;height:2.4rem;border-radius:50%;background:#f1f5f9;border:.1rem solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#94a3b8;line-height:1;-webkit-user-select:none;user-select:none}.level-card__fold{position:absolute;top:0;right:0;width:4rem;height:4rem;pointer-events:none;overflow:hidden;border-top-right-radius:2rem}.level-card__fold:before{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 4rem 4rem 0;border-color:transparent #475569 transparent transparent}.level-card__fold-text{position:absolute;left:67%;top:33%;transform:translate(-50%,-50%) rotate(45deg);color:#f8fafc;font-size:.9rem;font-weight:700;line-height:1;white-space:nowrap;z-index:1;-webkit-user-select:none;user-select:none}.level-card__title{margin:.6rem 0 .3rem;font-size:1.5rem;font-weight:600;color:#0f172a;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.level-card__subtitle{color:#64748b;font-size:1.3rem;margin-bottom:.8rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.level-card__stars{display:flex;justify-content:center;gap:.2rem;margin-bottom:.6rem}.level-card__stars--empty{visibility:hidden}.level-card__star{fill:none;stroke:#cbd5e1;stroke-width:1.5}.level-card__star--filled{fill:#0f172a;stroke:#0f172a}.level-card__lock{position:absolute;top:.9rem;right:.9rem;color:#94a3b8;line-height:0}.level-card--locked{background-color:#f8fafc}.level-card--locked .level-card__title{color:#94a3b8}.level-card--locked .level-card__subtitle{color:#cbd5e1}.level-card__record{position:absolute;bottom:1.2rem;right:1.2rem}.level-card__record .icon-btn:disabled{opacity:.25;cursor:default}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #0f172a;border-radius:.4rem;background:#0f172a;color:#fff;white-space:nowrap;cursor:pointer;transition:all .15s}.btn:hover{background:#1e293b;border-color:#1e293b}.btn--sm{padding:.3rem .7rem;font-size:1.2rem}.btn--md{padding:.5rem 1.2rem;font-size:1.3rem}.btn--lg{padding:.7rem 1.8rem;font-size:1.5rem}.btn--light{background:#fff;color:#334155;border-color:#cbd5e1}.btn--light:hover{background:#f1f5f9;border-color:#94a3b8}.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.btn--pause{color:#fff;border-color:transparent;animation:btn-pause-bg 2s ease infinite}.btn--pause:hover{border-color:transparent}@keyframes btn-pause-bg{0%,to{background-color:#0f172a}50%{background-color:#64748b}}.modal-overlay{position:fixed;inset:0;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1.5rem;animation:fadeIn .2s ease-out}.modal{background-color:var(--color-surface, #fff);border-radius:1.5rem;box-shadow:0 10px 30px #00000080;display:flex;flex-direction:column;width:100%;max-width:480px;max-height:90vh;animation:slideUp .3s cubic-bezier(.16,1,.3,1);overflow:hidden}.modal--sm{max-width:320px}.modal--md{max-width:480px}.modal--lg{max-width:640px}.modal--auto{max-width:auto}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.75rem 1rem;flex-shrink:0}.modal__header-content{flex:1;display:flex;align-items:center;gap:.75rem}.modal__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--color-text-primary, #0f172a)}.modal__close-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;background:transparent;color:var(--color-text-tertiary, #94a3b8);cursor:pointer;border-radius:.5rem;transition:all .2s ease}.modal__close-btn:hover{background-color:var(--color-surface-hover, #f1f5f9);color:var(--color-text-primary, #0f172a)}.modal__body{padding:0 1.75rem 1.5rem;overflow-y:auto;color:var(--color-text-secondary, #334155);font-size:1rem;line-height:1.6;display:flex;flex-direction:column;gap:1.25rem}.modal__body::-webkit-scrollbar{width:6px}.modal__body::-webkit-scrollbar-track{background:transparent}.modal__body::-webkit-scrollbar-thumb{background:var(--color-border, #e2e8f0);border-radius:3px}.modal__footer{display:flex;align-items:center;gap:.75rem;padding:1rem 1.75rem 1.5rem;flex-shrink:0}.modal__footer--left{justify-content:flex-start}.modal__footer--center{justify-content:center}.modal__footer--right{justify-content:flex-end}.modal__footer--between{justify-content:space-between}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.add-level-modal__form{display:flex;flex-direction:column;height:100%;flex:1;min-height:0}.add-level-modal__body-override{padding-top:0;flex:1}.add-level-modal__field{display:flex;flex-direction:column;gap:.6rem}.add-level-modal__field--grow{flex:1;min-height:16rem;display:flex;flex-direction:column}.add-level-modal__label{font-size:1.3rem;font-weight:600;color:#334155}.add-level-modal__required{color:#ef4444;margin-left:.2rem}.add-level-modal__optional{font-weight:400;color:#94a3b8;font-size:1.2rem;margin-left:.3rem}.add-level-modal__input{height:3.8rem;border:1px solid #e2e8f0;border-radius:.6rem;padding:0 1.2rem;font-size:1.4rem;font-family:inherit;color:#0f172a;outline:none;background:#f8fafc;transition:border-color .12s}.add-level-modal__input::placeholder{color:#cbd5e1}.add-level-modal__input:focus{border-color:#94a3b8;background:#fff}.add-level-modal__textarea{flex:1;border:1px solid #e2e8f0;border-radius:.6rem;padding:1rem 1.2rem;font-size:1.4rem;font-family:inherit;color:#0f172a;outline:none;background:#f8fafc;resize:none;line-height:1.7;transition:border-color .12s;min-height:14rem}.add-level-modal__textarea::placeholder{color:#cbd5e1}.add-level-modal__textarea:focus{border-color:#94a3b8;background:#fff}.add-level-modal__btn{height:3.8rem;padding:0 2rem;border-radius:.7rem;font-size:1.4rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .12s,opacity .12s}.add-level-modal__btn--cancel{background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b}.add-level-modal__btn--cancel:hover{background:#e2e8f0}.add-level-modal__btn--submit{background:#0f172a;border:1px solid transparent;color:#fff}.add-level-modal__btn--submit:hover:not(:disabled){opacity:.85}.add-level-modal__btn--submit:disabled{opacity:.35;cursor:not-allowed}.custom-level-group__legend{display:flex;align-items:center;gap:.8rem}.custom-level-group__add-btn{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid #cbd5e1;background:#fff;color:#64748b;cursor:pointer;transition:border-color .12s,background .12s,color .12s;flex-shrink:0}.custom-level-group__add-btn:hover{border-color:#0f172a;background:#0f172a;color:#fff}.custom-level-group__card-wrap{position:relative}.custom-level-group__card-wrap:hover .custom-level-group__delete-btn{opacity:1}.custom-level-group__delete-btn{position:absolute;top:.8rem;right:.8rem;z-index:10;display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:.5rem;border:none;background:#f1f5f9;color:#94a3b8;cursor:pointer;opacity:0;transition:opacity .15s,background .12s,color .12s}.custom-level-group__delete-btn:hover{background:#fee2e2;color:#ef4444}.custom-level-group__empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:4rem 0;color:#94a3b8}.custom-level-group__empty p{font-size:1.4rem;margin:0}.custom-level-group__empty-add{font-size:1.4rem;font-weight:600;color:#0f172a;background:none;border:1.5px dashed #cbd5e1;border-radius:.8rem;padding:.8rem 2rem;cursor:pointer;transition:border-color .12s,background .12s;font-family:inherit}.custom-level-group__empty-add:hover{border-color:#0f172a;background:#f8fafc}.popover{position:relative;display:inline-flex;align-items:center}.popover__trigger{display:inline-flex;align-items:center;cursor:pointer;flex:1;min-width:0}.popover__trigger .btn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popover--sm{height:2.4rem}.popover--md{height:3.2rem}.popover--lg{height:4rem}.popover__content{position:absolute;top:calc(100% + .6rem);left:0;z-index:100;min-width:30rem;max-height:36rem;overflow-y:auto;background:#fff;border:1px solid #e2e8f0;border-radius:.8rem;box-shadow:0 4px 24px #0000001f}.popover__title{padding:1rem 1.2rem .6rem;font-size:1.1rem;font-weight:600;color:#94a3b8}.popover__list{list-style:none;margin:0;padding:0 .4rem .4rem}.popover__item{display:flex;align-items:center;gap:.8rem;padding:.7rem .8rem;border-radius:.5rem;cursor:pointer;transition:background .12s}.popover__item:hover,.popover__item--active{background:#f1f5f9}.popover__item--active:hover{background:#e2e8f0}.toggle{position:relative;width:3.5rem;height:2.1rem;border-radius:1.05rem;border:none;background:#cbd5e1;cursor:pointer;padding:0;transition:background .22s cubic-bezier(.4,0,.2,1);flex-shrink:0}.toggle--on{background:#22c55e}.toggle--disabled{opacity:.45;cursor:not-allowed}.toggle__thumb{position:absolute;top:.25rem;left:.25rem;width:1.6rem;height:1.6rem;border-radius:50%;background:#fff;box-shadow:0 .1rem .4rem #00000038;transition:transform .22s cubic-bezier(.4,0,.2,1)}.toggle--on .toggle__thumb{transform:translate(1.4rem)}.settings-panel__popover{height:auto}.settings-panel__popover .popover__trigger{flex:0}.settings-panel__content{right:0;left:auto;min-width:26rem;top:calc(100% + .8rem)}.settings-panel__avatar{width:3.2rem;height:3.2rem;border-radius:50%;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .15s;flex-shrink:0}.settings-panel__avatar:hover{opacity:.8}.settings-panel__profile{display:flex;gap:1.2rem;align-items:center;padding:1.6rem 1.2rem 1.2rem}.settings-panel__avatar-large{width:4.4rem;height:4.4rem;border-radius:50%;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:600;flex-shrink:0;-webkit-user-select:none;user-select:none}.settings-panel__name-section{display:flex;flex-direction:column;gap:.4rem;min-width:0;flex:1}.settings-panel__name-row{display:flex;align-items:center;gap:.5rem}.settings-panel__name{font-size:1.5rem;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settings-panel__edit-btn{display:flex;align-items:center;border:none;background:transparent;cursor:pointer;color:#94a3b8;padding:.2rem;border-radius:.3rem;transition:color .12s,background .12s;flex-shrink:0}.settings-panel__edit-btn:hover{color:#0f172a;background:#f1f5f9}.settings-panel__name-input{font-size:1.5rem;font-weight:600;color:#0f172a;border:1px solid #94a3b8;border-radius:.4rem;padding:.2rem .6rem;outline:none;background:#f8fafc;width:100%;font-family:inherit}.settings-panel__name-input:focus{border-color:#0f172a}.settings-panel__name-hint{font-size:1.2rem;color:#94a3b8;margin:0}.settings-panel__divider{height:1px;background:#e2e8f0;margin:0 1.2rem}.settings-panel__options{padding:.8rem 1.2rem}.settings-panel__option-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.5rem 0}.settings-panel__option-label{font-size:1.3rem;color:#334155;font-weight:500}.settings-panel__select{appearance:none;background:#f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right .8rem center;border:1px solid #e2e8f0;border-radius:.5rem;padding:.4rem 2.4rem .4rem .8rem;font-size:1.3rem;font-family:inherit;color:#0f172a;cursor:pointer;outline:none;transition:border-color .12s}.settings-panel__select:focus,.settings-panel__select:hover{border-color:#94a3b8}.settings-panel__login-section{padding:1.2rem 1.2rem 1.4rem;display:flex;flex-direction:column;gap:1rem}.settings-panel__login-desc{font-size:1.2rem;color:#64748b;margin:0;line-height:1.6}.settings-panel__login-btn{height:3.2rem;padding:0 1.6rem;border-radius:.6rem;font-size:1.3rem;font-weight:600;background:#f1f5f9;border:1px solid #e2e8f0;color:#94a3b8;cursor:not-allowed;font-family:inherit;width:100%}.settings-panel__login-btn:disabled{opacity:.7}.group-nav__list{list-style:none;margin:0;padding:0}.group-nav__btn{display:flex;align-items:center;gap:1rem;width:100%;background:none;border:none;cursor:pointer;padding:.4rem 0}.group-nav__dot{flex-shrink:0;width:.7rem;height:.7rem;border-radius:50%;background:#cbd5e1;transition:background .2s,transform .2s}.group-nav__dot--active{background:#0f172a;transform:scale(1.3);box-shadow:0 0 0 .25rem #0003}.group-nav__dot--completed{background:#475569}.group-nav__label{flex:1;font-size:1.2rem;font-weight:500;color:#0f172a;white-space:nowrap;text-align:right;transition:opacity .2s}.group-nav__label--dim{opacity:.25}.group-nav__label:hover{opacity:1}.group-nav--side{display:none}@media(min-width:768px){.group-nav--side{display:flex;flex-direction:column;align-items:flex-end;gap:1.2rem;position:fixed;top:2.4rem;right:2.4rem;transform:none;z-index:50;width:14rem}.group-nav--side .group-nav__nav{width:100%;min-height:0}.group-nav--side .group-nav__viewport{width:100%;max-height:calc(100vh - 12rem);overflow:hidden}.group-nav--side .group-nav__viewport--fade{mask-image:linear-gradient(to bottom,transparent 0,black 2.4rem,black calc(100% - 2.4rem),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 2.4rem,black calc(100% - 2.4rem),transparent 100%)}.group-nav--side .group-nav__list{display:flex;flex-direction:column;gap:.56rem;transition:transform .4s cubic-bezier(.4,0,.2,1);will-change:transform;padding-right:.6rem;padding-top:50vh;padding-bottom:50vh}.group-nav--side .group-nav__item{position:relative;isolation:isolate}.group-nav--side .group-nav__item:not(:last-child):after{content:"";position:absolute;right:.3rem;top:50%;width:.1rem;height:calc(100% + .56rem);background:#cbd5e1;z-index:-1}}.group-nav--bottom{display:block;position:fixed;bottom:0;left:0;right:0;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:.1rem solid #e2e8f0;padding:1rem 2rem;z-index:50}.group-nav--bottom .group-nav__list{display:flex;flex-direction:row;gap:0;justify-content:center;align-items:center;flex-wrap:wrap;row-gap:.8rem}.group-nav--bottom .group-nav__btn{padding:.6rem .5rem}@media(min-width:768px){.group-nav--bottom{display:none}}.resume-modal__body-override{padding-top:2rem}.resume-modal__message{font-size:1.5rem;color:#0f172a;line-height:1.7;text-align:center;margin:0}.resume-modal__message strong{font-weight:600}.dashboard{padding:2rem 2rem 6rem}@media(min-width:768px){.dashboard{padding-bottom:90vh;padding-right:18.4rem}}.dashboard__header{display:flex;align-items:center;gap:1.6rem;margin-bottom:3rem}.dashboard__header-actions{margin-left:auto}.dashboard__title{font-size:4rem;font-weight:200;color:#0f172a}.dashboard__group{border:.5rem solid #e2e8f0;border-radius:4rem;padding:2rem;margin:2rem 0;min-width:0;transition:border-color .3s ease}.dashboard__group--perfect{border-color:#0f172a}.dashboard__group-title{display:flex;align-items:center;gap:.6rem;font-size:1.6rem;font-weight:600;color:#334155;padding:0 .8rem}.dashboard__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(22rem,1fr));gap:1.6rem}.dashboard__modal-body-override{padding-top:2rem}.dashboard__modal-message{font-size:1.5rem;color:#0f172a;line-height:1.6;text-align:center;margin:0}.group-achievement{display:inline-flex;align-items:center;gap:.1rem;color:#0f172a;line-height:0}.group-achievement--unlocked{opacity:.7}.typing-char{display:inline-flex;flex-direction:column;align-items:stretch;text-align:center;font-family:inherit;font-size:3.2rem;line-height:1.2;transition:all .1s ease}.typing-char--non-en{min-width:.4em}.typing-char__target{padding-bottom:.4rem;border-bottom:.3rem solid transparent;transition:inherit;white-space:pre-wrap}.typing-char__input{font-size:2.4rem;color:#000;height:3rem;display:flex;align-items:center;justify-content:center;margin-top:.8rem;white-space:pre-wrap}.typing-char--state-pending .typing-char__target,.typing-char--state-active .typing-char__target{color:#000}.typing-char--state-completed .typing-char__target{color:#888}.typing-char--status-none .typing-char__target{border-bottom-color:transparent}.typing-char--status-correct .typing-char__target{border-bottom-color:#0bf}.typing-char--status-incorrect .typing-char__target{border-bottom-color:#ff2400}.typing-char--status-corrected .typing-char__target{border-bottom-color:orange}.typing-char--state-active .typing-char__target{position:relative}.typing-char--state-active .typing-char__target:after{content:"";position:absolute;left:0;bottom:-.3rem;width:100%;height:.3rem;background-color:#0003;animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.button-wrap-link{text-decoration:none;color:inherit}.typing-stats__content .button-wrap-link{position:absolute;left:2rem}.typing-stats{width:100%;font-family:Inter,sans-serif}.typing-stats__content{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:0;padding:.8rem 1.2rem;border-bottom:1px solid #e2e8f0;justify-content:center;overflow:hidden}@media(min-width:64em){.typing-stats__content{flex-wrap:nowrap;height:5rem;padding:0 2rem}}.typing-stats__content>*:not(.replay-board__progress-fill):not(.button-wrap-link){position:relative}.typing-stats__mode-toggle{position:static;margin-right:auto}@media(min-width:64em){.typing-stats__mode-toggle{position:absolute;left:2rem;margin-right:0}}.typing-stats__item{display:flex;align-items:center;gap:.5rem;flex-shrink:0;padding:0 1rem}@media(min-width:64em){.typing-stats__item{padding:0 1.4rem}}.typing-stats__item:first-child{padding-left:0}.typing-stats__item:last-child{padding-right:0}.typing-stats__label{font-size:1.1rem;font-weight:500;color:#94a3b8;white-space:nowrap}.typing-stats__value-group{display:flex;align-items:baseline;gap:.3rem}.typing-stats__unit{font-size:1.1rem;font-weight:600;color:#64748b;white-space:nowrap}.typing-stats__divider{flex-shrink:0;width:1px;height:1.6rem;background-color:#e2e8f0}.typing-stats__dot{width:.6rem;height:.6rem;border-radius:50%;background-color:#cbd5e1;flex-shrink:0;transition:background-color .3s ease}.typing-stats--active .typing-stats__dot{background-color:#ef4444;animation:pulse-red 1.5s infinite}.typing-stats__pb{font-size:1rem;font-weight:500;color:#94a3b8;background-color:#f1f5f9;border:1px solid #e2e8f0;border-radius:.4rem;padding:.15rem .5rem;white-space:nowrap;transition:color .3s ease,background-color .3s ease,border-color .3s ease}.typing-stats__pb--beating{color:#16a34a;background-color:#f0fdf4;border-color:#bbf7d0}.rolling-number{display:flex;align-items:center;height:1.6rem;overflow:hidden;font-size:1.7rem;font-weight:800;color:#0f172a}.rolling-number__digit-container{width:1ch;height:1.6rem;position:relative;overflow:hidden}.rolling-number__digit-strip{display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.45,.05,.55,.95)}.rolling-number__digit{height:2rem;display:flex;justify-content:center;align-items:center}@keyframes pulse-red{0%{transform:scale(.95);box-shadow:0 0 #ef444499}70%{transform:scale(1);box-shadow:0 0 0 5px #ef444400}to{transform:scale(.95);box-shadow:0 0 #ef444400}}.keyboard{-webkit-user-select:none;user-select:none;width:100%}.keyboard svg{display:block}.keyboard__layout rect{stroke:#d1d5db;fill:#fff;transition:fill 1.5s,stroke .3s,stroke-width .3s}.keyboard__layout rect.keyboard__key--next{fill:#0f1e5047;stroke:#0f1e5099;transition:fill 0s,stroke 0s,stroke-width 0s}.keyboard__layout rect.keyboard__key--status-correct{fill:#fff!important;stroke:#0f1e5080!important}.keyboard__layout rect.keyboard__key--status-incorrect{fill:#fff!important;stroke:#ff2400!important;stroke-width:.4rem!important}.keyboard__layout>rect:first-child{fill:#f8fafc;stroke:#e2e8f0}.keyboard__labels{fill:#1e293b;font-family:inherit;pointer-events:none}.keyboard__labels text{transition:fill .1s}.keyboard__labels .keyboard__label--small{font-size:1rem;font-weight:600}.snackbar{position:absolute;bottom:2rem;left:50%;transform:translate(-50%) translateY(0);padding:1rem 1.6rem;background:#0f172a;color:#fff;font-size:1.4rem;border-radius:.8rem;white-space:nowrap;pointer-events:none;opacity:1;animation:snackbar-in .18s ease,snackbar-out .22s ease 1.8s forwards}@keyframes snackbar-in{0%{opacity:0;transform:translate(-50%) translateY(.8rem)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes snackbar-out{to{opacity:0;transform:translate(-50%) translateY(.8rem)}}.typing-board{display:flex;flex-direction:column;width:100%;flex:1;min-height:0;background-color:#fff;overflow:hidden}@media(min-width:64em){.typing-board{flex:none;border-radius:1.6rem;box-shadow:0 4px 25px -5px #0000001a,0 1px 4px #0000001a}}.typing-board__hidden-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.typing-board__display{position:relative;flex:1;min-height:0;padding:2rem;border:.5rem solid #fff;background-color:#fff;overflow-y:auto}@media(min-width:40em){.typing-board__display{padding:3rem 4rem}}@media(min-width:64em){.typing-board__display{flex:none;height:36rem}}.typing-board__display::-webkit-scrollbar{width:6px}.typing-board__display::-webkit-scrollbar-track{background:transparent}.typing-board__display::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:3px}.typing-board__display::-webkit-scrollbar-thumb:hover{background:#cbd5e1}.typing-board__chars{display:flex;flex-direction:column;gap:3rem;width:100%}.typing-board__line{display:flex;flex-wrap:wrap;row-gap:3rem}.typing-board__ime-warn{position:relative;height:0}.typing-board__ime-warn .snackbar{bottom:auto;top:1rem}.typing-board__keyboard-area{background-color:#f1f5f9;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;align-items:center;width:100%;flex-shrink:0}.typing-board__keyboard-wrap{display:flex;justify-content:center;width:100%;padding:1rem}@media(min-width:40em){.typing-board__keyboard-wrap{padding:1rem 2rem}}@media(min-width:64em){.typing-board__keyboard-wrap{padding:1rem 3rem}}.result-modal__body-override{padding-top:3.2rem;display:flex;flex-direction:column;align-items:center;gap:3.2rem}.result-modal__stars{display:flex;gap:.8rem;align-items:flex-end}.result-modal__stars .result-modal__star:nth-child(2){transform:translateY(-1rem)}.result-modal__star{font-size:5.6rem;color:transparent;-webkit-text-stroke:.2rem #0f172a}.result-modal__star--filled{color:#0f172a;animation:star-pop .4s cubic-bezier(.34,1.56,.64,1) both}.result-modal__stats{display:flex;align-items:center;gap:2.4rem}.result-modal__stat{display:flex;flex-direction:column;align-items:center;gap:.4rem}.result-modal__stat-value{font-size:3.2rem;font-weight:200;color:#0f172a;line-height:1}.result-modal__stat-value small{font-size:1.6rem;font-weight:500;color:#64748b}.result-modal__stat-label{font-size:1.2rem;color:#94a3b8;font-weight:500}.result-modal__stat-divider{width:1px;height:4rem;background:#e2e8f0}.result-modal__nudge{font-size:1.3rem;color:#000;text-align:center;margin-bottom:-1.6rem}.result-modal__actions{display:flex;gap:1rem}.result-modal__actions .btn--play{display:flex;align-items:center;gap:.8rem}.result-modal__enter-hint{font-size:1rem;opacity:.6;border:1px solid rgba(255,255,255,.4);border-radius:.3rem;padding:.1rem .4rem;animation:enter-hint-in .3s ease both;margin-left:.4rem}@keyframes enter-hint-in{0%{opacity:0;transform:translate(-4px)}to{opacity:.6;transform:translate(0)}}@keyframes star-pop{0%{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.level-player{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;padding:0 1.6rem}@media(min-width:64em){.level-player{height:auto;overflow:visible;padding:0 4rem}}.level-player__header{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:1rem 0;color:#000;gap:1rem}.level-player__title-wrapper{display:flex;align-items:center;gap:1rem;min-width:0}.level-player__title-wrapper .group-badge{background-color:#000;line-height:1;font-size:1.2rem;padding:.5rem 1rem;color:#fff;border-radius:.4rem;text-transform:uppercase}.level-player__title{font-weight:400;font-size:1.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:40em){.level-player__title{font-size:1.5rem}}.level-player__info{font-size:1.2rem;color:#777}.level-player__back-link{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:#666;transition:all .2s ease}.level-player__back-link:hover{color:#000}.level-player__back-link svg{width:2rem;height:2rem}.level-player__board-container{display:flex;justify-content:center;flex:1;min-height:0}@media(min-width:64em){.level-player__board-container{flex:none}}.level-player__error{display:flex;justify-content:center;align-items:center;height:300px;font-size:1.8rem;color:#ff6b6b}.replay-board__controls{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;padding:.8rem 1.2rem;width:100%;border-bottom:1px solid #e2e8f0}@media(min-width:64em){.replay-board__controls{flex-wrap:nowrap;padding:0 2rem;height:5rem}}.replay-board__controls>*:not(.replay-board__progress-fill){position:relative}.replay-board__buttons{display:flex;align-items:center;gap:.6rem;height:2.4rem}.replay-board__speed{display:flex;gap:.3rem}.replay-board__speed-btn{padding:.3rem .7rem;border:1px solid #e2e8f0;border-radius:.4rem;background:#fff;font-size:1.2rem;cursor:pointer;transition:all .15s}.replay-board__speed-btn--active{background:#1e293b;color:#fff;border-color:#1e293b}.replay-board__speed-btn:hover:not(.replay-board__speed-btn--active){background:#f1f5f9}.replay-board__progress-fill{position:absolute;top:0;left:0;height:100%;background:#e2e8f0;will-change:width;pointer-events:none;transition:width .25s cubic-bezier(.34,1.56,.64,1)}.replay-board__stats-summary{display:flex;gap:1.2rem;font-size:1.2rem;color:#64748b}.replay-board__stats-summary span{white-space:nowrap}.replay-board__left{display:flex;align-items:center;gap:.4rem;width:31rem}.replay-board__popover-label{flex:1;display:flex;align-items:center;gap:.4rem;font-size:1.2rem;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:25rem}.replay-board__popover-stats{font-size:1.1rem;color:#94a3b8;white-space:nowrap}.replay-board__popover-bookmark{flex-shrink:0}.replay-board__latest-badge{display:inline-block;margin-left:.5rem;padding:.1rem .5rem;font-size:1rem;font-weight:600;color:#334155;background:#f1f5f9;border:1px solid #94a3b8;border-radius:.3rem;white-space:nowrap}
