#wkuwaj-concept { color-scheme:light dark; --wk-bg:light-dark(#f7fafb,#10181f); --wk-card:light-dark(#ffffff,#18242e); --wk-ink:light-dark(#152a37,#eef5f8); --wk-muted:light-dark(#566b78,#a9becb); --wk-line:light-dark(#dbe5e9,#30434f); --wk-accent:light-dark(#096d62,#66dbc6); --wk-soft:light-dark(#e4f4ef,#203d38); --wk-blue:light-dark(#2563eb,#8aafff); --wk-button:#0c7067; --wk-button-ink:#ffffff; --wk-shadow:light-dark(#132c4014,#00000035); font-family:Inter,system-ui,-apple-system,sans-serif; color:var(--wk-ink); background:var(--wk-bg); border-radius:20px; width:100%; overflow:clip; text-align:left; } #wkuwaj-concept * {box-sizing:border-box;} #wkuwaj-concept [hidden]{display:none!important;} #wkuwaj-concept h1,#wkuwaj-concept h2,#wkuwaj-concept h3,#wkuwaj-concept p{margin:0;} #wkuwaj-concept button,#wkuwaj-concept a{font:inherit;} #wkuwaj-concept button{cursor:pointer;} #wkuwaj-concept a{color:inherit;text-decoration:none;} #wkuwaj-concept button:focus-visible,#wkuwaj-concept a:focus-visible{outline:3px solid var(--wk-blue);outline-offset:4px;} #wkuwaj-concept .wk-wrap{width:calc(100% - 72px);max-width:1120px;margin:auto;} #wkuwaj-concept .wk-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:88px;border-bottom:1px solid var(--wk-line);} #wkuwaj-concept .wk-brand{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:800;letter-spacing:-1px;} #wkuwaj-concept .wk-logo{background:var(--wk-button);color:white;display:grid;place-items:center;width:32px;height:35px;border-radius:9px;font-size:22px;transform:rotate(-5deg);} #wkuwaj-concept .wk-brand em{font-style:normal;color:var(--wk-accent);} #wkuwaj-concept .wk-nav-links{display:flex;gap:25px;font-size:13px;color:var(--wk-muted);} #wkuwaj-concept .wk-account{display:flex;gap:14px;align-items:center;padding-right:0;font-size:13px;} #wkuwaj-concept .wk-theme{background:var(--wk-card);border:1px solid var(--wk-line);border-radius:50%;width:36px;height:36px;color:var(--wk-ink);display:grid;place-items:center;} #wkuwaj-concept .wk-login{font-weight:600;} #wkuwaj-concept .wk-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:650;letter-spacing:1px;text-transform:uppercase;color:var(--wk-accent);} #wkuwaj-concept .wk-dot{width:7px;height:7px;background:var(--wk-accent);border-radius:50%;} #wkuwaj-concept .wk-hero{display:grid;grid-template-columns:.96fr 1.04fr;gap:35px;padding:64px 0 50px;align-items:center;} #wkuwaj-concept .wk-hero h1{font-size:clamp(36px,4.7vw,58px);line-height:1.07;font-weight:750;letter-spacing:-2.2px;margin:21px 0;} #wkuwaj-concept .wk-hero h1 span{color:var(--wk-accent);} #wkuwaj-concept .wk-lead{font-size:15px;line-height:1.8;color:var(--wk-muted);max-width:420px;} #wkuwaj-concept .wk-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:27px;} #wkuwaj-concept .wk-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--wk-button);color:var(--wk-button-ink);border:1px solid transparent;border-radius:10px;padding:13px 17px;font-size:13px;font-weight:650;min-height:44px;} #wkuwaj-concept .wk-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--wk-card);color:var(--wk-ink);border:1px solid var(--wk-line);border-radius:10px;padding:13px 15px;font-size:13px;font-weight:550;min-height:44px;} #wkuwaj-concept .wk-micro{margin-top:14px;font-size:11px;color:var(--wk-muted);line-height:1.6;} #wkuwaj-concept .wk-guide-wrap{min-width:0;position:relative;padding:15px 0;} #wkuwaj-concept .wk-guide-wrap:before{content:'';position:absolute;inset:-25px -20px;background:radial-gradient(ellipse,var(--wk-soft),transparent 70%);pointer-events:none;} #wkuwaj-concept .wk-guide{position:relative;border:1px solid var(--wk-line);background:var(--wk-card);border-radius:16px;box-shadow:0 22px 70px var(--wk-shadow);overflow:hidden;} #wkuwaj-concept .wk-subjects{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--wk-muted);padding:0 0 32px;border-bottom:1px solid var(--wk-line);} #wkuwaj-concept .wk-subjects span:not(:first-child){border-radius:20px;border:1px solid var(--wk-line);padding:6px 10px;} #wkuwaj-concept .wk-section{padding:49px 0;} #wkuwaj-concept .wk-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:25px;} #wkuwaj-concept .wk-heading h2{font-size:29px;line-height:1.2;letter-spacing:-1px;margin-top:9px;font-weight:700;} #wkuwaj-concept .wk-heading>p{font-size:13px;color:var(--wk-muted);line-height:1.7;max-width:285px;} #wkuwaj-concept .wk-footer{border-top:1px solid var(--wk-line);display:flex;justify-content:space-between;gap:20px;padding:22px 0;color:var(--wk-muted);font-size:10px;} #wkuwaj-concept .wk-footer-links{display:flex;gap:14px;flex-wrap:wrap;} #wkuwaj-concept .wk-local-notice{font-size:11px;text-align:center;color:var(--wk-muted);min-height:20px;} #wkuwaj-concept i[data-lucide]{display:inline-block;width:17px;height:17px;} #wkuwaj-concept svg{width:17px;height:17px;flex-shrink:0;} @media(max-width:850px){#wkuwaj-concept .wk-nav-links{display:none;} #wkuwaj-concept .wk-account{padding-right:0;} #wkuwaj-concept .wk-wrap{width:calc(100% - 44px);} #wkuwaj-concept .wk-hero{gap:24px;} #wkuwaj-concept .wk-hero h1{font-size:42px;} } @media(max-width:640px){#wkuwaj-concept .wk-wrap{width:calc(100% - 36px);} #wkuwaj-concept .wk-nav{min-height:76px;gap:8px;} #wkuwaj-concept .wk-brand{font-size:21px;} #wkuwaj-concept .wk-account{gap:9px;padding-right:0;margin-right:0;} #wkuwaj-concept .wk-login{display:none;} #wkuwaj-concept .wk-theme{width:34px;height:34px;} #wkuwaj-concept .wk-hero{grid-template-columns:1fr;padding:36px 0 25px;gap:19px;} #wkuwaj-concept .wk-hero h1{font-size:41px;line-height:1.1;letter-spacing:-1.7px;} #wkuwaj-concept .wk-lead{font-size:14px;} #wkuwaj-concept .wk-actions{margin-top:23px;} #wkuwaj-concept .wk-primary,#wkuwaj-concept .wk-secondary{font-size:12px;padding:12px 14px;} #wkuwaj-concept .wk-guide-wrap{padding:0;} #wkuwaj-concept .wk-subjects{padding-bottom:25px;gap:8px;} #wkuwaj-concept .wk-subjects span:first-child{width:100%;} #wkuwaj-concept .wk-section{padding:32px 0;} #wkuwaj-concept .wk-heading{display:block;margin-bottom:22px;} #wkuwaj-concept .wk-heading h2{font-size:25px;} #wkuwaj-concept .wk-heading>p{margin-top:12px;max-width:none;} #wkuwaj-concept .wk-modes,#wkuwaj-concept .wk-together{grid-template-columns:1fr;} #wkuwaj-concept .wk-footer{flex-direction:column;gap:12px;} } #wkuwaj-concept{border-radius:0;min-height:100vh;} body{margin:0;background:var(--bg-main);font-family:Inter,system-ui,sans-serif;} :root{color-scheme:light;--bg-main:#f7fafb;--bg-card:#fff;--text-main:#152a37;--text-muted:#566b78;--border:#dbe5e9;--accent-blue:#096d62;--accent-hover:#075c53;--shadow:#132c4014;} :root[data-theme=dark]{color-scheme:dark;--bg-main:#10181f;--bg-card:#18242e;--text-main:#eef5f8;--text-muted:#a9becb;--border:#30434f;--accent-blue:#66dbc6;--accent-hover:#8ae6d5;--shadow:#00000035;} #wkuwaj-concept{color-scheme:inherit;} #wkuwaj-concept .wk-account{flex-shrink:0;} #wkuwaj-concept .wk-beta{padding:12px 0;font-size:12px;color:var(--wk-muted);} @media(max-width:640px){#wkuwaj-concept .wk-login{display:block;} #wkuwaj-concept .wk-account{font-size:11px;}} /* Account controls and motion remain local to the homepage. */ #wkuwaj-concept .wk-nav-actions {display:flex; align-items:center; gap:14px; font-size:13px; flex-shrink:0;} #wkuwaj-concept .wk-login-panel { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:10px 14px; border:1px solid color-mix(in srgb,var(--wk-accent) 35%,var(--wk-line)); border-radius:9px; background:var(--wk-card); color:var(--wk-accent); font-size:12px; white-space:nowrap; } #wkuwaj-concept .wk-login-panel svg {width:16px; height:16px;} #wkuwaj-concept .wk-login-panel:hover {background:var(--wk-soft); border-color:var(--wk-accent);} #wkuwaj-concept .wk-account-icon { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border:1px solid var(--wk-line); border-radius:50%; background:var(--wk-card); color:var(--wk-muted); } #wkuwaj-concept .wk-account-icon svg {width:19px; height:19px;} #wkuwaj-concept .wk-account-icon:hover {color:var(--wk-accent); border-color:var(--wk-accent); background:var(--wk-soft);} #wkuwaj-concept .wk-logout:hover {color:light-dark(#b94141,#ffabab); border-color:currentColor;} #wkuwaj-concept .wk-nav-links a {position:relative; padding:8px 0;} #wkuwaj-concept .wk-nav-links a::after { content:''; position:absolute; bottom:1px; left:0; width:100%; height:2px; background:var(--wk-accent); transform:scaleX(0); transform-origin:left; } #wkuwaj-concept .wk-hero {position:relative; isolation:isolate;} #wkuwaj-concept .wk-hero-copy, #wkuwaj-concept .wk-guide-wrap {position:relative; z-index:1;} #wkuwaj-concept .wk-ambient {position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;} #wkuwaj-concept .wk-ambient span { position:absolute; width:clamp(110px,25vw,310px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,light-dark(#8ddfc32e,#66dbc619),transparent 70%); } #wkuwaj-concept .wk-ambient span:nth-child(1) {left:3%; top:10%;} #wkuwaj-concept .wk-ambient span:nth-child(2) {right:4%; top:4%; background:radial-gradient(circle,light-dark(#90b9f32e,#8aafff17),transparent 70%);} #wkuwaj-concept .wk-ambient span:nth-child(3) {left:38%; bottom:5%; width:clamp(100px,20vw,250px);} #wkuwaj-concept .wk-motion-control { position:relative; display:flex; align-items:center; justify-content:center; gap:5px; margin:9px auto 0; padding:5px 8px; border:0; border-radius:6px; background:transparent; color:var(--wk-muted); font-size:10px; min-height:28px; } #wkuwaj-concept .wk-motion-control svg {width:13px; height:13px;} #wkuwaj-concept .wk-motion-control:hover {background:var(--wk-soft); color:var(--wk-accent);} #wkuwaj-concept .wk-motion-control:disabled {cursor:default;} #wkuwaj-concept .wk-primary {position:relative; overflow:hidden;} #wkuwaj-concept .wk-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,#ffffff26 48%,transparent 75%); transform:translateX(-130%); pointer-events:none; } #wkuwaj-concept .wk-primary span {display:inline-block;} #wkuwaj-concept .wk-mode, #wkuwaj-concept .wk-plan, #wkuwaj-concept .wk-share-preview {position:relative; isolation:isolate;} #wkuwaj-concept .wk-mode::before, #wkuwaj-concept .wk-plan::before, #wkuwaj-concept .wk-share-preview::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; background:radial-gradient(230px circle at var(--wk-pointer-x,50%) var(--wk-pointer-y,30%),var(--wk-soft),transparent 75%); pointer-events:none; } #wkuwaj-concept .wk-reveal-ready [data-reveal] { opacity:0; translate:0 22px; transition:opacity .65s ease,translate .65s cubic-bezier(.2,.7,.2,1); transition-delay:var(--wk-reveal-delay,0ms); } #wkuwaj-concept .wk-reveal-ready [data-reveal].wk-revealed {opacity:1; translate:0 0;} #wkuwaj-concept.wk-motion-on .wk-hero-copy > * {animation:wk-entrance .8s cubic-bezier(.2,.7,.2,1) both;} #wkuwaj-concept.wk-motion-on .wk-hero-copy h1 {animation-delay:.1s;} #wkuwaj-concept.wk-motion-on .wk-lead {animation-delay:.2s;} #wkuwaj-concept.wk-motion-on .wk-actions {animation-delay:.3s;} #wkuwaj-concept.wk-motion-on .wk-micro {animation-delay:.4s;} #wkuwaj-concept.wk-motion-on .wk-guide-wrap {animation:wk-entrance .9s .2s cubic-bezier(.2,.7,.2,1) both;} #wkuwaj-concept.wk-motion-on .wk-ambient span {animation:wk-drift 13s ease-in-out infinite alternate;} #wkuwaj-concept.wk-motion-on .wk-ambient span:nth-child(2) {animation-duration:17s; animation-delay:-6s;} #wkuwaj-concept.wk-motion-on .wk-ambient span:nth-child(3) {animation-duration:15s; animation-delay:-4s;} #wkuwaj-concept.wk-motion-on .wk-dot {animation:wk-pulse 3s ease-out infinite;} #wkuwaj-concept.wk-motion-on .wk-hero h1 span { background:linear-gradient(110deg,var(--wk-accent) 15%,light-dark(#28a78f,#b2f4e4) 45%,var(--wk-accent) 70%); background-size:220% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; animation:wk-text-glow 9s ease-in-out infinite; } #wkuwaj-concept.wk-motion-on .wk-guide {animation:wk-elevation 7s ease-in-out infinite;} #wkuwaj-concept.wk-motion-on .wk-primary::before {animation:wk-shine 7s 1s ease-in-out infinite;} @media(hover:hover) and (pointer:fine) { #wkuwaj-concept.wk-motion-on .wk-primary, #wkuwaj-concept.wk-motion-on .wk-secondary, #wkuwaj-concept.wk-motion-on .wk-account-icon, #wkuwaj-concept.wk-motion-on .wk-theme, #wkuwaj-concept.wk-motion-on .wk-mode, #wkuwaj-concept.wk-motion-on .wk-plan, #wkuwaj-concept.wk-motion-on .wk-share-preview { transition:opacity .65s ease var(--wk-reveal-delay,0ms),translate .65s cubic-bezier(.2,.7,.2,1) var(--wk-reveal-delay,0ms),transform .25s ease,box-shadow .25s ease,border-color .25s ease; } #wkuwaj-concept.wk-motion-on .wk-mode::before, #wkuwaj-concept.wk-motion-on .wk-plan::before, #wkuwaj-concept.wk-motion-on .wk-share-preview::before {transition:opacity .3s ease;} #wkuwaj-concept.wk-motion-on .wk-mode:hover, #wkuwaj-concept.wk-motion-on .wk-plan:hover, #wkuwaj-concept.wk-motion-on .wk-share-preview:hover { transform:translateY(-5px); box-shadow:0 16px 36px var(--wk-shadow); border-color:var(--wk-accent); } #wkuwaj-concept.wk-motion-on .wk-mode:hover::before, #wkuwaj-concept.wk-motion-on .wk-plan:hover::before, #wkuwaj-concept.wk-motion-on .wk-share-preview:hover::before {opacity:1;} #wkuwaj-concept.wk-motion-on .wk-primary:hover, #wkuwaj-concept.wk-motion-on .wk-secondary:hover {transform:translateY(-2px); box-shadow:0 8px 20px var(--wk-shadow);} #wkuwaj-concept.wk-motion-on .wk-primary span, #wkuwaj-concept.wk-motion-on .wk-mode-icon, #wkuwaj-concept.wk-motion-on .wk-logo, #wkuwaj-concept.wk-motion-on .wk-nav-links a::after {transition:transform .3s ease;} #wkuwaj-concept.wk-motion-on .wk-primary:hover span {transform:translate(2px,-2px);} #wkuwaj-concept.wk-motion-on .wk-mode:hover .wk-mode-icon {transform:rotate(-7deg) scale(1.08);} #wkuwaj-concept.wk-motion-on .wk-brand:hover .wk-logo {transform:rotate(5deg);} #wkuwaj-concept.wk-motion-on .wk-account-icon:hover, #wkuwaj-concept.wk-motion-on .wk-theme:hover {transform:translateY(-2px);} #wkuwaj-concept.wk-motion-on .wk-nav-links a:hover::after {transform:scaleX(1);} #wkuwaj-concept.wk-motion-on .wk-guide:hover, #wkuwaj-concept.wk-motion-on .wk-guide:focus-within {animation-play-state:paused;} } @keyframes wk-entrance {from {opacity:0; transform:translateY(18px);} to {opacity:1; transform:translateY(0);}} @keyframes wk-drift {from {transform:translate(-8px,8px) scale(.95);} to {transform:translate(18px,-12px) scale(1.1);}} @keyframes wk-elevation {0%,100% {box-shadow:0 22px 70px var(--wk-shadow);} 50% {box-shadow:0 28px 85px var(--wk-shadow),0 0 22px light-dark(#8ddfc31a,#66dbc60a);}} @keyframes wk-pulse {0% {box-shadow:0 0 0 0 light-dark(#096d6228,#66dbc632);} 65%,100% {box-shadow:0 0 0 7px transparent;}} @keyframes wk-text-glow {0%,100% {background-position:0% 50%;} 50% {background-position:100% 50%;}} @keyframes wk-shine {0%,72% {transform:translateX(-130%);} 88%,100% {transform:translateX(130%);}} @keyframes wk-progress {from {transform:scaleX(0);} to {transform:scaleX(1);}} #wkuwaj-concept.wk-page-hidden *, #wkuwaj-concept.wk-page-hidden *::before, #wkuwaj-concept.wk-page-hidden *::after {animation-play-state:paused!important;} #wkuwaj-concept[data-motion=off] *, #wkuwaj-concept[data-motion=off] *::before, #wkuwaj-concept[data-motion=off] *::after {animation:none!important; transition:none!important;} @media(prefers-reduced-motion:reduce) { #wkuwaj-concept *, #wkuwaj-concept *::before, #wkuwaj-concept *::after {animation:none!important; transition:none!important;} #wkuwaj-concept .wk-reveal-ready [data-reveal] {opacity:1; translate:none;} } @media(max-width:640px) { #wkuwaj-concept .wk-nav-actions {font-size:11px; gap:9px;} #wkuwaj-concept .wk-nav.wk-nav-member {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 8px; padding:18px 0 16px; min-height:0;} #wkuwaj-concept .wk-nav-member .wk-nav-actions {display:contents;} #wkuwaj-concept .wk-nav-member .wk-account {grid-column:2; grid-row:1; gap:6px;} #wkuwaj-concept .wk-nav-member .wk-login-panel { grid-column:1 / -1; grid-row:2; display:flex; width:100%; min-height:44px; font-size:14px; background:var(--wk-soft); } #wkuwaj-concept .wk-account-icon {width:34px; height:34px;} } /* Learning modes and sharing use small illustrative previews. */ #wkuwaj-concept.wk-reveal-ready .wk-modes [data-reveal], #wkuwaj-concept.wk-reveal-ready .wk-together [data-reveal] { opacity:0; translate:0 22px; transition:opacity .65s ease,translate .65s cubic-bezier(.2,.7,.2,1); transition-delay:var(--wk-reveal-delay,0ms); } #wkuwaj-concept.wk-reveal-ready .wk-modes [data-reveal].wk-revealed, #wkuwaj-concept.wk-reveal-ready .wk-together [data-reveal].wk-revealed {opacity:1; translate:0 0;} #wkuwaj-concept .wk-modes {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;} #wkuwaj-concept .wk-mode { --wk-mode-accent:var(--wk-accent); --wk-mode-soft:var(--wk-soft); display:flex; flex-direction:column; min-width:0; padding:24px; border:1px solid var(--wk-line); border-radius:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--wk-mode-soft) 20%,var(--wk-card)),var(--wk-card) 55%); } #wkuwaj-concept .wk-mode-test {--wk-mode-accent:var(--wk-blue); --wk-mode-soft:light-dark(#eaf0ff,#24334a);} #wkuwaj-concept .wk-mode-pairs {--wk-mode-accent:light-dark(#7451aa,#c3a1ed); --wk-mode-soft:light-dark(#f1eafa,#342c46);} #wkuwaj-concept .wk-mode-heading {display:flex; align-items:center; gap:12px;} #wkuwaj-concept .wk-mode-icon {display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:12px; background:var(--wk-mode-soft); color:var(--wk-mode-accent);} #wkuwaj-concept .wk-mode-icon svg {width:22px; height:22px;} #wkuwaj-concept .wk-mode h3 {font-size:21px; letter-spacing:-.6px; line-height:1.2; font-weight:650;} #wkuwaj-concept .wk-mode > p {margin-top:14px; min-height:42px; font-size:12px; line-height:1.75; color:var(--wk-muted);} #wkuwaj-concept .wk-mode-preview {position:relative; height:176px; margin:20px 0; border-radius:14px; background:var(--wk-bg); border:1px solid var(--wk-line);} #wkuwaj-concept .wk-mode-preview small {display:block; font-size:9px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--wk-muted);} #wkuwaj-concept .wk-flash-preview {display:grid; place-items:center;} #wkuwaj-concept .wk-flash-back {position:absolute; inset:24px 27px; transform:rotate(6deg); border:1px solid color-mix(in srgb,var(--wk-mode-accent) 28%,var(--wk-line)); border-radius:12px; background:var(--wk-mode-soft);} #wkuwaj-concept .wk-flash-front { position:relative; width:calc(100% - 48px); padding:17px; border:1px solid var(--wk-line); border-radius:12px; background:var(--wk-card); transform:rotate(-3deg); box-shadow:0 8px 20px var(--wk-shadow); } #wkuwaj-concept .wk-flash-front strong {display:block; font-size:14px; letter-spacing:-.3px; line-height:1.4; margin-top:9px;} #wkuwaj-concept .wk-flash-hint {display:flex; align-items:center; gap:6px; margin-top:12px; font-size:9px; color:var(--wk-mode-accent);} #wkuwaj-concept .wk-flash-hint svg {width:13px; height:13px;} #wkuwaj-concept .wk-test-preview {padding:18px;} #wkuwaj-concept .wk-test-preview > strong {display:block; font-size:12px; line-height:1.5; margin:8px 0 12px; letter-spacing:-.2px;} #wkuwaj-concept .wk-test-choice {display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--wk-line); border-radius:8px; font-size:10px; line-height:1.4; color:var(--wk-muted); background:var(--wk-card);} #wkuwaj-concept .wk-test-choice + .wk-test-choice {margin-top:7px;} #wkuwaj-concept .wk-test-choice > span {font-size:9px; font-weight:650;} #wkuwaj-concept .wk-test-choice-correct {color:var(--wk-mode-accent); background:var(--wk-mode-soft); border-color:color-mix(in srgb,var(--wk-mode-accent) 45%,var(--wk-line));} #wkuwaj-concept .wk-test-choice-correct svg {width:14px; height:14px; margin-left:auto;} #wkuwaj-concept .wk-pairs-preview {padding:18px 14px;} #wkuwaj-concept .wk-pairs-preview > small {margin-bottom:14px;} #wkuwaj-concept .wk-pair-preview-row {display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); gap:4px; align-items:center;} #wkuwaj-concept .wk-pair-preview-row + .wk-pair-preview-row {margin-top:10px;} #wkuwaj-concept .wk-pair-preview-row > span {display:grid; place-items:center; min-height:38px; padding:5px; border:1px solid color-mix(in srgb,var(--wk-mode-accent) 28%,var(--wk-line)); border-radius:8px; background:var(--wk-mode-soft); color:var(--wk-mode-accent); font-size:9px; line-height:1.4; text-align:center;} #wkuwaj-concept .wk-pair-preview-row svg {width:22px; height:16px; color:var(--wk-mode-accent);} #wkuwaj-concept .wk-pairs-hint {display:block; margin-top:12px; font-size:9px; text-align:center; color:var(--wk-muted);} #wkuwaj-concept .wk-together { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:30px 40px; align-items:center; padding:36px 40px 24px; margin:0 0 40px; border:1px solid color-mix(in srgb,var(--wk-accent) 25%,var(--wk-line)); border-radius:22px; background:linear-gradient(115deg,color-mix(in srgb,var(--wk-soft) 55%,var(--wk-card)),var(--wk-card)); } #wkuwaj-concept .wk-together-copy {min-width:0;} #wkuwaj-concept .wk-together h2 {font-size:35px; line-height:1.15; letter-spacing:-1.2px; margin:14px 0;} #wkuwaj-concept .wk-together h2 span {color:var(--wk-accent);} #wkuwaj-concept .wk-together-copy > p {font-size:13px; line-height:1.8; color:var(--wk-muted); max-width:350px;} #wkuwaj-concept .wk-together-benefits {display:flex; flex-wrap:wrap; gap:10px 16px; padding:0; margin:18px 0 22px; list-style:none; color:var(--wk-muted); font-size:10px; line-height:1.6;} #wkuwaj-concept .wk-together-benefits li::before {content:'✓'; color:var(--wk-accent); font-weight:700; margin-right:6px;} #wkuwaj-concept .wk-together .wk-together-cta {gap:28px; background:light-dark(#096d62,#66dbc6); color:light-dark(#ffffff,#10352e); box-shadow:0 5px 18px light-dark(#096d6220,#66dbc618);} #wkuwaj-concept .wk-together-note {display:block; margin-top:12px; font-size:10px; line-height:1.7; color:var(--wk-muted); max-width:350px;} #wkuwaj-concept .wk-share-preview {padding:24px; min-width:0; border:1px solid var(--wk-line); border-radius:18px; background:var(--wk-card); box-shadow:0 14px 38px var(--wk-shadow);} #wkuwaj-concept .wk-share-top {display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px;} #wkuwaj-concept .wk-share-icon {display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:10px; background:var(--wk-soft); color:var(--wk-accent);} #wkuwaj-concept .wk-share-icon svg {width:20px; height:20px;} #wkuwaj-concept .wk-share-top > div {min-width:0;} #wkuwaj-concept .wk-share-top strong {display:block; font-size:13px; letter-spacing:-.2px; line-height:1.5;} #wkuwaj-concept .wk-share-top small {display:block; margin-top:3px; font-size:10px; color:var(--wk-muted);} #wkuwaj-concept .wk-status {display:inline-flex; align-items:center; gap:5px; border-radius:20px; padding:6px 8px; color:var(--wk-accent); background:var(--wk-soft); font-size:9px; white-space:nowrap;} #wkuwaj-concept .wk-status > span {display:block; width:5px; height:5px; border-radius:50%; background:currentColor;} #wkuwaj-concept .wk-share-link {display:flex; align-items:center; gap:8px; padding:13px 12px; margin-top:19px; border:1px dashed var(--wk-line); border-radius:10px; background:var(--wk-bg); color:var(--wk-muted); font-size:10px; line-height:1.5;} #wkuwaj-concept .wk-share-link svg {width:15px; height:15px; color:var(--wk-accent);} #wkuwaj-concept .wk-share-link svg:last-child {margin-left:auto;} #wkuwaj-concept .wk-share-students {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px;} #wkuwaj-concept .wk-share-person {--wk-person-color:var(--wk-accent); --wk-person-soft:var(--wk-soft); padding:14px; border:1px solid var(--wk-line); border-radius:12px; background:var(--wk-bg); text-align:center;} #wkuwaj-concept .wk-share-person:last-child {--wk-person-color:var(--wk-blue); --wk-person-soft:light-dark(#eaf0ff,#24334a);} #wkuwaj-concept .wk-share-avatar {display:grid; place-items:center; width:30px; height:30px; margin:0 auto 8px; border-radius:50%; background:var(--wk-person-soft); color:var(--wk-person-color); font-size:11px; font-weight:650;} #wkuwaj-concept .wk-share-person strong {display:block; font-size:11px; font-weight:650;} #wkuwaj-concept .wk-share-person small {display:block; margin-top:4px; font-size:9px; color:var(--wk-muted);} #wkuwaj-concept .wk-share-progress {display:block; height:4px; margin-top:12px; border-radius:4px; background:var(--wk-line); overflow:hidden;} #wkuwaj-concept .wk-share-progress > span {display:block; width:68%; height:100%; border-radius:inherit; background:var(--wk-person-color); transform-origin:left;} #wkuwaj-concept .wk-share-person:last-child .wk-share-progress > span {width:42%;} #wkuwaj-concept .wk-share-note {font-size:10px; line-height:1.7; margin-top:16px; color:var(--wk-muted);} #wkuwaj-concept .wk-community-note {grid-column:1 / -1; display:flex; align-items:center; gap:12px; padding-top:22px; border-top:1px solid var(--wk-line);} #wkuwaj-concept .wk-community-icon {display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:10px; background:var(--wk-soft); color:var(--wk-accent);} #wkuwaj-concept .wk-community-note > div {flex:1; min-width:0;} #wkuwaj-concept .wk-community-note strong {display:block; font-size:12px; font-weight:650; line-height:1.5;} #wkuwaj-concept .wk-community-note p {margin-top:4px; font-size:11px; line-height:1.7; color:var(--wk-muted);} #wkuwaj-concept .wk-community-note > a {display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 0 8px 12px; color:var(--wk-accent); font-size:12px; font-weight:650; white-space:nowrap;} #wkuwaj-concept.wk-motion-on .wk-mode-flashcards.wk-revealed .wk-flash-front {animation:wk-flash-float 6s ease-in-out infinite;} #wkuwaj-concept.wk-motion-on .wk-mode-test.wk-revealed .wk-test-choice-correct svg path {stroke-dasharray:24; animation:wk-check-draw 1s .35s both;} #wkuwaj-concept.wk-motion-on .wk-mode-pairs.wk-revealed .wk-pair-preview-row svg path {stroke-dasharray:26; animation:wk-pair-connect 1s .35s both;} #wkuwaj-concept.wk-motion-on .wk-mode-pairs.wk-revealed .wk-pair-preview-row + .wk-pair-preview-row svg path {animation-delay:.6s;} #wkuwaj-concept.wk-motion-on .wk-share-preview.wk-revealed .wk-share-progress > span {animation:wk-progress 1.1s .3s both;} #wkuwaj-concept.wk-motion-on .wk-share-preview.wk-revealed .wk-share-person:last-child .wk-share-progress > span {animation-delay:.55s;} #wkuwaj-concept.wk-motion-on .wk-share-preview.wk-revealed .wk-status > span {animation:wk-pulse 3s ease-out infinite;} @keyframes wk-flash-float {0%,100% {transform:translateY(0) rotate(-3deg);} 50% {transform:translateY(-5px) rotate(0);}} @keyframes wk-check-draw {from {stroke-dashoffset:24;} to {stroke-dashoffset:0;}} @keyframes wk-pair-connect {from {stroke-dashoffset:26;} to {stroke-dashoffset:0;}} @media(hover:hover) and (pointer:fine) { #wkuwaj-concept.wk-motion-on .wk-mode:hover {border-color:var(--wk-mode-accent);} #wkuwaj-concept.wk-motion-on .wk-community-note > a span {transition:transform .25s ease;} #wkuwaj-concept.wk-motion-on .wk-community-note > a:hover span {transform:translate(2px,-2px);} } @media(max-width:1000px) { #wkuwaj-concept .wk-mode {padding:20px;} #wkuwaj-concept .wk-mode-heading {gap:9px;} #wkuwaj-concept .wk-mode h3 {font-size:19px;} #wkuwaj-concept .wk-mode-icon {width:34px; height:34px; border-radius:10px;} #wkuwaj-concept .wk-test-preview {padding:16px 12px;} #wkuwaj-concept .wk-pairs-preview {padding:18px 10px;} #wkuwaj-concept .wk-flash-front {width:calc(100% - 32px); padding:15px;} #wkuwaj-concept .wk-together {padding:30px 30px 22px; gap:26px;} #wkuwaj-concept .wk-share-top .wk-status {grid-column:2 / -1; justify-self:start;} } @media(max-width:800px) { #wkuwaj-concept .wk-modes {grid-template-columns:1fr;} #wkuwaj-concept .wk-mode {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 24px; padding:24px;} #wkuwaj-concept .wk-mode-heading, #wkuwaj-concept .wk-mode > p {grid-column:1;} #wkuwaj-concept .wk-mode-preview {grid-column:2; grid-row:1 / 3; margin:0; height:176px; align-self:center;} #wkuwaj-concept .wk-mode h3 {font-size:21px;} #wkuwaj-concept .wk-mode-icon {width:40px; height:40px;} #wkuwaj-concept .wk-together {grid-template-columns:1fr;} #wkuwaj-concept .wk-together-copy > p, #wkuwaj-concept .wk-together-note {max-width:460px;} #wkuwaj-concept .wk-share-top .wk-status {grid-column:auto; justify-self:end;} } @media(max-width:640px) { #wkuwaj-concept .wk-mode {display:flex; padding:22px; border-radius:18px;} #wkuwaj-concept .wk-mode > p {font-size:13px; min-height:0; margin-top:12px;} #wkuwaj-concept .wk-mode-preview {align-self:stretch; margin:18px 0; height:176px;} #wkuwaj-concept .wk-mode-icon {width:38px; height:38px;} #wkuwaj-concept .wk-together {padding:24px; gap:24px; margin-bottom:28px; border-radius:18px;} #wkuwaj-concept .wk-together h2 {font-size:30px;} #wkuwaj-concept .wk-together-benefits {gap:9px 14px; font-size:11px;} #wkuwaj-concept .wk-together .wk-together-cta {width:100%; justify-content:space-between; font-size:13px; min-height:48px;} #wkuwaj-concept .wk-share-preview {padding:18px;} #wkuwaj-concept .wk-share-top strong {font-size:12px;} #wkuwaj-concept .wk-share-top {grid-template-columns:36px minmax(0,1fr);} #wkuwaj-concept .wk-share-top .wk-status {grid-column:2; justify-self:start;} #wkuwaj-concept .wk-share-person {padding:12px 8px;} #wkuwaj-concept .wk-share-link {font-size:9px;} #wkuwaj-concept .wk-community-note {flex-wrap:wrap; padding-top:20px;} #wkuwaj-concept .wk-community-note > div {flex-basis:calc(100% - 46px);} #wkuwaj-concept .wk-community-note > a {width:100%; justify-content:space-between; padding:5px 0;} } /* Plans and library: compact copy, a clear pricing action and a visual preview. */ #wkuwaj-concept.wk-reveal-ready .wk-plans [data-reveal], #wkuwaj-concept.wk-reveal-ready .wk-library[data-reveal] { opacity:0; translate:0 22px; transition:opacity .65s ease,translate .65s cubic-bezier(.2,.7,.2,1); transition-delay:var(--wk-reveal-delay,0ms); } #wkuwaj-concept.wk-reveal-ready .wk-plans [data-reveal].wk-revealed, #wkuwaj-concept.wk-reveal-ready .wk-library.wk-revealed {opacity:1; translate:0 0;} #wkuwaj-concept .wk-plans { border-top:1px solid var(--wk-line); padding:48px 0 36px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:32px; align-items:center; } #wkuwaj-concept .wk-plans h2 { font-size:clamp(28px,3vw,35px); letter-spacing:-1.3px; line-height:1.18; margin:14px 0 16px; } #wkuwaj-concept .wk-plans h2 span {color:var(--wk-accent);} #wkuwaj-concept .wk-plans-copy > p {color:var(--wk-muted); font-size:13px; line-height:1.8; max-width:290px;} #wkuwaj-concept .wk-plans-note { display:flex; align-items:center; gap:7px; margin-top:22px; color:var(--wk-muted); font-size:11px; line-height:1.6; } #wkuwaj-concept .wk-plans-note svg {color:var(--wk-accent); width:16px; height:16px;} #wkuwaj-concept .wk-plan-options {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;} #wkuwaj-concept .wk-plan { display:flex; flex-direction:column; min-width:0; padding:24px; border:1px solid var(--wk-line); border-radius:20px; background:var(--wk-card); } #wkuwaj-concept .wk-plan-heading {display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:space-between;} #wkuwaj-concept .wk-plan-heading h3 {font-size:15px; font-weight:650; letter-spacing:-.3px;} #wkuwaj-concept .wk-plan-label { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:20px; background:var(--wk-bg); color:var(--wk-muted); font-size:9px; font-weight:600; white-space:nowrap; } #wkuwaj-concept .wk-plan-label svg {width:12px; height:12px;} #wkuwaj-concept .wk-plan-quota {display:flex; align-items:center; gap:12px; margin:23px 0;} #wkuwaj-concept .wk-plan-quota strong {font-size:54px; line-height:1; letter-spacing:-3px; font-weight:750;} #wkuwaj-concept .wk-plan-quota > span {font-size:13px; font-weight:600; line-height:1.5;} #wkuwaj-concept .wk-plan-quota small {display:block; color:var(--wk-muted); font-size:11px; font-weight:400;} #wkuwaj-concept .wk-plan-features { display:grid; gap:12px; list-style:none; padding:18px 0 24px; margin:0; border-top:1px solid var(--wk-line); color:var(--wk-muted); font-size:11px; line-height:1.65; } #wkuwaj-concept .wk-plan-features li {position:relative; padding-left:20px;} #wkuwaj-concept .wk-plan-features li::before {content:'✓'; position:absolute; left:0; color:var(--wk-accent); font-weight:700;} #wkuwaj-concept .wk-plan .wk-plan-cta { display:flex; justify-content:space-between; gap:8px; width:100%; min-height:46px; margin-top:auto; padding:12px 14px; font-size:12px; font-weight:650; border-radius:11px; } #wkuwaj-concept .wk-plan .wk-plan-footnote {display:block; margin-top:11px; text-align:center; color:var(--wk-muted); font-size:10px; line-height:1.5;} #wkuwaj-concept .wk-plan-premium { border-color:color-mix(in srgb,var(--wk-accent) 48%,var(--wk-line)); background:linear-gradient(145deg,color-mix(in srgb,var(--wk-soft) 65%,var(--wk-card)),var(--wk-card) 75%); box-shadow:0 12px 32px var(--wk-shadow); } #wkuwaj-concept .wk-plan-premium .wk-plan-label {background:var(--wk-soft); color:var(--wk-accent);} #wkuwaj-concept .wk-plan-premium .wk-plan-quota strong {color:var(--wk-accent);} #wkuwaj-concept .wk-plan .wk-pricing-cta { background:light-dark(#096d62,#66dbc6); color:light-dark(#ffffff,#10352e); box-shadow:0 5px 18px light-dark(#096d6220,#66dbc618); } #wkuwaj-concept .wk-library { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:24px; padding:36px 40px; margin-bottom:40px; border:1px solid var(--wk-line); border-radius:22px; background:linear-gradient(115deg,var(--wk-card) 40%,color-mix(in srgb,var(--wk-soft) 50%,var(--wk-card))); } #wkuwaj-concept .wk-library-copy {position:relative; z-index:1; min-width:0;} #wkuwaj-concept .wk-library .wk-tag svg {width:17px; height:17px;} #wkuwaj-concept .wk-library h2 {font-size:32px; line-height:1.15; letter-spacing:-1px; margin:13px 0;} #wkuwaj-concept .wk-library-copy > p {font-size:13px; line-height:1.8; color:var(--wk-muted); max-width:355px;} #wkuwaj-concept .wk-library .wk-library-cta {margin-top:22px; gap:20px; color:var(--wk-accent); border-color:color-mix(in srgb,var(--wk-accent) 28%,var(--wk-line));} #wkuwaj-concept .wk-library-note {display:block; margin-top:12px; color:var(--wk-muted); font-size:10px; line-height:1.6;} #wkuwaj-concept .wk-library-preview {position:relative; height:250px; min-width:0; pointer-events:none;} #wkuwaj-concept .wk-library-orbit { position:absolute; width:242px; height:242px; top:4px; left:50%; transform:translateX(-50%); border:1px solid color-mix(in srgb,var(--wk-accent) 15%,transparent); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--wk-accent) 10%,transparent),transparent 70%); } #wkuwaj-concept .wk-library-orbit::after {content:''; position:absolute; inset:24px; border:1px dashed color-mix(in srgb,var(--wk-accent) 15%,transparent); border-radius:50%;} #wkuwaj-concept .wk-library-deck { position:absolute; left:50%; width:208px; height:164px; margin-left:-104px; padding:20px; border:1px solid var(--wk-line); border-radius:16px; background:var(--wk-card); box-shadow:0 14px 32px var(--wk-shadow); } #wkuwaj-concept .wk-library-deck-back {top:26px; transform:translate(38px,-4px) rotate(13deg); background:color-mix(in srgb,var(--wk-soft) 55%,var(--wk-card));} #wkuwaj-concept .wk-library-deck-middle {top:42px; transform:translate(-30px,0) rotate(-10deg); background:color-mix(in srgb,var(--wk-soft) 25%,var(--wk-card));} #wkuwaj-concept .wk-library-subject {display:block; font-size:11px; font-weight:600; color:var(--wk-muted); margin-bottom:22px;} #wkuwaj-concept .wk-library-line {display:block; width:72%; height:5px; margin-top:10px; background:var(--wk-line); border-radius:5px;} #wkuwaj-concept .wk-library-line + .wk-library-line {width:48%;} #wkuwaj-concept .wk-library-deck-front {top:75px; transform:rotate(-2deg); border-color:color-mix(in srgb,var(--wk-accent) 35%,var(--wk-line));} #wkuwaj-concept .wk-library-deck-icon {display:grid; place-items:center; width:30px; height:30px; margin-bottom:12px; border-radius:9px; background:var(--wk-soft); color:var(--wk-accent);} #wkuwaj-concept .wk-library-deck-icon svg {width:19px; height:19px;} #wkuwaj-concept .wk-library-deck-front strong {display:block; font-size:18px; letter-spacing:-.4px;} #wkuwaj-concept .wk-library-deck-modes {display:block; font-size:10px; color:var(--wk-muted); margin-top:6px;} #wkuwaj-concept .wk-library-deck-bottom {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px;} #wkuwaj-concept .wk-library-deck-bottom .wk-library-line {width:54%; margin:0;} #wkuwaj-concept .wk-library-deck-check {display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--wk-soft); color:var(--wk-accent); font-size:11px;} #wkuwaj-concept .wk-library-spark {position:absolute; left:calc(50% - 150px); top:28px; color:var(--wk-accent);} #wkuwaj-concept .wk-library-spark svg {width:24px; height:24px;} #wkuwaj-concept.wk-motion-on .wk-library.wk-revealed .wk-library-deck-front {animation:wk-library-float 6s ease-in-out infinite;} #wkuwaj-concept.wk-motion-on .wk-library.wk-revealed .wk-library-spark {animation:wk-library-spark 5s ease-in-out infinite;} @keyframes wk-library-float {0%,100% {transform:translateY(0) rotate(-2deg);} 50% {transform:translateY(-7px) rotate(0);}} @keyframes wk-library-spark {0%,100% {transform:rotate(0) scale(.9); opacity:.6;} 50% {transform:rotate(18deg) scale(1.1); opacity:1;}} @media(hover:hover) and (pointer:fine) { #wkuwaj-concept .wk-plan .wk-plan-cta:hover, #wkuwaj-concept .wk-library-cta:hover {border-color:var(--wk-accent);} #wkuwaj-concept.wk-motion-on .wk-plan .wk-plan-cta span, #wkuwaj-concept.wk-motion-on .wk-library-cta span {transition:transform .25s ease;} #wkuwaj-concept.wk-motion-on .wk-plan .wk-plan-cta:hover span, #wkuwaj-concept.wk-motion-on .wk-library-cta:hover span {transform:translateX(3px);} } @media(max-width:1000px) { #wkuwaj-concept .wk-plans {grid-template-columns:1fr; gap:24px;} #wkuwaj-concept .wk-plans-copy > p {max-width:460px;} #wkuwaj-concept .wk-plans-note {margin-top:12px;} #wkuwaj-concept .wk-library {padding:30px;} } @media(max-width:640px) { #wkuwaj-concept .wk-plans {padding:32px 0 24px; gap:22px;} #wkuwaj-concept .wk-plans h2 {font-size:29px;} #wkuwaj-concept .wk-plan-options {grid-template-columns:1fr; gap:14px;} #wkuwaj-concept .wk-plan {padding:22px; border-radius:18px;} #wkuwaj-concept .wk-plan-quota {margin:19px 0;} #wkuwaj-concept .wk-plan-quota strong {font-size:48px;} #wkuwaj-concept .wk-plan-features {font-size:12px; padding:16px 0 22px; gap:10px;} #wkuwaj-concept .wk-plan .wk-plan-cta {font-size:13px; min-height:48px;} #wkuwaj-concept .wk-library {grid-template-columns:1fr; gap:12px; padding:24px; border-radius:18px; margin-bottom:28px;} #wkuwaj-concept .wk-library h2 {font-size:29px;} #wkuwaj-concept .wk-library .wk-library-cta {width:100%; justify-content:space-between; font-size:13px; min-height:48px;} #wkuwaj-concept .wk-library-preview {height:240px;} #wkuwaj-concept .wk-library-deck {width:176px; height:158px; margin-left:-88px; padding:17px;} #wkuwaj-concept .wk-library-deck-back {transform:translate(22px,-4px) rotate(10deg);} #wkuwaj-concept .wk-library-deck-middle {transform:translate(-18px,0) rotate(-8deg);} #wkuwaj-concept .wk-library-orbit {width:216px; height:216px; top:14px;} #wkuwaj-concept .wk-library-spark {left:calc(50% - 110px); top:14px;} } @media(prefers-reduced-motion:reduce) { #wkuwaj-concept .wk-library .wk-library-deck-front, #wkuwaj-concept .wk-library .wk-library-spark {animation:none!important;} } /* Manual step cards share a grid cell to keep the guide height steady. */ #wkuwaj-concept .wk-guide {border-radius:20px;} #wkuwaj-concept .wk-guide-heading {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:19px 28px; border-bottom:1px solid var(--wk-line);} #wkuwaj-concept .wk-guide h2 {font-size:13px; font-weight:650; line-height:1.4;} #wkuwaj-concept .wk-guide-caption {color:var(--wk-muted); font-size:11px;} #wkuwaj-concept .wk-guide-steps {list-style:none; padding:0; margin:0;} #wkuwaj-concept .wk-guide-step { --wk-guide-accent:var(--wk-accent); --wk-guide-soft:var(--wk-soft); min-width:0; min-height:310px; padding:30px 28px; background:linear-gradient(145deg,color-mix(in srgb,var(--wk-guide-soft) 35%,var(--wk-card)),var(--wk-card) 70%); } #wkuwaj-concept .wk-guide-step + .wk-guide-step {border-top:1px solid var(--wk-line);} #wkuwaj-concept .wk-guide-ready .wk-guide-steps {display:grid;} #wkuwaj-concept .wk-guide-ready .wk-guide-step {grid-area:1 / 1; border-top:0; visibility:hidden; pointer-events:none;} #wkuwaj-concept .wk-guide-ready .wk-guide-step.is-current {visibility:visible; pointer-events:auto;} #wkuwaj-concept .wk-guide-ai {--wk-guide-accent:var(--wk-blue); --wk-guide-soft:light-dark(#eaf0ff,#24334a);} #wkuwaj-concept .wk-guide-save {--wk-guide-accent:light-dark(#7451aa,#c3a1ed); --wk-guide-soft:light-dark(#f1eafa,#342c46);} #wkuwaj-concept .wk-guide-share {--wk-guide-accent:var(--wk-blue); --wk-guide-soft:light-dark(#eaf0ff,#24334a);} #wkuwaj-concept .wk-guide-step-top {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:23px;} #wkuwaj-concept .wk-guide-icon {display:grid; place-items:center; width:52px; height:52px; border-radius:15px; background:var(--wk-guide-soft); color:var(--wk-guide-accent); border:1px solid color-mix(in srgb,var(--wk-guide-accent) 18%,transparent);} #wkuwaj-concept .wk-guide-icon svg {width:26px; height:26px;} #wkuwaj-concept .wk-guide-number {color:var(--wk-guide-accent); font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:1px;} #wkuwaj-concept .wk-guide-step h3 {font-size:27px; font-weight:700; line-height:1.25; letter-spacing:-.7px;} #wkuwaj-concept .wk-guide-step > p {margin-top:14px; font-size:14px; line-height:1.8; color:var(--wk-muted);} #wkuwaj-concept .wk-guide-tags {display:flex; flex-wrap:wrap; gap:7px; margin-top:22px;} #wkuwaj-concept .wk-guide-tags span {padding:6px 10px; border:1px solid color-mix(in srgb,var(--wk-guide-accent) 18%,var(--wk-line)); border-radius:7px; color:var(--wk-guide-accent); background:var(--wk-bg); font-size:11px; line-height:1.4;} #wkuwaj-concept .wk-guide-controls {display:flex; align-items:center; gap:12px; padding:14px 28px; border-top:1px solid var(--wk-line); background:var(--wk-card);} #wkuwaj-concept .wk-guide-prev {display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid var(--wk-line); border-radius:10px; color:var(--wk-ink); background:var(--wk-bg);} #wkuwaj-concept .wk-guide-prev:disabled {opacity:.35; cursor:default;} #wkuwaj-concept .wk-guide-prev:not(:disabled):hover {border-color:var(--wk-accent); color:var(--wk-accent);} #wkuwaj-concept .wk-guide-count {color:var(--wk-muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap;} #wkuwaj-concept .wk-guide-next {display:inline-flex; align-items:center; justify-content:center; gap:13px; margin-left:auto; min-height:44px; min-width:154px; padding:12px 15px; border:1px solid transparent; border-radius:10px; background:light-dark(#096d62,#66dbc6); color:light-dark(#ffffff,#10352e); font-size:12px; font-weight:650;} #wkuwaj-concept .wk-guide-next:hover {background:light-dark(#075c53,#8ae6d5);} #wkuwaj-concept .wk-guide-status {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;} #wkuwaj-concept.wk-motion-on .wk-guide-ready .wk-guide-step.is-current > * {animation:wk-guide-enter .35s ease both;} #wkuwaj-concept.wk-motion-on .wk-guide-step.is-current > p {animation-delay:.04s;} #wkuwaj-concept.wk-motion-on .wk-guide-step.is-current > .wk-guide-tags {animation-delay:.08s;} @keyframes wk-guide-enter {from {opacity:0; transform:translateY(7px);} to {opacity:1; transform:translateY(0);}} @media(max-width:1000px) { #wkuwaj-concept .wk-guide-heading, #wkuwaj-concept .wk-guide-controls {padding-left:20px; padding-right:20px;} #wkuwaj-concept .wk-guide-step {padding:26px 20px;} #wkuwaj-concept .wk-guide-step h3 {font-size:24px;} #wkuwaj-concept .wk-guide-step > p {font-size:13px;} } @media(max-width:640px) { #wkuwaj-concept .wk-guide-heading {padding:17px 18px; gap:8px;} #wkuwaj-concept .wk-guide h2 {font-size:12px;} #wkuwaj-concept .wk-guide-caption {font-size:10px;} #wkuwaj-concept .wk-guide-step {padding:24px 20px; min-height:300px;} #wkuwaj-concept .wk-guide-step-top {margin-bottom:20px;} #wkuwaj-concept .wk-guide-icon {width:46px; height:46px; border-radius:13px;} #wkuwaj-concept .wk-guide-icon svg {width:24px; height:24px;} #wkuwaj-concept .wk-guide-step h3 {font-size:25px;} #wkuwaj-concept .wk-guide-tags {gap:6px; margin-top:19px;} #wkuwaj-concept .wk-guide-tags span {padding:6px 8px; font-size:10px;} #wkuwaj-concept .wk-guide-controls {padding:12px 18px; gap:10px;} #wkuwaj-concept .wk-guide-next {min-width:142px; padding:12px; gap:10px; font-size:11px;} }