@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100; 0,200; 0,300; 0,400; 0,500; 0,600; 0,700; 1,100; 1,200; 1,300; 1,400; 1,500; 1,600; 1,700&family=Open+Sans:ital,wght@0,300..800; 1,300..800&family=PT+Sans:ital,wght@0,400; 0,700; 1,400; 1,700&display=swap');
 :root {
     --n:white;
     --a:#f5f5f5;
     --b:#ebebeb;
     --c:#e1e1e1;
     --d:#d8d8d8;
     --e:#cecece;
     --f:#c4c4c4;
     --g:#bababa;
     --h:#b0b0b0;
     --i:#a7a7a7;
     --j:#9d9d9d;
     --k:#7a7a7a;
     --l:#444444;
     --m:#1d1d1d;
     --o:#131313;
     --p:#668da9;
     --q:#95c9c6;
     --r:#8b7869;
     --s:#c995b2;
     --t:#b2c995;
     --u:rgb(255 255 255 / 80%);
}
 ::-moz-selection {
     background: var(--p);
     color: var(--n);
}
 ::selection {
     background: var(--p);
     color: var(--n);
}
 * {
     --sb-track-color: transparent;
     --sb-size: 5px;
     margin:0;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
/* прокрутка */
 *::-webkit-scrollbar {
     width: var(--sb-size);
     height: var(--sb-size);
}
 *::-webkit-scrollbar-track {
     background: var(--sb-track-color);
     border-radius: 0;
}
 *::-webkit-scrollbar-thumb {
     background: var(--g);
     border-radius: 0;
     border: 1px solid var(--n);
}
 @supports not selector(::-webkit-scrollbar) {
     * {
         scrollbar-color: var(--g) var(--sb-track-color);
    }
}
/* скрыть прокрутку */
 .panel, body, html, .ns {
     scrollbar-width: none;
     -ms-overflow-style: none;
}
 .panel::-webkit-scrollbar, body::-webkit-scrollbar, html::-webkit-scrollbar, .ns::-webkit-scrollbar {
     display: none;
}
/* обнуление */
 a, a:hover {
     text-decoration: none;
}
 a {
     color: var(--p);
}
 a:hover {
     color: var(--r);
}
 a:active {
     color: var(--s);
}
 h1, h2, h3, h4, h5, h6 {
     padding: 6px 0px;
}
 button {
     padding: 5px 7px;
     background: var(--a);
     border: 1px solid var(--d);
     cursor: pointer;
     color: var(--m);
     font-weight: normal;
     font-size: 14px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     border-radius: 0;
}
 input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
     border-color: var(--j);
}
 textarea {
     resize: block;
}
 input[type="text"], input[type="number"], textarea {
     padding: 6px;
     border: 1px solid var(--d);
     width:100%;
     border-radius: 0;
}
 input[type="checkbox"] {
     -moz-appearance: none;
     appearance: none;
     -webkit-appearance: none;
     width: 18px;
     height: 18px;
     border: 2px solid var(--g);
     border-radius: 50%;
     position: relative;
     cursor: pointer;
     vertical-align: middle;
     -webkit-transition: border-color 0.2s ease, background-color 0.2s ease;
     -o-transition: border-color 0.2s ease, background-color 0.2s ease;
     transition: border-color 0.2s ease, background-color 0.2s ease;
}
 input[type="checkbox"]::after {
     content: '';
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%) scale(0);
     -ms-transform: translate(-50%, -50%) scale(0);
     transform: translate(-50%, -50%) scale(0);
     background: var(--g);
     width: 10px;
     height: 10px;
     border-radius: 50%;
     -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
     transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
     -o-transition: transform 0.2s ease, opacity 0.2s ease;
     transition: transform 0.2s ease, opacity 0.2s ease;
     transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
     opacity: 0;
}
 input[type="checkbox"]:checked::after {
     -webkit-transform: translate(-50%, -50%) scale(1);
     -ms-transform: translate(-50%, -50%) scale(1);
     transform: translate(-50%, -50%) scale(1);
     opacity: 1;
}
 input[type="checkbox"]:hover {
     border-color: var(--e);
}
 button:hover {
     background: var(--a);
}
 button:disabled {
     background: var(--b);
     border: 1px solid var(--c);
     opacity: .5;
     pointer-events: none;
}
 .reset {
     padding: 0;
     margin: 0;
     border: 0;
     border-radius: 0;
     background: none;
}
 :focus {
     outline: none;
}
 * {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin: 0;
}
 html,body{
     height: 100%;
     font-size: 14px;
     margin:0;
     font-optical-sizing: auto;
     font-weight:normal;
     font-style: normal;
     font-variation-settings: "wdth" 100;
     font-family: "PT Sans", sans-serif, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
     background: var(--n);
     color: var(--m);
}
 .list {
     display: -ms-grid;
     display: grid;
     grid-template-areas: "header header" "aside main" "nav nav" "footer footer";
     -ms-grid-rows: auto 10px 1fr 10px auto;
     grid-template-rows: auto 1fr auto;
     -ms-grid-columns: auto 0 1fr;
     grid-template-columns: auto 1fr;
     height: 100vh;
     gap: 10px 0;
}
 @media (min-width:820px) {
     .ok {
         -ms-grid-columns: 400px 1fr;
         grid-template-columns: 400px 1fr;
    }
}
 header {
     -ms-grid-row: 1;
     -ms-grid-column: 1;
     -ms-grid-column-span: 3;
     grid-area: header;
}
 aside {
     -ms-grid-row: 3;
     -ms-grid-column: 1;
     grid-area: aside;
}
 main {
     -ms-grid-row: 3;
     -ms-grid-column: 3;
     grid-area: main;
}
 nav {
     -ms-grid-row: 5;
     -ms-grid-column: 1;
     -ms-grid-column-span: 3;
     grid-area: nav;
}
 footer {
     -ms-grid-row: 7;
     -ms-grid-column: 1;
     -ms-grid-column-span: 3;
     grid-area: footer;
}
 .cinema {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 10px;
}
 section {
     -webkit-box-flex:1;
     -ms-flex:1;
     flex:1;
     padding: 0 10px;
}
 header {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     gap: 10px;
     padding: 10px;
     place-items: center;
     border-bottom: var(--a) 1px solid;
}
 header input:focus + button {
     border-color: var(--j);
}
 footer {
     padding: 15px;
     border-top: 1px dashed var(--d);
     text-align: center;
}
/* аниме */
 .grid {
     display: -ms-grid;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
     gap:10px;
     padding: 10px 20px;
     overflow: auto;
}
 article {
     position: relative;
}
 article>a>img {
     width: 100%;
     height: 246px;
     -o-object-fit: cover;
     object-fit: cover;
}
/* плеер */
 .player {
     position: relative;
     overflow: hidden;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     margin-top: 5px;
     border-radius: 8px;
}
 video {
     width: 100%;
     height: auto;
     -o-object-fit: cover;
     object-fit: cover;
     -o-object-position: top;
     object-position: top;
}
 .controls {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     gap: 5px;
}
 .ac:active {
     background: var(--a);
}
 @media (max-width:478px) {
     .controls {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
    }
}
/* select */
 .select {
     position: relative;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor:pointer;
     border:1px solid var(--d);
     background:var(--n);
     min-width:150px;
}
 .selected {
     padding:5px;
}
 .items {
     position: absolute;
     background: var(--n);
     border: 1px solid var(--d);
     top: 100%;
     left: 0;
     right: 0;
     z-index: 99;
     overflow: auto;
     max-height: 180px;
}
 .option {
     padding:5px;
     word-break: break-all;
}
 .option:hover {
     background:var(--a);
}
 .hide {
     display:none;
}
/* фильтр */
 fieldset {
     position: relative;
     border: 1px solid var(--d);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
}
 legend {
     border: 1px solid var(--f);
     padding: 2px 4px;
     -ms-flex-item-align: start;
     align-self: flex-start;
}
 .bshade, .ashade {
     position: absolute;
     height: 15px;
     width: 100%;
     --shade: var(--n);
     pointer-events: none;
     z-index: 2;
     left:0;
}
 .bshade {
     top: 33px;
     margin-top: 6px;
     background-image: -webkit-gradient( linear, left top, left bottom, from(var(--shade)), color-stop(30%, rgba(255, 255, 255, 0.85)), color-stop(60%, rgba(255, 255, 255, 0.5)), color-stop(85%, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0)) );
     background-image: -o-linear-gradient( top, var(--shade) 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.2) 85%, rgba(255, 255, 255, 0) 100% );
     background-image: linear-gradient( to bottom, var(--shade) 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.2) 85%, rgba(255, 255, 255, 0) 100% );
}
 .ashade {
     bottom: 12px;
     margin-bottom: -6px;
     background-image: -webkit-gradient( linear, left bottom, left top, from(var(--shade)), color-stop(30%, rgba(255, 255, 255, 0.85)), color-stop(60%, rgba(255, 255, 255, 0.5)), color-stop(85%, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0)) );
     background-image: -o-linear-gradient( bottom, var(--shade) 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.2) 85%, rgba(255, 255, 255, 0) 100% );
     background-image: linear-gradient( to top, var(--shade) 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.2) 85%, rgba(255, 255, 255, 0) 100% );
}
 .filters {
     height: 100vh;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: start;
     gap: 20px;
     position: fixed;
     background: var(--n);
     top: 0;
     left: 0;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     padding: 10px;
     width: 300px;
     overflow: auto;
}
 .filter {
     width:100%;
     gap:10px;
}
 .filter, .filter-options {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     padding: 6px 0;
}
 .filter-options {
     height: 100px;
     overflow: auto;
     gap:5px;
}
 fieldset input[type="text"] {
     border:none;
     border-bottom: 1px dashed var(--h);
     padding:5px;
     margin-bottom: 10px;
     width: 100%;
}
 .filter-option {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     cursor: pointer;
     font-size: 16px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     padding: 2px 4px;
     gap: 0 10px;
}
/* панель */
 aside {
     display: none;
     position: sticky;
     top: 0;
     padding: 0 20px;
     overflow: auto;
}
 aside>form {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 10px;
     width: 100%;
     height: 100%;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}
 .panel.on {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     gap:20px;
}
 @media (max-width:820px) {
     .panel.on {
         position: fixed;
         width:100%;
         max-height: 100vh;
         height: 100%;
         left: 0;
         top: 0;
         z-index: 9999;
         padding: 20px;
         background-color:var(--n) 
    }
}
/* пагинация */
 .pagination {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     gap: 5px;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     position: relative;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
}
/* ник */
 .nick {
     white-space: nowrap;
}
/* информация об аниме */
 .info {
     cursor: pointer;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     margin-left: auto;
     position: absolute;
     top: 2px;
     left: 2px;
}
 .name {
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: block;
}
 .content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 10px;
     width: 100%;
     background: var(--n);
     -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px;
     box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px;
     padding: 10px;
     overflow: auto;
     max-height: 400px;
}
 .overlay {
     display:none;
     position:fixed;
     top:0;
     left:0;
     width:100%;
     height:100%;
     background:rgba(0,0,0,0.5);
     z-index:999;
}
 .detail {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     padding: 5px;
     z-index: 1000;
     max-width: 600px;
     width: 100%;
}
 .screenshots img {
     max-width: 100px;
     margin: 4px;
     border-radius: 4px;
     cursor: -webkit-zoom-in;
     cursor: zoom-in;
}
 .screenshots img:hover {
     -webkit-transform: scale(1.07);
     -ms-transform: scale(1.07);
     transform: scale(1.07);
}
/* tooltip */
 [data-tooltip] {
     position: relative;
     white-space: nowrap;
}
 [data-tooltip]::before, [data-tooltip]::after {
     text-transform: none;
     font-size: .9em;
     line-height: 1;
     position: absolute;
     display: none;
     opacity: 0;
}
 [data-tooltip]::before {
     content: '';
     border: 6px solid transparent;
     z-index: 101;
}
 [data-tooltip]::after {
     content: attr(data-tooltip);
     text-align: center;
     min-width: 3em;
     max-width: 21em;
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     padding: 6px 8px;
     border-radius: 3px;
     background: var(--l);
     color: var(--n);
     z-index: 100;
}
 [data-tooltip]:hover::before, [data-tooltip]:hover::after {
     display: block;
}
 [data-tooltip='']::before, [data-tooltip='']::after {
     display: none !important;
}
 [data-tooltip]:not([data-flow])::before, [data-tooltip][data-flow^="top"]::before {
     bottom: 100%;
     border-bottom-width: 0;
     border-top-color: var(--l);
}
 [data-tooltip]:not([data-flow])::after, [data-tooltip][data-flow^="top"]::after {
     bottom: calc(100% + 5px);
}
 [data-tooltip]:not([data-flow])::before, [data-tooltip]:not([data-flow])::after, [data-tooltip][data-flow^="top"]::before, [data-tooltip][data-flow^="top"]::after {
     left: 50%;
     -webkit-transform: translate(-50%, -.4em);
     -ms-transform: translate(-50%, -.4em);
     transform: translate(-50%, -.4em);
}
 [data-tooltip][data-flow^="bottom"]::before {
     top: 100%;
     border-top-width: 0;
     border-bottom-color: var(--l);
}
 [data-tooltip][data-flow^="bottom"]::after {
     top: calc(100% + 6px);
}
 [data-tooltip][data-flow^="bottom"]::before, [data-tooltip][data-flow^="bottom"]::after {
     left: 50%;
     -webkit-transform: translate(-50%, .4em);
     -ms-transform: translate(-50%, .4em);
     transform: translate(-50%, .4em);
}
 [data-tooltip][data-flow^="left"]::before {
     top: 50%;
     border-right-width: 0;
     border-left-color: var(--l);
     left: calc(0em - 8px);
     -webkit-transform: translate(-.5em, -50%);
     -ms-transform: translate(-.5em, -50%);
     transform: translate(-.5em, -50%);
}
 [data-tooltip][data-flow^="left"]::after {
     top: 50%;
     right: calc(100% + 8px);
     -webkit-transform: translate(-.4em, -50%);
     -ms-transform: translate(-.4em, -50%);
     transform: translate(-.4em, -50%);
}
 [data-tooltip][data-flow^="right"]::before {
     top: 50%;
     border-left-width: 0;
     border-right-color: var(--l);
     right: calc(0em - 7px);
     -webkit-transform: translate(.4em, -50%);
     -ms-transform: translate(.4em, -50%);
     transform: translate(.4em, -50%);
}
 [data-tooltip][data-flow^="right"]::after {
     top: 50%;
     left: calc(100% + 6px);
     -webkit-transform: translate(.5em, -50%);
     -ms-transform: translate(.5em, -50%);
     transform: translate(.5em, -50%);
}
 @-webkit-keyframes tooltip-vert {
     to {
         opacity: 1;
         -webkit-transform: translate(-50%, 0);
         transform: translate(-50%, 0);
    }
}
 @keyframes tooltip-vert {
     to {
         opacity: 1;
         -webkit-transform: translate(-50%, 0);
         transform: translate(-50%, 0);
    }
}
 @-webkit-keyframes tooltip-horz {
     to {
         opacity: 1;
         -webkit-transform: translate(0, -50%);
         transform: translate(0, -50%);
    }
}
 @keyframes tooltip-horz {
     to {
         opacity: 1;
         -webkit-transform: translate(0, -50%);
         transform: translate(0, -50%);
    }
}
 [data-tooltip]:not([data-flow]):hover::before, [data-tooltip]:not([data-flow]):hover::after, [data-tooltip][data-flow^="top"]:hover::before, [data-tooltip][data-flow^="top"]:hover::after, [data-tooltip][data-flow^="bottom"]:hover::before, [data-tooltip][data-flow^="bottom"]:hover::after {
     -webkit-animation: tooltip-vert .5s ease-out forwards;
     animation: tooltip-vert .5s ease-out forwards;
}
 [data-tooltip][data-flow^="left"]:hover::before, [data-tooltip][data-flow^="left"]:hover::after, [data-tooltip][data-flow^="right"]:hover::before, [data-tooltip][data-flow^="right"]:hover::after {
     -webkit-animation: tooltip-horz .5s ease-out forwards;
     animation: tooltip-horz .5s ease-out forwards;
}
/* ползунки */
 .slide {
     position: relative;
     height: 20px;
     margin: 10px 0;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}
 .slide .track {
     position: absolute;
     height: 6px;
     background: var(--a);
     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     width: 100%;
     border-radius: 3px;
}
 .slide .range {
     position: absolute;
     height: 6px;
     background: var(--b);
     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     border-radius: 3px;
}
 .slide .handle.min {
     background: var(--d);
}
 .slide .handle {
     position: absolute;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     width: 16px;
     height: 16px;
     background: var(--g);
     border-radius: 50%;
     cursor: pointer;
}
/* ripple */
 .effect {
     position: relative;
     overflow: hidden;
     cursor: pointer;
}
 .ripple {
     position: absolute;
     background: var(--u);
     border-radius: 50%;
     -webkit-transform: scale(0);
     -ms-transform: scale(0);
     transform: scale(0);
     -webkit-animation: ripple-anim 0.6s linear;
     animation: ripple-anim 0.6s linear;
     pointer-events: none;
}
 @-webkit-keyframes ripple-anim {
     to {
         -webkit-transform: scale(4);
         transform: scale(4);
         opacity: 0;
    }
}
 @keyframes ripple-anim {
     to {
         -webkit-transform: scale(4);
         transform: scale(4);
         opacity: 0;
    }
}
/* --- --- */
 .similar {
     max-width: 900px;
     margin: 15px auto auto auto;
     position: relative;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     gap: 12px;
     -ms-flex-pack: distribute;
     justify-content: space-around;
     width: 100%;
     overflow: auto;
     padding: 2px 4px;
}
 .similar a {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     width: 100px;
     text-align: center;
}
 .similar img {
     width: 100px;
     height: 150px;
     -o-object-fit: cover;
     object-fit: cover;
     border-radius: 6px;
     display: block;
     margin-bottom: 6px;
}
 .similar span {
     display: block;
     font-size: 12px;
     color: var(--l);
}

 .add {
     cursor: pointer;
}
 .all {
     max-width: 800px;
     width:100%;
     margin: 20px auto auto auto;
}
 .close {
     font-size: 20px;
     color: var(--s);
}
 @media (max-width:450px) {
     .logo, .nick {
         display: none;
    }
}
 @-webkit-keyframes svg-text-anim {
     40% {
         stroke-dashoffset: 0;
         fill: transparent;
    }
     60% {
         stroke-dashoffset: 0;
         fill: #ffffff;
    }
     100% {
         stroke-dashoffset: 0;
         fill: #ffffff;
    }
}
 @keyframes svg-text-anim {
     40% {
         stroke-dashoffset: 0;
         fill: transparent;
    }
     60% {
         stroke-dashoffset: 0;
         fill: #ffffff;
    }
     100% {
         stroke-dashoffset: 0;
         fill: #ffffff;
    }
}
 @media (min-width:478px) {
     .clm {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-pack: distribute;
         justify-content: space-around;
         gap: 20px;
         -webkit-box-align: start;
         -ms-flex-align: start;
         align-items: start;
    }
}
 @media (max-width:478px) {
     .clm {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -ms-flex-pack: distribute;
         justify-content: space-around;
         gap: 20px;
    }
}
 .clear {
     background-color: var(--s);
     border:none;
     color:var(--n);
}
 .clear:hover {
     background-color: var(--r);
}
 .note {
     color: var(--k);
}
 .dashed {
     width:100%;
     height: 1px;
     border-bottom: 1px dashed var(--b);
}
 form:has(input[type="text"]:focus) .cnt-9, button:hover .cnt-9 {
     border-style: dashed;
     -webkit-animation: rotate 2s linear infinite;
     animation: rotate 2s linear infinite;
     -webkit-transition: 720ms ease-in-out transform;
     -o-transition: 720ms ease-in-out transform;
     transition: 720ms ease-in-out transform;
}
/* config */
 .psh {
     position: relative;
     cursor: pointer;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
}
 .config {
     display: none;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     max-width: 320px;
     width: 100%;
     gap: 10px;
     position: fixed;
     right: 20px;
     top: 90px;
     background: var(--n);
     border-radius: 6px;
     padding: 10px;
     margin-top: 10px;
     border: 1px solid var(--c);
     -webkit-box-shadow: 0 0 3px 3px var(--n);
     box-shadow: 0 0 3px 3px var(--n);
     z-index: 9;
     max-height: 500px;
     overflow: auto;
}
 .config.on {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
}
 @media (max-width:360px) {
     .config {
         left:50%;
         -webkit-transform: translatex(-50%);
         -ms-transform: translatex(-50%);
         transform: translatex(-50%);
         max-width:95%;
    }
}
 @keyframes lr {
     from {
         -webkit-transform: translateX(0);
         transform: translateX(0);
    }
     to {
         -webkit-transform: translateX(-2px);
         transform: translateX(-2px);
    }
}