:root{--clr-white:hsl(210 10% 98%);--clr-black:hsl(210 19% 6%);--clr-gray-100:#f3f4f6;--clr-gray-200:#e5e7eb;--clr-gray-300:#d1d5dc;--clr-gray-400:#99a1af;--clr-gray-500:#6a7282;--clr-gray-700:#364153;--clr-gray-600:#4a5565;--clr-gray-800:#1e2939;--clr-gray-950:#030712;--clr-violet-50:#f5f3ff;--clr-violet-100:#ede9fe;--clr-violet-200:#ddd6ff;--clr-violet-300:#c4b4ff;--clr-violet-400:#a684ff;--clr-violet-500:#8e51ff;--clr-violet-600:#7f22fe;--clr-violet-700:#7008e7;--clr-violet-900:#4d179a;--clr-fuchsia-100:#fae8ff;--clr-fuchsia-200:#f6cfff;--clr-fuchsia-300:#f4a8ff;--clr-fuchsia-500:#e12afb;--clr-fuchsia-600:#c800de;--clr-fuchsia-700:#a800b7;--clr-fuchsia-900:#721378;--clr-blue-100:#dff2fe;--clr-blue-200:#b8e6fe;--clr-blue-600:#0084d1;--clr-blue-700:#0069a8;--clr-green-50:#f0fdf4;--clr-green-100:#dcfce7;--clr-green-200:#b9f8cf;--clr-green-300:#7bf1a8;--clr-green-400:#05df72;--clr-green-500:#00c950;--clr-green-700:#008236;--clr-red-100:#ffe2e2;--clr-red-200:#ffc9c9;--clr-red-300:#ffa2a2;--clr-red-400:#ff6467;--clr-red-500:#fb2c36;--clr-red-700:#c10007;--clr-red-800:#9f0712;--clr-yellow-100:#fef9c2;--clr-yellow-200:#fff085;--clr-yellow-700:#a65f00;--clr-primary:light-dark(var(--clr-violet-400), var(--clr-gray-500));--clr-text-highlight:light-dark(var(--clr-violet-400), var(--clr-gray-500));--max-width:120ch;--topbar-height:56px;--font-primary:"Open Sans", sans-serif;--font-secondary:"Ubuntu Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-monospace:monospace;--fs-base:1rem;--fs-sm:0.875rem;--fs-lg:1.125rem;--fs-xl:1.25rem;--lh-base:1.6;--lh-heading:1.3;--lh-base-px:calc(var(--lh-base) * var(--fs-base));--ls-base:0;--ls-heading:-0.02em;--bk-sm:640px;--bk-md:768px;--bk-lg:1024px;--bk-xl:1280px;--bk-2xl:1536px}#root,#__next{isolation:isolate}*,*::before,*::after{box-sizing:border-box}*{margin:0}html,:host{scroll-behavior:smooth;scrollbar-gutter:stable;line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:open sans,ui-sans-serif,system-ui,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance;font-family:var(--font-secondary);font-weight:600;color:light-dark(var(--clr-gray-700),var(--clr-white));margin-top:1em;margin-bottom:.5em;&:has(+ small){ line-height:1.15em; margin-bottom:0.05em; } & small{ font-size:0.95em; font-style:italic; color:var(--clr-gray-500); }}h1{font-size:clamp(2.25rem,1.815rem + 2.174vw,3.5rem)}h2{font-size:clamp(1.75rem,1.5rem + 1.5vw,2.5rem)}h3{font-size:clamp(1.5rem,1.25rem + 1.2vw,2rem)}h4{font-size:clamp(1.25rem,1rem + 1vw,1.75rem)}h5{font-size:clamp(1rem,.875rem + .8vw,1.5rem)}h6{font-size:clamp(.875rem,.75rem + .5vw,1.25rem)}p{margin-bottom:1em;max-width:var(--max-width);color:light-dark(var(--clr-black),var(--clr-white));overflow-wrap:break-word;text-wrap:pretty}ul,ol{display:flex;flex-direction:column;gap:.4rem}.comment article ul{list-style:disc}.comment article ol{list-style:decimal}a{--_color:light-dark(var(--clr-violet-400), var(--clr-violet-300));--_color-hover:light-dark(var(--clr-violet-500), var(--clr-violet-400));color:var(--_color);text-decoration:underline;text-decoration-color:transparent;font-weight:500;transition:all .1s ease-in-out;&:hover{ color:var(--_color-hover); text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--_color-hover); }}fieldset{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;& label{ color:light-dark(var(--clr-black), var(--clr-white)); } & legend{ float:inline-end; color:light-dark(var(--clr-black), var(--clr-white)); }}:modal{max-width:1200px}body{background-color:light-dark(var(--clr-white),var(--clr-black));font-family:var(--font-primary);font-size:var(--fs-base,16px);line-height:var(--lh-base);color:light-dark(var(--clr-black),var(--clr-white));margin:0 auto;-webkit-font-smoothing:antialiased;&:has(:is(.menu-toggle:checked,dialog[open])){ overflow-y:hidden; }}select{border-radius:.375rem;border:solid 2px var(--clr-violet-200);background-color:light-dark(var(--clr-violet-100),var(--clr-gray-800));padding-left:.5rem;padding-right:.5rem}dialog{width:100%;border-radius:1rem;padding:1.5rem;outline:none;border:solid 2px var(--clr-violet-200);margin:auto;&::backdrop{ background-color:hsl(from var(--clr-violet-200) h s l/0.6); } @media (max-width:768px){ margin:auto 1rem; }}input,textarea{--_border-color:light-dark(var(--clr-violet-100), var(--clr-gray-500));background-color:light-dark(var(--clr-white),var(--clr-gray-700));color:light-dark(var(--clr-black),var(--clr-white));border:1px solid var(--_border-color);border-radius:.375rem;&:focus{ outline:2px solid var(--_border-color); }}textarea{width:100%;padding:1rem;resize:vertical}label:has(+:is(input,textarea)){display:block;font-size:1rem;font-weight:500;color:light-dark(var(--clr-gray-600),var(--clr-gray-300));margin-left:.2rem;margin-bottom:.2rem}input[type=text],input[type=email],input[type=date],input[type=password]{width:100%;align-items:center;padding:.25rem .5rem}mark{background-color:light-dark(var(--clr-violet-200),var(--clr-gray-600));color:light-dark(var(--clr-black),var(--clr-white));font-weight:500;border-radius:.2rem;padding-inline:10px}small{font-size:var(--fs-sm);color:var(--clr-gray-500)}blockquote{border-left:4px solid var(--clr-violet-200);padding:.5rem 1rem;margin:1rem 0}.bi{width:100%;height:100%}video{min-height:100%;min-width:100%;overflow:hidden;border-radius:1rem;border-width:1px;border-color:var(--clr-violet-100)}body.dashboard{display:grid;position:relative;min-width:100%;max-width:100%;min-height:100vh;overflow-x:hidden;z-index:50;grid-template-areas:"head head    head" ".    welcome ." ".    main    ." ".    footer  .";grid-template-rows:var(--topbar-height)minmax(0,max-content)minmax(590px,max-content)minmax(10px,max-content);grid-template-columns:1fr min(92svw,150ch)1fr;grid-row-gap:2rem}.topbar{grid-area:head;position:sticky;top:0;left:0;right:0;height:var(--topbar-height);background-color:light-dark(var(--clr-violet-50),var(--clr-gray-800));border-bottom:solid 1px light-dark(var(--clr-violet-100),var(--clr-gray-700));z-index:100;padding-inline:2rem;align-items:center;gap:1rem}#topbar-desktop{display:flex}#topbar-mobile{display:none}@media(max-width:768px){#topbar-desktop{display:none}#topbar-mobile{display:flex}}.auth-layout{display:grid;place-content:center;min-width:100%;min-height:100svh;& > main{ max-width:min(92svw, 1200px); }}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}.container-phrases{display:flex;flex-direction:column;gap:.5rem}.container-header{width:100%;margin-inline:auto;border-radius:1rem;padding:1.5rem;background-color:light-dark(var(--clr-violet-50),var(--clr-gray-800));& h1, & h2, & h3, & h4, & h5, & h6{ margin-top:0; } & .phrase-with-meaning, & .ecb-table{ background-color:light-dark(var(--clr-white), var(--clr-black)); } & > img{ overflow:hidden; border-radius:1rem; -o-object-fit:cover; object-fit:cover; width:100%; }}.container-lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:1rem;margin-top:2rem}.achievements-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));margin-top:1rem;gap:1rem}.avatars-stack{--stack-overlap:-0.8rem;display:flex;& > *:not(:last-child){ margin-right:var(--stack-overlap); }}.comments-container{display:flex;flex-direction:column;gap:1.5rem;margin-top:1.5rem}.lesson-content{grid-area:main;position:relative;display:flex;flex-direction:column;gap:1.5rem;& > [data-lesson-content]{ display:flex; flex-direction:column; }}.question-container{width:100%;border-radius:1rem;border:solid 2px light-dark(var(--clr-violet-50),var(--clr-gray-800));margin:0 auto;margin-bottom:1.5rem;padding:1.5rem;& form{ flex-direction:column; gap:1rem; opacity:0; transition:opacity 300ms ease-in-out; &:not([hidden]){ display:flex; opacity:1; } & img{ margin-top:2rem; overflow:hidden; border-radius:0.25rem; -o-object-fit:contain; object-fit:contain; max-width:600px; max-height:auto; } } & h1, & h2, & h3, & h4, & h5, & h6, p{ margin:0; }}.auto-fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(390px,1fr));grid-auto-flow:row;max-width:100%;gap:1rem}.grid-auto{--column-width:390px;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(var(--column-width),1fr))}.grid-2{display:grid;gap:1rem;grid-template-columns:1fr;@media(min-width:768px){grid-template-columns:repeat(2,1fr);}}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-grow{flex-grow:1}.flex-wrap{flex-wrap:wrap}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.logo{font-family:antonio;font-size:1.5rem;font-weight:500}.message{--_bg-color:inherit;--_color:inherit;background-color:var(--_bg-color);color:var(--_color);border:1px solid var(--_color);border-radius:.35rem;padding:.5rem;font-size:.875rem;line-height:1.25rem}.message--error{--_bg-color:var(--clr-red-100);--_color:var(--clr-red-700)}.message--success{--_bg-color:var(--clr-green-100);--_color:var(--clr-green-700)}.information{--_bg:var(--clr-blue-100);--_color:var(--clr-blue-700);--clr-link:hsl(from var(--_color) h s calc(l - 10));--clr-link-hover:hsl(from var(--_color) h s calc(l - 20));display:flex;flex-direction:column;align-items:center;gap:1rem;border-radius:1rem;padding:1rem;margin:1.5rem 0;background-color:var(--_bg);border:2px solid var(--_color);color:var(--_color);& p{ margin:0; color:inherit; } @media (min-width: 640px){ flex-direction:row; }}.information--tip{--_bg:var(--clr-yellow-100);--_color:var(--clr-yellow-700)}.information--attention{--_bg:var(--clr-red-100);--_color:var(--clr-red-700)}.think{display:flex;flex-direction:column;gap:.8rem;background-color:var(--clr-blue-100);color:var(--_color);border:2px solid var(--clr-blue-700);border-radius:1rem;padding:1rem;margin:1.5rem 0}.think mark{background-color:var(--clr-blue-600);color:var(--clr-white)}.menu-toggle{display:none}.menu-btn{width:30px;height:30px;cursor:pointer;z-index:2;& span{ display:block; width:30px; height:3px; margin:6px 0; background:light-dark(var(--clr-gray-700), var(--clr-gray-100)); border-radius:3px; transition:0.4s; }}.menu{position:fixed;top:56px;left:-100svw;width:100svw;height:100svh;background:light-dark(var(--clr-white),var(--clr-black));padding:10px;transition:.4s;z-index:100;& a{ display:flex; gap:10px; color:light-dark(var(--clr-gray-700), var(--clr-gray-100)); padding:15px; text-decoration:none; transition:0.3s; }}.menu-toggle:checked{& ~ .menu{ left:0; } & ~ .menu-btn{ & span:nth-child(1){ transform:rotate(45deg) translate(5px, 8px); } & span:nth-child(2){ opacity:0; } & span:nth-child(3){ transform:rotate(-45deg) translate(5px, -8px); } }}.btn{--_bg:var(--clr-violet-200);--_color:hsl(from var(--clr-violet-700) h s l / 0.8);--_bg-disabled:var(--clr-gray-200);--_color-disabled:var(--clr-gray-400);--_height:40px;--_padding:8px 16px;--_fs:14px;display:inline-flex;align-items:center;justify-content:center;gap:.5em;background-color:var(--_bg);color:var(--_color);height:var(--_height);padding:var(--_padding);font-size:var(--_fs);white-space:nowrap;border-radius:calc(var(--_height) * 1.2 - var(--_height));font-weight:600;outline:none;border:none;box-shadow:0 0 1px transparent;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;text-decoration:none;& [data-icon], & svg{ pointer-events:none; width:calc(var(--_fs) + 2px); height:calc(var(--_fs) + 2px); } &:hidden{ display:none; } &:hover{ background-color:hsl(from var(--_bg) h s calc(l - 5)); text-decoration:none; cursor:pointer; } &:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--_bg-hover, var(--clr-black)), 0 0 0 4px var(--clr-white); } &:disabled{ cursor:not-allowed !important; background-color:var(--_bg-disabled); color:var(--_color-disabled); }}.btn-secondary{--_bg:var(--clr-fuchsia-200);--_color:var(--clr-fuchsia-700)}.btn-ok{--_bg:var(--clr-blue-200);--_color:var(--clr-blue-700)}.btn-cancel{--_bg:var(--clr-gray-200);--_color:var(--clr-gray-700)}.btn-success{--_bg:var(--clr-green-200);--_color:var(--clr-green-700)}.btn-error{--_bg:var(--clr-red-200);--_color:var(--clr-red-700)}.btn-small{--_height:32px;--_padding:4px 8px;--_fs:12px}.btn-medium{--_height:48px;--_padding:10px 20px;--_fs:16px}.btn-large{--_height:56px;--_padding:12px 24px;--_fs:18px}.accordion{--_bg:light-dark(var(--clr-violet-100), var(--clr-gray-800));--_color:light-dark(var(--clr-black), var(--clr-white));background-color:var(--_bg);color:var(--_color);cursor:pointer;width:100%;text-align:left;border:none;border-radius:.4rem;outline:none;transition:.4s;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem;& h1, & h2, & h3, & h4, & h5, & h6{ margin:0; }}.accordion:after{content:"\2B9F";color:var(--_color);transition:transform .2s ease-out}.accordion-active:after{transform:rotate(180deg)}.accordion-active,.accordion:hover{background-color:light-dark(hsl(from var(--_bg) h s calc(l - 5)),hsl(from var(--_bg) h s calc(l + 5)))}.accordion-panel{max-height:0;overflow:hidden;transition:max-height .2s ease-out}.achievement{--_border:rgb(14 116 144);width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:0;border-radius:.75rem;padding:.25rem;background-color:light-dark(var(--clr-violet-50),var(--clr-gray-800));overflow:hidden;outline:none;margin:0;cursor:pointer;&:hover{ opacity:1; } & > div{ display:flex; flex-direction:column; height:100%; border:solid 4px var(--_border); border-radius:0.75rem; padding:0.25rem; & [data-logo]{ display:flex; align-items:center; gap:0.5rem; & div:nth-child(1){ width:70%; & div{ background-color:var(--_border); border-radius:0.25rem; width:100%; &:nth-child(1){ margin-bottom:1px; height:2px; } &:nth-child(2){ height:0.25rem; } } } & div:nth-child(2){ font-size:0.9rem; font-weight:700; color:var(--_border); } } & [data-image]{ display:flex; align-items:center; justify-content:center; padding:1.5rem; flex-grow:1; & img{ width:60%; height:auto; -o-object-fit:contain; object-fit:contain; } } & h5{ text-align:center; font-size:0.75rem; line-height:1rem; font-weight:700; text-transform:uppercase; letter-spacing:0.025em; color:light-dark(var(--clr-black),var(--clr-white)); margin:0; padding:0; } }}.lesson-card{position:relative;display:flex;flex-direction:column;flex-grow:1;background-color:light-dark(var(--clr-violet-50),var(--clr-gray-800));height:100%;cursor:pointer;overflow:hidden;border:solid 2px light-dark(var(--clr-violet-100),var(--clr-gray-500));border-radius:1rem;&[data-finished]{ border-color:var(--clr-violet-300); } & div[data-image]{ display:flex; justify-content:center; align-items:center; background-color:light-dark(var(--clr-white), var(--clr-gray-100)); padding:20px; } & div[data-body]{ display:flex; flex-direction:column; flex-grow:1; padding:0.8rem 1.3rem 1.3rem; & [data-description]{ margin-top:1rem; height:100%; } & [data-actions]{ display:flex; align-items:center; min-height:60px; } }}.lesson-card-mini{display:flex;align-items:center;height:100%;background-color:light-dark(var(--clr-violet-50),var(--clr-gray-800));margin-top:0;margin-bottom:0;cursor:pointer;overflow:hidden;padding:0 .5rem;border-radius:1rem;border:solid 2px var(--clr-violet-100);&:hover{ border:solid 2px var(--clr-violet-300); }}[data-js=comment-participation] .comment{background-color:light-dark(var(--clr-white),var(--clr-gray-700))}.comment{--_bg:light-dark(var(--clr-violet-50), var(--clr-gray-800));--_color:light-dark(var(--clr-black), var(--clr-white));position:relative;background-color:var(--_bg);color:var(--_color);padding:1rem;border-radius:1rem;&[data-highlight]{ border-width:2px; border-color:var(--clr-violet-300); } & article{ margin-top:1rem; max-width:80ch; & [data-clamp]{ display:-webkit-box; line-clamp:5; overflow:hidden; -webkit-line-clamp:5; -webkit-box-orient:vertical; } } & [data-more]{ font-size:0.9rem; font-style:italic; text-decoration:underline; } & .btn{ --_bg:var(--_bg); --_color:light-dark(var(--clr-violet-500), var(--clr-gray-200)); }}.feed{position:relative;background-color:light-dark(var(--clr-violet-50),var(--clr-gray-800));padding:1rem;border-radius:1rem}.feed header,.comment header{display:flex;align-items:center;gap:1rem;& > div{ & h6{ margin:0; padding:0; font-size:1.2rem; } & p{ color:light-dark(var(--clr-gray-500), var(--clr-gray-400)); font-size:0.9rem; font-style:italic; margin:0 0 1px 0; padding:0; } }}.feed-exercise [data-lesson-image]{height:120px;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-top:1rem}.feed-achievement>ecb-achievement{margin-top:1rem}.ecb-table{overflow-x:auto;overflow-y:hidden;border-radius:1rem;border:1px solid light-dark(var(--clr-violet-200),var(--clr-gray-200))}.ecb-table>table{width:100%;white-space:nowrap;border-collapse:collapse;border-spacing:0}.ecb-table>table caption{background-color:light-dark(var(--clr-violet-200),var(--clr-gray-800));padding:.75rem .5rem;font-size:1.25rem;font-weight:500}.ecb-table>table thead th{background-color:light-dark(var(--clr-violet-100),var(--clr-gray-700));padding:.5rem 1rem;text-align:left;font-weight:500}.ecb-table>table tfoot th{white-space:normal;border-top:2px solid light-dark(var(--clr-violet-100),var(--clr-gray-700));padding:.5rem 1rem;text-align:left;font-weight:400}.ecb-table>table tbody tr:nth-child(even){background-color:light-dark(var(--clr-violet-50),var(--clr-gray-600))}.ecb-table>table tbody tr:hover{background-color:hsl(from var(--clr-violet-300) h s l/.5)}.ecb-table>table tbody tr td{padding:.25rem 1rem}.flashcard{display:flex;flex-grow:1;flex-direction:column;border-radius:1rem;margin:0 auto;background-color:light-dark(var(--clr-violet-100),var(--clr-gray-800));& .word{ display:flex; flex-direction:column; border-radius:1rem; background-color:var(--clr-violet-400); padding:1rem; } & .tag{ -webkit-user-select:none; -moz-user-select:none; user-select:none; border-radius:0.25rem; background-color:var(--clr-white); padding-inline:0.5rem; font-size:0.75rem; line-height:1rem; font-style:italic; color:var(--clr-black); } & .example{ margin-top:0.5rem; font-style:italic; color:var(--clr-gray-500); } @media (min-width: 768px){ margin:0; max-width:320px; }}.word-with-meaning{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;& [data-meaning]{ color:var(--clr-gray-500); font-style:italic; }}.phrase-with-meaning{display:flex;align-items:center;padding:1.5rem;background-color:light-dark(var(--clr-violet-50),var(--clr-gray-800));border-radius:1rem;&:hover{ background-color:light-dark(var(--clr-violet-100),var(--clr-gray-700)); } & [data-index]{ font-family:var(--font-secondary); margin-right:1.5rem; text-align:right; font-size:1.875rem; line-height:2.25rem; color:var(--clr-violet-400); @media (min-width:768px){ font-size:3rem; line-height:1; width:3rem; display:block; } } & [data-phrase]{ display:flex; flex-wrap:wrap; gap:0.25rem; font-size:1.3rem; line-height:1.6rem; font-weight:500; letter-spacing:0.5px; } & [data-meaning]{ display:flex; flex-wrap:wrap; gap:0.25rem; color:light-dark(var(clr-gray-500),var(--clr-gray-400)); font-size:0.9rem; line-height:1.25rem; font-style:italic; } & [data-extra]{ border:solid 0px var(--clr-violet-400); border-left-width:2px; padding-left:0.5rem; }}.lesson-tag{background-color:light-dark(var(--clr-violet-400),var(--clr-gray-100));color:light-dark(var(--clr-white),var(--clr-black));border-radius:.25rem;padding:.25rem .45rem;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:capitalize}.absent-word:before{--_color:light-dark(var(--clr-violet-300), var(--clr-gray-500));content:"########";-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:.375rem;background-color:var(--_color);color:var(--_color)}.question{width:100%;background-color:light-dark(var(--clr-violet-100),var(--clr-gray-800));border-radius:.375rem;& label{ display:flex; cursor:pointer; align-items:center; gap:0.5rem; border-width:1px; padding:1rem; font-size:0.875rem; line-height:1.25rem; } &:hover{ background-color:light-dark(var(--clr-violet-200), var(--clr-gray-700)); } &:has(input:checked){ background-color:hsl(from var(--clr-violet-300) h s l / 0.5); }}.question-counter{border-radius:.25rem;font-weight:600;background-color:light-dark(var(--clr-violet-100),var(--clr-gray-700));padding:.75rem 1rem;font-size:1.2rem}.bia{display:flex;flex-direction:column;margin-top:1rem;gap:1rem;& p{ margin:0; padding:0; } &.success{ font-size:0.9rem; color:var(--clr-green-500); } & .match{ strong{ display:block; font-weight:600; margin-bottom:1rem; color:light-dark(var(--clr-black), var(--clr-white)); } .context{ margin-left:0.5rem; font-size:0.9rem; color:var(--clr-gray-500); .highlight{ --_color:light-dark(var(--clr-red-500), var(--clr-red-300)); font-weight:500; color:var(--_color); border:solid 2px var(--_color); border-radius:4px; padding-inline:4px; } } .replacements{ margin-top:4px; margin-left:0.5rem; font-size:0.9rem; .replacement{ border:solid 2px var(--clr-violet-300); border-radius:4px; padding-inline:4px; margin-inline:2px; } } } .disclaimer{ color:var(--clr-gray-500); font-size:0.9rem; font-style:italic; }}#dialog-audio-recorder{& form{ display:flex; flex-direction:column; align-items:center; justify-content:center; & [data-js="counter"]{ color:var(--clr-gray-500); font-weight:500; font-size:clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem); } & [data-js="container"]{ display:none; flex-direction:column; align-items:center; justify-content:center; } & [data-js="audio-container"]{ display:none; margin-top:1rem; margin-bottom:1rem; flex-grow:1; align-items:center; justify-content:center; } & [data-js="duration"]{ padding:1rem; color:var(--clr-gray-500); } } #wave{ height:70px; width:70px; fill:var(--clr-violet-400); } #Line_1{ animation:pulse 1s infinite; animation-delay:calc(1 * 0.15s); } #Line_2{ animation:pulse 1s infinite; animation-delay:calc(2 * 0.15s); } #Line_3{ animation:pulse 1s infinite; animation-delay:calc(3 * 0.15s); } #Line_4{ animation:pulse 1s infinite; animation-delay:calc(4 * 0.15s); } #Line_5{ animation:pulse 1s infinite; animation-delay:calc(5 * 0.15s); } #Line_6{ animation:pulse 1s infinite; animation-delay:calc(6 * 0.15s); } #Line_7{ animation:pulse 1s infinite; animation-delay:calc(7 * 0.15s); } #Line_8{ animation:pulse 1s infinite; animation-delay:calc(8 * 0.15s); } #Line_9{ animation:pulse 1s infinite; animation-delay:calc(9 * 0.15s); }}.describe-image-card{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-areas:"image" "content";gap:1rem;border-radius:1rem;height:-moz-fit-content;height:fit-content;width:100%;overflow:hidden;background-color:light-dark(var(--clr-violet-50),var(--clr-gray-800));margin-bottom:1rem;& h5{ margin-top:0; } & img{ height:100%; width:100%; -o-object-fit:cover; object-fit:cover; } & [data-content]{ padding:1rem; } @media (min-width: 1024px){ grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-areas:"image content content"; }}.conversation-with-translation{& label{ display:block; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; user-select:none; padding-inline:10px; border-radius:4px; background-color:var(--clr-violet-200); color:var(--clr-violet-500); height:100%; &:hover{ color:var(--clr-violet-700) } } & input[type="radio"]:checked + label{ color:var(--clr-violet-700); font-weight:500; } & div:nth-child(1){ display:flex; gap:0.5rem; margin-bottom:1rem; } &:has([data-tab-spanish]:checked) div:nth-child(2){ display:block; } &:has([data-tab-portuguese]:checked) div:nth-child(3){ display:block; }}#toasts{display:flex;flex-direction:column;gap:.5rem;position:fixed;left:0;right:0;bottom:3rem;z-index:101;transition-duration:1000ms}.toast{--_bg:red;--_color:red;background-color:var(--_bg);color:var(--_color);border-color:var(--_color);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-style:solid;border-width:2px;border-radius:1rem;padding:1rem;max-width:90vw;margin-inline:auto;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:300ms;&[data-visible]{ opacity:1; } & #remaining-bar-container{ margin-top:1rem; height:4px; width:100%; border-radius:2px; background-color:var(--clr-white); overflow:hidden; & > div{ height:4px; width:100%; background-color:var(--_color); } } & #created-at{ font-size:0.9rem; font-style:italic; color:hsl(from var(--_color) h s calc(l + 25)); } &.error{ --_bg:var(--clr-red-100); --_color:var(--clr-red-700); } &.warning{ --_bg:var(--clr-yellow-100); --_color:var(--clr-yellow-700); } &.success{ --_bg:var(--clr-violet-100); --_color:var(--clr-violet-700); } @media (min-width: 1024px){ max-width:70vw; }}.ecb-welcome{grid-area:welcome;display:grid;border-radius:1rem;padding:1.5rem;background-color:light-dark(var(--clr-violet-50),var(--clr-gray-800));grid-template-areas:"greeting" "quote" "menu";grid-template-rows:minmax(6.5rem,max-content)minmax(3rem,max-content)auto;content-visibility:auto;contain-intrinsic-size:300px}.ecb-welcome [data-greeting]{grid-area:greeting;display:block;text-align:center;opacity:1;transition:opacity .2s ease-in;margin:0;font-weight:700}.ecb-welcome [data-quote]{grid-area:quote;display:block;text-align:center;opacity:1;transition:opacity .2s ease-in;max-width:100%}.ecb-welcome [data-quote] small{font-style:italic}.ecb-welcome [data-menu]{grid-area:menu;display:flex;justify-content:center;gap:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ecb-welcome [data-menu] [data-icon]{display:flex;justify-content:center;align-items:center;margin:auto;background-color:var(--clr-white);color:var(--clr-violet-500);padding:.5rem;border-radius:9999px;border:1px solid hsl(from var(--clr-violet-300) h s l/.6);width:40px;height:40px;flex-shrink:0}.ecb-welcome [data-menu] a:hover{text-decoration:none}.ecb-welcome [data-menu] a:hover>[data-icon]{border-color:var(--clr-violet-300);box-shadow:0 0 0 1px hsl(from var(--clr-violet-300) h s l/.5)}.ecb-welcome [data-menu] a>[data-label]{font-size:.875rem;font-weight:600;color:light-dark(var(--clr-gray-700),var(--clr-white));width:12ch;text-align:center}.ecb-welcome [data-menu]>a[data-highlight]{pointer-events:none;cursor:auto;text-decoration:none}.ecb-welcome [data-menu]>a[data-highlight]>div:first-child{border-color:var(--clr-violet-300);box-shadow:0 0 0 2px hsl(from var(--clr-violet-300) h s l/.5)}@media(max-width:768px){.ecb-welcome{grid-template-rows:minmax(4.5rem,max-content)minmax(3rem,max-content)auto}.ecb-welcome [data-menu]{display:none}}.icon-counter{display:flex;gap:.3rem;align-items:center;& p{ font-size:0.875rem; font-weight:500; margin-bottom:0; color:light-dark(var(--clr-violet-500), var(--clr-gray-300)); }}.p-0{padding:0}.p-4{padding:1rem}.hidden{display:none}.mt-sm{margin-top:calc(var(--lh-base-px)/2)}.mt{margin-top:var(--lh-base-px)}.mb{margin-bottom:var(--lh-base-px)}button[data-audio-segment]{display:inline;background-color:inherit;outline:none;border:none;cursor:pointer;width:36px;height:36px;color:light-dark(var(--clr-violet-500),var(--clr-gray-300));&:hover{ color:light-dark(var(--clr-violet-700),var(--clr-gray-200)); }}.invisible{visibility:hidden}.frame-counter{--_color:light-dark(var(--clr-violet-400), var(--clr-gray-200));color:var(--_color);padding:.25rem 1rem;border:solid 1px hsl(from var(--_color) h s l/.5);border-radius:.375rem}.questionnaire-progress{--stripe-size:4px;display:flex;justify-content:stretch;gap:5px;height:var(--stripe-size);min-height:var(--stripe-size);margin-top:1rem;& div{ width:100%; height:var(--stripe-size); min-height:var(--stripe-size); background-color:light-dark(var(--clr-violet-100), var(--clr-gray-600)); border-radius:4px; } & div[data-highlight]{ background-color:light-dark(var(--clr-violet-300), var(--clr-gray-200)); }}.text-highlight{color:light-dark(var(--clr-violet-400),var(--clr-gray-500))}.is-error{background-color:hsl(from light-dark(var(--clr-error),var(--clr-error-dark)) h s calc(l + 10));color:light-dark(var(--clr-on-error),var(--clr-on-error-dark))}.is-success{background-color:light-dark(var(--clr-success),var(--clr-success-dark))}@keyframes pulse{0%{transform:scaleY(1);transform-origin:50% 50%}50%{transform:scaleY(.7);transform-origin:50% 50%}100%{transform:scaleY(1);transform-origin:50% 50%}}@keyframes skeleton{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes modalf{0%{transform:scale(0)}100%{transform:scale(1)}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1)infinite}.animate-spin{animation:spin 1s linear infinite}.animate-modalf[open]{animation:modalf .15s ease-in-out}