/* Quiet language cards, sharing the travel widgets' soft material. */
body .phone-shell .slang-widget{background:linear-gradient(145deg,#f7f7fc,#e1e5f1);color:#303746}
.slang-tile{position:absolute;inset:0;padding:20px 16px;display:flex;flex-direction:column}
.slang-tile>small{font:400 8px/1.4 Selecta,sans-serif;letter-spacing:.035em;color:#687087}
.slang-tile>span{font:400 25px/1.1 Selecta,sans-serif;letter-spacing:-.9px;margin-top:21px;white-space:nowrap}
.slang-tile>p{font:400 12px/1.4 Selecta,sans-serif;margin:6px 0 0;color:#60697e}
.slang-tile>div{margin-top:auto;display:flex;justify-content:space-between;font:400 9px Selecta,sans-serif;color:#72798a}
.slang-tile b{font-size:16px;font-weight:400}
.widget-app.slang-app{background:#f8f9fc;color:#303746}
.slang-app .app-body{padding:10px 23px 38px;overscroll-behavior:contain}
.slang-intro>small{font-size:9px;letter-spacing:.07em;color:#70798a}
.slang-app .slang-intro h1{font:400 30px/1.15 Selecta,sans-serif;letter-spacing:-.7px;margin:12px 0 7px}
.slang-app .slang-intro p{font-size:13px;color:#727989;margin:0 0 23px}
.slang-progress{display:flex;justify-content:space-between;margin:0 3px 11px;font-size:11px;color:#7a8190;font-variant-numeric:tabular-nums}
.slang-card{background:linear-gradient(145deg,#fff,#f0f2f9);border:1px solid #fff;border-radius:28px;padding:17px 22px 22px;box-shadow:0 12px 22px -14px #3b466b42,inset 0 -1px 1px #c2c6d633;min-height:340px}
.slang-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#7a8190;font-size:10px}
.slang-heart{width:40px;height:40px;display:grid;place-items:center;background:#ffffff9c;border:1px solid #fff;border-radius:50%;color:#7a8190;cursor:pointer}
.slang-heart[aria-pressed=true]{color:#565f85}.slang-heart[aria-pressed=true] svg{fill:currentColor}
.slang-app .slang-card h2{font:400 43px/1.12 Selecta,sans-serif;letter-spacing:-1.7px;margin:24px 0 14px}
.slang-listen{display:flex;align-items:center;gap:7px;font:400 12px Selecta,sans-serif;color:#68728a;border:0;background:none;padding:4px 0;min-height:40px;cursor:pointer}
.slang-listen svg{width:16px;height:16px}
.slang-meaning{margin-top:18px;border-top:1px solid #dfe3ed;padding-top:19px;min-height:135px}
.slang-meaning h3{font:400 20px/1.25 Selecta,sans-serif;margin:0 0 8px;letter-spacing:-.3px}
.slang-app .slang-meaning p{font-size:12px;line-height:1.55;color:#70798a;margin:0 0 19px}
.slang-meaning blockquote{font:400 16px/1.45 Selecta,sans-serif;margin:17px 0 5px}
.slang-app .slang-meaning .slang-translation{font-size:11px;margin-bottom:18px}
.slang-meaning a{font-size:10px;color:#65728e;text-underline-offset:3px}
.slang-reveal{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;padding:4px 0;min-height:44px;font:400 15px Selecta,sans-serif;color:#48536d;cursor:pointer}
.slang-paging{display:flex;gap:10px;justify-content:space-between;margin-top:21px}
.slang-paging button{min-height:46px;min-width:46px;border:1px solid #fff;border-radius:17px;background:linear-gradient(#fff,#e9ecf3);box-shadow:0 3px 7px #27334a0a;display:flex;align-items:center;justify-content:center;gap:8px;font:400 12px Selecta,sans-serif;color:#566079;cursor:pointer}
.slang-paging [data-learned]{flex:1}.slang-paging [aria-pressed=true]{background:#dfe5ee;color:#303d54}
.slang-paging button:disabled{opacity:.35;cursor:default}.slang-paging svg{width:18px}
.slang-saved>button{position:relative;display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #e0e4ed;background:none;padding:18px 35px 18px 2px;color:#303746;cursor:pointer}
.slang-saved span{display:block;font:400 21px Selecta,sans-serif;letter-spacing:-.4px}.slang-saved small{display:block;color:#717b8e;font-size:12px;margin-top:5px}.slang-saved svg{position:absolute;right:3px;top:28px;width:18px}
.slang-quiz>small{font-size:10px;letter-spacing:.06em;color:#798195}.slang-app .slang-quiz h2{font:400 40px Selecta,sans-serif;letter-spacing:-1.2px;margin:30px 0 12px}
.slang-options{display:grid;gap:10px;margin-top:24px}.slang-options button{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:15px 18px;border:1px solid #dce1ec;border-radius:18px;background:#fff;color:#424c62;text-align:left;font:400 15px Selecta,sans-serif;cursor:pointer}.slang-options button.correct{border-color:#586781;background:#e2e7f0}.slang-options button.incorrect{border-style:dashed;background:#eeeef1;color:#737986}.slang-options button:disabled{opacity:1;cursor:default}
.slang-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px;border:1px solid #56617a;border-radius:17px;background:linear-gradient(#59657f,#3d485e);color:#fff;font:400 14px Selecta,sans-serif;box-shadow:inset 0 1px #ffffff38,0 3px 8px #34415a18;cursor:pointer}
.slang-app .slang-answer{min-height:22px;margin-top:17px}.slang-result{text-align:center;padding-top:40px}.slang-result>span{font:400 58px Selecta,sans-serif;letter-spacing:-2px}.slang-app .slang-result h2{font-weight:400}.slang-feedback{font-size:11px;color:#737b8b;margin-top:12px}
.slang-app button:focus-visible,.slang-app a:focus-visible{outline:2px solid #526587;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.slang-app button:not(:disabled):hover{filter:brightness(.98)}}

/* Rich card pigments, with a restrained echo in the surrounding app. */
body .phone-shell .slang-widget{background:linear-gradient(135deg,#f4c45e,#e99857);color:#542d25}
.slang-tile>span{font-size:21px;white-space:normal;margin-top:14px;max-width:140px}
.slang-tile>small,.slang-tile>p,.slang-tile>div{color:#6b4034}
.widget-app.slang-app{background:#fffaf4;color:#392f2a}
.slang-app .app-body{padding-top:26px}
.slang-app .slang-intro h1{margin:0 0 23px;font-size:29px}
/* The entire solid card rotates; faces and laminated edges share one 3D object. */
.slang-card{--card-top:#f4c45e;--card-bottom:#e99857;--card-ink:#492b21;position:relative;padding:0;min-height:0;height:460px;border:0;background:none;box-shadow:none;color:var(--card-ink);perspective:1100px}
.slang-card[data-tone=lilac]{--card-top:#bed1f3;--card-bottom:#8faade;--card-ink:#233a60}
.slang-card[data-tone=mint]{--card-top:#d5e897;--card-bottom:#9ac87c;--card-ink:#29452a}
.slang-card[data-tone=rose]{--card-top:#f1b39e;--card-bottom:#dc8a7d;--card-ink:#612e29}
.slang-card-top{color:var(--card-ink);flex:none}
.slang-heart,.slang-heart[aria-pressed=true]{color:var(--card-ink);background:#ffffff5c;border-color:#ffffff85;width:44px;height:44px}
.slang-flip-inner{position:relative;width:100%;height:100%;border-radius:28px;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform 280ms cubic-bezier(.32,.72,0,1)}
.slang-card[data-revealed=true] .slang-flip-inner{transform:rotateY(180deg)}
.slang-card-edge{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,var(--card-top),var(--card-bottom));box-shadow:inset 0 0 0 1px #5a352e24;pointer-events:none}
.slang-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:stretch;padding:13px 21px 12px;border:1px solid #ffffffab;border-radius:inherit;background:linear-gradient(140deg,var(--card-top),var(--card-bottom));backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(3px);box-shadow:inset 0 1px 1px #fff, inset 0 -2px 2px #6c423829,0 4px 0 -1px color-mix(in srgb,var(--card-bottom),#573d38 22%),0 12px 22px -12px #6c42384d}
.slang-back{transform:rotateY(180deg) translateZ(3px)}
.slang-flip{display:flex;flex:1;min-height:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;width:100%;padding:15px 0;border:0;border-radius:8px;background:none;color:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
/* A hover filter would flatten the rotating object. Keep its foreground crisp. */
@media(hover:hover) and (pointer:fine){.slang-app .slang-flip:hover{filter:none}}
.slang-card-language{font:10px Selecta,sans-serif;letter-spacing:.13em;margin-bottom:22px}
.slang-word{font:400 37px/1.12 Selecta,sans-serif;letter-spacing:-1.2px;overflow-wrap:anywhere}
.slang-back .slang-word{font-size:30px;letter-spacing:-.6px}
.slang-example{font:16px/1.4 Selecta,sans-serif;margin-top:23px}
.slang-example-translation{font:12px/1.4 Selecta,sans-serif;margin-top:7px}
.slang-flip-hint{display:flex;align-items:center;gap:10px;font:11px Selecta,sans-serif;margin-top:28px}
.slang-flip-hint svg{width:16px;height:16px}
.slang-listen{flex:none;color:var(--card-ink);min-height:44px;border-top:1px solid #ffffff70;width:100%;justify-content:center}
.slang-paging{margin-top:17px}
.slang-paging button{background:#fff;border-color:#eae2d9;color:#54443a}
.slang-paging [aria-pressed=true]{background:#ddeacb;color:#34502a}
.slang-app button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){.slang-flip-inner{transition:none}}

/* Reuse the Local recs navigation material and geometry, with three destinations. */
.widget-app.slang-app .app-surface>.app-body{position:relative;padding:0;overflow:hidden;isolation:isolate;background:#f8f5ef}
.slang-ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,#eeb85f70,transparent 72%)}
[data-tone=lilac]>.slang-ambient{background:radial-gradient(ellipse at 50% 40%,#91abdd66,transparent 72%)}
[data-tone=mint]>.slang-ambient{background:radial-gradient(ellipse at 50% 40%,#aaca7c70,transparent 72%)}
[data-tone=rose]>.slang-ambient{background:radial-gradient(ellipse at 50% 40%,#dc978466,transparent 72%)}
.slang-scroll{position:relative;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:18px 23px 96px}
.widget-app .slang-tabs.guide-nav{grid-template-columns:repeat(3,minmax(0,1fr));bottom:10px;margin:0}
.slang-tabs.guide-nav>.guide-nav-selection{width:calc((100% - 12px)/3)}
.slang-tabs.guide-nav>button{font-family:Selecta,sans-serif}
@media(hover:hover) and (pointer:fine){.slang-tabs.guide-nav>button:hover{filter:none}}
@media(forced-colors:active){.slang-ambient{display:none}.slang-face{border:1px solid CanvasText;background:Canvas;color:CanvasText}}

/* Monochrome glass controls keep the colorful learning cards as the focus. */
.slang-app .slang-paging button{border-radius:999px;border:1px solid #ffffff80;background:#ffffffad;color:#202124;box-shadow:inset 0 1px 1px #fffffff0,inset 0 -1px 1px #25252520,0 4px 10px -5px #17171735}
.slang-app .slang-paging :is([data-prev],[data-next]){width:46px;height:46px;flex:none;padding:0}
.slang-app .slang-paging [data-learned]{padding:0 16px}
.slang-app .slang-paging .liquid-control>.lg-material>.lg-frost{background:linear-gradient(155deg,#ffffffe6,#ffffff80 48%,#ffffffb3)}
.slang-app .slang-paging [aria-pressed=true]{color:#fff;background:#242424;border-color:#ffffff38;box-shadow:inset 0 1px 1px #ffffff55,inset 0 -1px 1px #0006,0 4px 10px -5px #17171750}
.slang-app .slang-paging [aria-pressed=true]>.lg-material>.lg-frost{background:linear-gradient(155deg,#414141ed,#171717eb)}
.widget-app.slang-app .slang-paging .liquid-control::after{content:'';background:conic-gradient(from -65deg,#ffffffef,#ffffff30 18%,#60606055 35%,#ffffffd9 51%,#ffffff22 72%,#60606040 87%,#ffffffef)}
.slang-app .slang-paging button:focus-visible{outline:2px solid #202124;outline-offset:3px}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.slang-app .slang-paging .liquid-control>.lg-material>.lg-frost{background:#f4f4f4}.slang-app .slang-paging [aria-pressed=true]>.lg-material>.lg-frost{background:#242424}}
@media(forced-colors:active){.slang-app .slang-paging button{color:ButtonText}.slang-app .slang-paging [aria-pressed=true]{color:HighlightText}.slang-app .slang-paging [aria-pressed=true]>.lg-material>.lg-frost{background:Highlight}.widget-app.slang-app .slang-paging .liquid-control::after{content:none}}