:root{--color-neutral-white: #fcfcfc;--color-neutral-black: #141414;--color-neutral-gray: #707070;--color-neutral-gray-light: #ebebeb;--color-brand-light: #f1e9ff;--color-brand-medium: #ddc1ff;--color-brand-dark: #b59cdd;--color-brand-accent: #ff542e;--color-accent-yellow: #f5f278;--color-accent-green: #64ba51;--font-family: "Inter", sans-serif;--font-heading-h1-size: 22px;--font-heading-h1-weight: 800;--font-heading-h1-line-height: 28px;--font-heading-h2-size: 18px;--font-heading-h2-weight: 800;--font-heading-h2-line-height: 24px;--font-heading-h3-size: 16px;--font-heading-h3-weight: 800;--font-heading-h3-line-height: 24px;--font-text-body-size: 16px;--font-text-body-weight: 400;--font-text-body-line-height: 20px;--font-text-caption-size: 14px;--font-text-caption-weight: 600;--font-text-caption-line-height: 20px;--font-text-attribute-size: 12px;--font-text-attribute-weight: 600;--font-text-attribute-line-height: 16px}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-family);background:var(--color-neutral-white);color:var(--color-neutral-black);-webkit-font-smoothing:antialiased}#root{min-height:100svh}h1,h2,h3,p{margin:0}.app{font-family:var(--font-family);display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;justify-content:center;background:var(--color-brand-medium)}.app-header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;width:100%;max-width:600px}@media (min-width: 600px){.app-header-inner{padding-left:0;padding-right:0}}.header-nav{display:flex;align-items:center;gap:12px}.rules-btn-wrap{position:relative}.rules-tooltip{position:absolute;top:calc(100% + 8px);right:0;width:max-content;background:var(--color-neutral-black);color:var(--color-neutral-white);font-family:var(--font-family);font-size:var(--font-text-attribute-size);font-weight:var(--font-text-attribute-weight);line-height:var(--font-text-attribute-line-height);padding:8px 12px;border-radius:8px;pointer-events:none;z-index:100;text-align:left}.rules-tooltip:before{content:"";position:absolute;bottom:100%;right:10px;border:6px solid transparent;border-bottom-color:var(--color-neutral-black)}.app-logo{height:38px;width:auto;display:block;color:#fcfcfc}@keyframes logo-heartbeat{0%{transform:scale(1)}12%{transform:scale(1.28)}24%{transform:scale(1)}36%{transform:scale(1.16)}50%{transform:scale(1)}to{transform:scale(1)}}.logo-heart-beating{transform-origin:32px 19px;animation:logo-heartbeat .75s ease-in-out}.app-main{display:flex;flex-direction:column;align-items:center;flex:1;padding:20px;background:var(--color-brand-light)}@media (min-width: 600px){.app-main{padding-top:64px}}.attempt-row{display:flex;align-items:center;gap:4px;padding-bottom:8px;width:100%;max-width:600px;font-size:var(--font-heading-h3-size);font-weight:var(--font-heading-h3-weight);line-height:var(--font-heading-h3-line-height);color:var(--color-neutral-black);white-space:nowrap;flex-shrink:0}.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:14px 32px;background:var(--color-brand-accent);color:var(--color-neutral-white);font-family:var(--font-family);font-size:var(--font-text-caption-size);font-weight:var(--font-text-caption-weight);line-height:var(--font-text-caption-line-height);border:none;border-radius:12px;cursor:pointer;box-shadow:2px 2px 0 0 var(--color-neutral-black);transform:translate(0);transition:box-shadow .1s ease,transform .1s ease;white-space:nowrap}.btn-primary:hover{box-shadow:none;transform:translate(2px,2px)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:2px 2px 0 0 var(--color-neutral-black);transform:translate(0)}.nav-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px;background:var(--color-brand-dark);border:none;border-radius:900px;cursor:pointer;color:var(--color-neutral-white);transition:background .15s ease}.nav-btn:hover{background:var(--color-brand-medium)}.search-section{display:flex;flex-direction:column;padding-bottom:32px;width:100%;max-width:600px}@media (min-width: 600px){.search-section{padding-bottom:40px}}.search-container{position:relative}.search-input-wrapper{display:flex;align-items:center;gap:8px;height:56px;padding:0 20px;background:var(--color-neutral-white);border:2px solid var(--color-neutral-black);border-radius:12px;transition:border-color .15s}.search-input-wrapper--focus{border-color:var(--color-brand-medium)}.search-input-wrapper--disabled{background:var(--color-brand-light);border-color:var(--color-neutral-gray);opacity:.4}.search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-family);font-size:var(--font-text-caption-size);font-weight:var(--font-text-caption-weight);line-height:var(--font-text-caption-line-height);color:var(--color-neutral-black)}.search-input::placeholder{color:var(--color-neutral-gray);font-weight:var(--font-text-caption-weight)}.search-input:disabled{cursor:not-allowed}.search-icon{flex-shrink:0;color:var(--color-neutral-gray)}.search-icon-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:var(--color-neutral-gray);transition:color .1s}.search-icon-btn:hover{color:var(--color-neutral-black)}.autocomplete-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--color-neutral-white);border:2px solid var(--color-neutral-black);border-radius:12px;list-style:none;margin:0;padding:0;z-index:100;max-height:280px;overflow-y:auto;overscroll-behavior:none}@media (max-width: 599px){.autocomplete-list{position:static;width:100%;margin-top:24px;max-height:none;background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}}@media (max-width: 599px){.app:has(.search-input:focus) .app-header{display:none}.app:has(.search-input:focus) .app-main{background:var(--color-neutral-white);padding-top:20px}.app:has(.search-input:focus) .guesses-list,.app:has(.search-input:focus) .hint-legend,.app:has(.search-input:focus) .empty-state,.app:has(.search-input:focus) .app-footer{display:none}}.autocomplete-item:first-child{margin-top:10px}.autocomplete-item:last-child{margin-bottom:10px}.autocomplete-item{display:flex;align-items:center;height:40px;margin:0 8px;padding:0 10px;border-radius:8px;cursor:pointer;font-family:var(--font-family);font-size:var(--font-text-caption-size);font-weight:var(--font-text-caption-weight);line-height:var(--font-text-caption-line-height);color:var(--color-neutral-black);transition:background .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.autocomplete-item:hover{background:var(--color-neutral-gray-light)}.game-over-banner{text-align:center;padding:20px 24px;border-radius:12px;font-size:1rem;line-height:1.5;width:100%;max-width:600px}.game-over-banner p{margin:4px 0}.banner-win{background:#dcfce7;border:1px solid #86efac;color:#166534}.banner-lose{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b}.banner-sub{font-size:.85rem;opacity:.8}.app-footer{display:flex;justify-content:center;background:var(--color-brand-medium);flex-shrink:0}.app-footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 32px;padding:12px 20px;width:100%;max-width:600px}@media (min-width: 600px){.app-footer-inner{flex-wrap:nowrap;justify-content:space-between;padding-left:0;padding-right:0}}.footer-text{font-size:var(--font-text-caption-size);font-weight:var(--font-text-caption-weight);line-height:var(--font-text-caption-line-height);color:var(--color-neutral-white);margin:0;white-space:nowrap}.footer-link{color:inherit;text-decoration:none}.footer-link:hover{text-decoration:underline}.start-screen{display:flex;flex-direction:column;align-items:center;flex:1;background:var(--color-brand-light);padding:64px 20px 20px;min-height:calc(100vh - 62px)}.start-content{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;max-width:320px}.start-artist-wrap{position:relative;width:144px;height:144px;border-radius:900px;background:var(--color-neutral-white);overflow:hidden;flex-shrink:0;margin-bottom:20px}@media (min-width: 600px){.start-artist-wrap{width:160px;height:160px}}.start-artist-photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.start-artist-bottom{z-index:1}.start-artist-top{z-index:2;animation:start-photo-fadein .45s linear forwards}@keyframes start-photo-fadein{0%{opacity:0}to{opacity:1}}.start-preload{display:none}.start-text{font-size:var(--font-text-body-size);font-weight:var(--font-text-body-weight);line-height:var(--font-text-body-line-height);color:var(--color-neutral-black);text-align:center;margin:0 0 40px}.empty-state{display:flex;flex-direction:column;align-items:center;gap:20px;width:224px;margin:0 auto;padding-top:64px}.empty-state-text{font-size:var(--font-text-caption-size);font-weight:var(--font-text-body-weight);line-height:var(--font-text-caption-line-height);color:var(--color-neutral-black);text-align:center;margin:0}.guesses-list{display:flex;flex-direction:column;gap:0;width:100%;max-width:600px}.guess-card+.guess-card{margin-top:32px}@media (min-width: 600px){.guess-card+.guess-card{margin-top:40px}}.guess-card{display:flex;flex-direction:column;gap:0;overflow:hidden}.card-head{display:flex;align-items:center;gap:8px;padding-bottom:12px}.card-photo{width:64px;height:64px;border-radius:900px;object-fit:cover;flex-shrink:0}.card-photo--empty{display:flex;align-items:center;justify-content:center;background:var(--color-neutral-white);border:4px solid var(--color-brand-dark);font-size:24px}.card-head-text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.card-artist-name{font-size:var(--font-heading-h1-size);font-weight:var(--font-heading-h1-weight);line-height:var(--font-heading-h1-line-height);color:var(--color-neutral-black);margin:0;word-break:break-word}.card-top-track{display:flex;align-items:center;gap:4px;font-size:var(--font-text-caption-size);font-weight:var(--font-text-caption-weight);color:var(--color-neutral-black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-star-icon{flex-shrink:0;color:var(--color-accent-yellow)}.card-guess-number{align-self:flex-start;flex-shrink:0;font-size:var(--font-text-caption-size);font-weight:var(--font-text-caption-weight);color:var(--color-neutral-gray)}.card-row{display:flex;gap:8px;padding-bottom:8px}.card-row:last-child{padding-bottom:0}.attr-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:72px;flex:0 0 92px;padding:8px 12px;border:2px solid var(--color-neutral-black);border-radius:12px;overflow:hidden;box-sizing:border-box}.attr-cell--wide{flex:1 1 auto;min-width:0}@media (min-width: 600px){.attr-cell,.attr-cell--wide,.attr-cell--flag{flex:1 0 0;min-width:0}}.attr-cell--gray{background:transparent}.attr-cell--green{background:var(--color-accent-green)}.attr-cell--yellow{background:var(--color-accent-yellow)}.attr-label{font-size:var(--font-text-attribute-size);font-weight:var(--font-text-attribute-weight);line-height:var(--font-text-attribute-line-height);color:var(--color-neutral-black);text-align:center;width:100%}.attr-label--dim{color:var(--color-neutral-gray)}.attr-value{display:flex;align-items:center;justify-content:center;gap:2px;width:100%}.attr-value-text{font-size:var(--font-heading-h3-size);font-weight:var(--font-heading-h3-weight);line-height:var(--font-heading-h3-line-height);color:var(--color-neutral-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attr-cell--flag{flex:0 0 92px;gap:4px;padding-top:12px;padding-bottom:8px}.attr-flag-img{display:block;width:40px;height:26px;object-fit:cover;border-radius:2px;flex-shrink:0}.attr-flag-placeholder{font-size:20px}.attr-country-name{font-size:var(--font-text-attribute-size);font-weight:var(--font-text-attribute-weight);line-height:var(--font-text-attribute-line-height);color:var(--color-neutral-black);text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hint-legend{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:56px;margin-bottom:64px;width:100%;max-width:320px;flex-shrink:0}@media (min-width: 600px){.hint-legend{max-width:600px}}.hint-legend-text{font-size:var(--font-text-caption-size);font-weight:var(--font-text-body-weight);line-height:var(--font-text-caption-line-height);color:var(--color-neutral-black);text-align:left;margin:0;width:100%}.hint-legend-chips{display:flex;gap:8px;align-items:center;width:100%}.hint-chip{flex:1;height:48px;display:flex;align-items:center;justify-content:center;border:2px solid var(--color-neutral-black);border-radius:12px;font-size:var(--font-text-attribute-size);font-weight:var(--font-text-caption-weight);line-height:var(--font-text-attribute-line-height);color:var(--color-neutral-black);text-align:center}.hint-chip--wrong{background:transparent}.hint-chip--close{background:var(--color-accent-yellow)}.hint-chip--correct{background:var(--color-accent-green)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.win-screen{animation:fade-in .8s linear both;display:flex;flex-direction:column;align-items:center;flex:1;padding:64px 20px 40px;background:var(--color-brand-light);width:100%}.win-screen-content{display:flex;flex-direction:column;align-items:center;width:100%;max-width:600px}.win-screen-artist{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:8px;width:100%}.win-screen-photo-wrap{width:144px;height:144px;border-radius:900px;background:var(--color-neutral-white);overflow:hidden;flex-shrink:0}@media (min-width: 600px){.win-screen-photo-wrap{width:160px;height:160px}}.win-screen-photo{width:100%;height:100%;object-fit:cover;display:block}.win-screen-photo--empty{display:flex;align-items:center;justify-content:center;font-size:48px}.win-screen-name{font-size:var(--font-heading-h1-size);font-weight:var(--font-heading-h1-weight);line-height:var(--font-heading-h1-line-height);color:var(--color-neutral-black);text-align:center;margin:0;width:100%}.win-screen-congrats{font-size:var(--font-text-body-size);font-weight:var(--font-text-body-weight);line-height:var(--font-text-body-line-height);color:var(--color-neutral-black);text-align:center;margin:0;padding-bottom:24px}.win-screen-timer-section{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.win-screen-timer-label{font-size:var(--font-text-caption-size);font-weight:var(--font-text-caption-weight);line-height:var(--font-text-caption-line-height);color:var(--color-neutral-black);text-align:center;margin:0;padding-bottom:4px}.win-screen-timer-box{background:var(--color-neutral-white);border:2px solid var(--color-neutral-black);border-radius:4px;padding:4px 12px}.win-screen-timer{display:flex;align-items:center;gap:4px;font-size:var(--font-heading-h3-size);font-weight:var(--font-heading-h3-weight);line-height:var(--font-heading-h3-line-height);color:var(--color-neutral-black);white-space:nowrap;perspective:300px;font-variant-numeric:tabular-nums}.win-screen-digit{display:inline-block;width:1ch;text-align:center}.win-screen-sep{display:inline-block}.win-modal{overflow:hidden}.modal-popup-head.win-modal-head{justify-content:space-between;padding-left:20px}.win-modal-title{font-size:var(--font-heading-h3-size);font-weight:var(--font-heading-h3-weight);line-height:var(--font-heading-h3-line-height);color:var(--color-neutral-black);margin:0}.win-modal-body{display:flex;flex-direction:column;align-items:center;padding:20px 20px 40px;overflow-y:auto}.win-modal-artist{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:12px;width:100%}.win-modal-artist-name{font-size:var(--font-heading-h1-size);font-weight:var(--font-heading-h1-weight);line-height:var(--font-heading-h1-line-height);color:var(--color-neutral-black);text-align:center;margin:0}.win-modal-photo-wrap{width:144px;height:144px;border-radius:900px;background:var(--color-neutral-white);overflow:hidden;flex-shrink:0}.win-modal-photo{width:100%;height:100%;object-fit:cover;display:block}.win-modal-photo--empty{display:flex;align-items:center;justify-content:center;font-size:48px}.win-modal-congrats{font-size:var(--font-text-body-size);font-weight:var(--font-text-body-weight);line-height:var(--font-text-body-line-height);color:var(--color-neutral-black);text-align:center;margin:0;padding-bottom:24px;max-width:210px}.win-modal-timer-section{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.win-modal-timer-label{font-size:var(--font-text-caption-size);font-weight:var(--font-text-caption-weight);line-height:var(--font-text-caption-line-height);color:var(--color-neutral-black);text-align:center;margin:0;padding-bottom:4px}.win-timer-box{background:var(--color-neutral-white);border:2px solid var(--color-neutral-black);border-radius:4px;padding:4px 12px}.win-timer{display:flex;align-items:center;gap:4px;font-size:var(--font-heading-h3-size);font-weight:var(--font-heading-h3-weight);line-height:var(--font-heading-h3-line-height);color:var(--color-neutral-black);white-space:nowrap;perspective:300px;font-variant-numeric:tabular-nums}.win-timer-digit{display:inline-block;width:1ch;text-align:center;animation:win-digit-flip .4s cubic-bezier(.22,1.2,.5,1) both;transform-origin:50% 50%}.win-timer-sep{display:inline-block}@keyframes win-digit-flip{0%{opacity:0;transform:rotateX(90deg) scale(.8)}60%{opacity:1;transform:rotateX(-12deg) scale(1.05)}to{opacity:1;transform:rotateX(0) scale(1)}}.win-reopen-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--color-brand-dark);color:var(--color-neutral-black);font-family:var(--font-family);font-size:var(--font-text-caption-size);font-weight:var(--font-text-caption-weight);line-height:var(--font-text-caption-line-height);border:none;border-radius:900px;cursor:pointer;transition:background .15s}.win-reopen-btn:hover{background:var(--color-brand-medium)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}.modal-overlay--fullscreen{background:var(--color-brand-light);padding:0;align-items:stretch;justify-content:stretch}.modal-overlay--fullscreen .modal{max-width:none;max-height:none;height:100%;border-radius:0;flex:1;overflow-y:auto}.modal-overlay--fullscreen .modal-layout{max-width:600px;width:100%;align-self:center;overflow-y:visible;flex:0 0 auto;padding-top:24px}.modal-overlay--fullscreen .modal-header{max-width:600px;width:100%;align-self:center;flex-shrink:0;padding-top:0}@media (min-width: 480px){.modal-overlay--fullscreen .modal-header{padding-top:64px;max-width:600px}.modal-overlay--fullscreen .modal-layout{padding-top:40px;max-width:600px}.modal-overlay--fullscreen .modal-main-title,.modal-overlay--fullscreen .modal-step-title{text-align:center}.modal-overlay--fullscreen .modal-main-desc,.modal-overlay--fullscreen .modal-step-desc,.modal-overlay--fullscreen .modal-point-title,.modal-overlay--fullscreen .modal-point-desc{text-align:center;max-width:400px;align-self:center}.modal-overlay--fullscreen .modal-step-head{align-items:center}.modal-overlay--fullscreen .modal-step-image{display:flex;justify-content:center;align-self:center;width:296px;flex-shrink:0}.modal-overlay--fullscreen .modal-step-image img{width:296px;height:auto}.modal-overlay--fullscreen .modal-point-head{align-items:center}.modal-overlay--fullscreen .modal-point-chips{justify-content:center}.modal-overlay--fullscreen .modal-tabs-row{width:480px}}.modal{background:var(--color-brand-light);width:100%;max-width:520px;max-height:90vh;border-radius:20px;display:flex;flex-direction:column;overflow:hidden}@media (min-width: 480px){.modal{max-height:80vh}}.modal-popup-head{display:flex;align-items:center;justify-content:flex-end;width:100%;flex-shrink:0}.modal-header{display:flex;flex-wrap:wrap;align-items:center;padding:8px 8px 0;flex-shrink:0}.modal-header-spacer{display:none}.modal-close-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:none;cursor:pointer;color:var(--color-neutral-black);flex-shrink:0;margin-left:auto;transition:opacity .15s}.modal-close-btn:hover{opacity:.6}.modal-layout{display:flex;flex-direction:column;overflow-y:auto;flex:1;padding:16px 20px 40px}.modal-tabs-row{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--color-neutral-white);border-radius:12px;padding:4px;order:2;flex:0 0 100%;margin-top:8px}.modal-tabs-indicator{position:absolute;top:4px;left:4px;width:calc(50% - 4px);bottom:4px;background:var(--color-brand-dark);border-radius:9px;transition:transform .28s cubic-bezier(.4,0,.2,1);pointer-events:none}.modal-tabs-row--hints .modal-tabs-indicator{transform:translate(100%)}.modal-tab-btn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:8px 12px;background:none;border:none;cursor:pointer;font-family:var(--font-family);font-size:var(--font-text-caption-size);font-weight:var(--font-text-caption-weight);line-height:var(--font-text-caption-line-height);color:var(--color-neutral-gray);white-space:nowrap;transition:color .2s;border-radius:9px}.modal-tab-btn--active{color:var(--color-neutral-black)}@media (min-width: 480px){.modal-header{flex-wrap:nowrap;padding:16px 12px 0;justify-content:space-between}.modal-header-spacer{display:block;flex:0 0 48px;height:48px}.modal-tabs-row{order:0;flex:0 0 auto;width:280px;margin-top:0}.modal-close-btn{margin-left:0}}.modal-content{display:flex;flex-direction:column}.modal-main-title{font-size:var(--font-heading-h1-size);font-weight:var(--font-heading-h1-weight);line-height:var(--font-heading-h1-line-height);color:var(--color-neutral-black);margin:0 0 8px}.modal-main-desc{font-size:var(--font-text-body-size);font-weight:var(--font-text-body-weight);line-height:var(--font-text-body-line-height);color:var(--color-neutral-black);margin:0 0 24px}.modal-steps{display:flex;flex-direction:column;gap:24px}.modal-step{display:flex;flex-direction:column;gap:16px}.modal-step-head{display:flex;flex-direction:column;gap:4px}.modal-step-title{font-size:var(--font-heading-h2-size);font-weight:var(--font-heading-h2-weight);line-height:var(--font-heading-h2-line-height);color:var(--color-neutral-black);margin:0}.modal-step-desc{font-size:var(--font-text-body-size);font-weight:var(--font-text-body-weight);line-height:var(--font-text-body-line-height);color:var(--color-neutral-black);margin:0}.modal-step-image{padding:4px 12px 0}.modal-step-image img{width:100%;height:auto;display:block}.modal-points{display:flex;flex-direction:column;gap:24px}.modal-point{display:flex;flex-direction:column;gap:16px}.modal-point--compact{gap:8px}.modal-point-head{display:flex;flex-direction:column;gap:4px}.modal-point-title{font-size:var(--font-heading-h2-size);font-weight:var(--font-heading-h2-weight);line-height:var(--font-heading-h2-line-height);color:var(--color-neutral-black);margin:0}.modal-point-desc{font-size:var(--font-text-body-size);font-weight:var(--font-text-body-weight);line-height:var(--font-text-body-line-height);color:var(--color-neutral-black);margin:0}.modal-point-chips{display:flex;gap:8px;align-items:center}.modal-chip{width:100px;height:48px;display:flex;align-items:center;justify-content:center;border:2px solid var(--color-neutral-black);border-radius:12px;font-size:var(--font-text-attribute-size);font-weight:var(--font-text-caption-weight);line-height:var(--font-text-attribute-line-height);color:var(--color-neutral-black);text-align:center;white-space:nowrap;flex-shrink:0}.modal-chip--wrong{background:transparent}.modal-chip--close{background:var(--color-accent-yellow)}.modal-chip--correct{background:var(--color-accent-green)}.modal-arrows{display:flex;flex-direction:column;gap:8px}.modal-arrow-row{display:flex;gap:12px;align-items:flex-start}.modal-arrow-icon{flex-shrink:0;color:var(--color-neutral-black);margin-top:2px}.modal-arrow-text{font-size:var(--font-text-body-size);font-weight:var(--font-text-body-weight);line-height:var(--font-text-body-line-height);color:var(--color-neutral-black);margin:0;flex:1}.archive-modal-header{padding:8px 8px 0 20px;justify-content:space-between}@media (min-width: 480px){.archive-modal-header{padding-top:64px;justify-content:center;position:relative}.archive-modal-header .modal-close-btn{position:absolute;right:0;top:64px}}.archive-modal-layout{padding-top:8px;padding-bottom:40px}@media (min-width: 480px){.archive-modal-layout{padding-top:32px}}.archive-title{font-size:var(--font-heading-h1-size);font-weight:var(--font-heading-h1-weight);line-height:var(--font-heading-h1-line-height);color:var(--color-neutral-black);margin:0;padding:8px 0}.archive-list{display:flex;flex-direction:column;gap:16px}.archive-card{display:flex;align-items:center;gap:12px;padding:16px;border-radius:12px;background:var(--color-neutral-white)}.archive-card-photo-wrap{flex-shrink:0}.archive-card-photo{width:70px;height:70px;border-radius:900px;object-fit:cover;display:block;background:var(--color-neutral-white)}.archive-card-photo--empty{width:70px;height:70px;border-radius:900px;background:var(--color-brand-medium);display:flex;align-items:center;justify-content:center;font-size:20px}.archive-card-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.archive-card-text{display:flex;flex-direction:column;gap:2px}.archive-card-date{font-size:var(--font-text-attribute-size);font-weight:var(--font-text-attribute-weight);line-height:var(--font-text-attribute-line-height);color:var(--color-neutral-gray);margin:0}.archive-card-name{font-size:var(--font-heading-h3-size);font-weight:var(--font-heading-h3-weight);line-height:var(--font-heading-h3-line-height);color:var(--color-neutral-black);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.archive-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:4px;font-size:var(--font-text-attribute-size);font-weight:var(--font-text-attribute-weight);line-height:var(--font-text-attribute-line-height);white-space:nowrap;align-self:flex-start}.archive-tag--green{background:var(--color-accent-green);color:var(--color-neutral-black)}.archive-tag--yellow{background:var(--color-accent-yellow);color:var(--color-neutral-black)}.archive-tag--orange{background:var(--color-brand-accent);color:var(--color-neutral-white)}.archive-empty-text{font-size:var(--font-text-body-size);font-weight:var(--font-text-body-weight);line-height:var(--font-text-body-line-height);color:var(--color-neutral-gray);margin:60px 0;text-align:center}