.coffee{background:#f4eddd;color:#423d2d}.coffee-intro{position:relative;padding:60px 0 65px;border-bottom:1px solid #cec6b2}.coffee-intro h1{font-size:clamp(52px,7vw,88px);max-width:700px}.coffee-intro p{max-width:440px}.coffee-intro img{position:absolute;right:30px;top:40px;width:240px;height:300px;object-fit:cover;border-radius:140px 140px 8px 8px;transform:rotate(4deg)}.coffee-tabs{display:flex;gap:8px;margin-bottom:28px}.coffee-tabs button{background:transparent;border:1px solid #b6b397;border-radius:30px;padding:10px 18px;font-size:13px}.coffee-tabs button[aria-pressed=true]{background:#484e34;color:#fff}.coffee-card{background:#fbf8ef;border:1px solid #dcd4c1}.coffee-card[hidden]{display:none}.coffee-card svg{width:100%;display:block}.coffee-card>div{padding:24px}.coffee-card h2{font-family:Georgia,serif;font-size:32px}.coffee-card p{font-size:13px}.coffee-card span{font-size:20px}.coffee-card details{padding:14px 0;margin-top:20px}.coffee-card summary{font-size:13px}.coffee .grid3{align-items:start}.coffee .grid3+.note{margin-top:20px}.lesson{background:#fffdf2;color:#3c442d}.lesson-layout{display:grid;grid-template-columns:210px 1fr;gap:80px;padding:40px 0 80px}.lesson aside{position:sticky;top:25px;align-self:start}.lesson aside>a{display:block;padding:14px 0;border-bottom:1px solid #e1e2cb;text-decoration:none;font-size:13px}.teacher{margin-top:35px}.teacher img{width:80px;height:80px;object-fit:cover;border-radius:50%}.teacher p{font-size:13px;margin-top:12px}.teacher span{font-size:11px;color:#7e876c}.lesson h1{font-size:clamp(48px,5.5vw,72px)}.lesson-hero p{max-width:500px}.light-study{height:240px;background:#e4bd60;position:relative;overflow:hidden;margin:30px 0 0}.light-study span{position:absolute;left:48%;top:35px;width:150px;height:150px;border-radius:50%;background:linear-gradient(110deg,#fff8d8,#b69949);box-shadow:65px 42px 0 -8px #ac8d3d70}.light-study i{position:absolute;left:0;top:0;width:240px;height:100%;background:linear-gradient(100deg,#fff4bba0,transparent);transform:skew(-20deg)}.light-study b{position:absolute;left:25px;top:30px;font-size:11px;letter-spacing:2px}.practice-list label{display:flex;gap:14px;align-items:center;border-bottom:1px solid #dedfc8;padding:15px 0;font-size:15px}.practice-list input{width:20px;height:20px;accent-color:#567341;margin:0}.lesson progress{width:100%;accent-color:#567341;margin-top:18px;height:9px}.lesson #practice-status{font-size:13px}.tool{background:#151621;color:#f2efff}.tool .site-nav{border-bottom:1px solid #ffffff25}.tool .demo-bar{background:#222433;color:#ccc9df;border-color:#ffffff20}.tool .pill{color:#c0b3f3}.meter{display:grid;grid-template-columns:1fr 1fr;gap:75px;padding:70px 0 80px;align-items:center}.meter h1{font-size:clamp(46px,6vw,76px);font-weight:600;letter-spacing:-.06em}.meter h1 span{color:#b8a3fc}.meter>div>p{color:#bbb7ca;max-width:380px;font-size:15px}.maker{display:flex;gap:12px;align-items:center;font-size:11px;color:#aaa6ba;margin-top:35px}.maker img{width:48px;height:48px;object-fit:cover;border-radius:50%}.meter-card{border:1px solid #444156;background:#212230;border-radius:18px;padding:35px}.meter-card label{font-size:13px;margin-bottom:28px}.meter-card output{float:right;color:#c2b0ff}.meter-card input[type=range]{accent-color:#b69cfb;padding:0;border:0;margin-top:15px}.meter-card input[type=number]{background:#151621;color:#fff;border-color:#494458}.meter-result{padding:30px 0;border-top:1px solid #ffffff25}.meter-result>span{font-size:12px;color:#bbb4ce}.meter-result strong{display:block;font-size:70px;font-weight:500;letter-spacing:-.06em;line-height:1.2;color:#c9b8ff}.meter-result p{font-size:13px;color:#a19bb4;margin:5px 0 0}.meter-card .note{color:#a9a2ba;font-size:12px}.tool .button.outline{color:#d8ceee;border-color:#61546f}.tool .line,.tool .page-footer{border-color:#ffffff25}.tool .section .grid3{color:#bdb6ce;font-size:14px}.game{background:#f4e843;color:#292826}.game .demo-bar{background:#e5d934;border-color:#c9bf31;color:#514b24}.game .wordmark{font-weight:900;font-size:24px}.game-layout{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;padding:55px 0 70px}.game h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(70px,8vw,110px);font-weight:900;line-height:.85;letter-spacing:-.02em}.game h1 em{font-style:normal;color:#e74c43}.game-layout>div>p{font-size:17px;line-height:1.5}.game-box{background:#f9f6e7;border:2px solid #2d2b22;border-radius:16px;padding:28px;box-shadow:8px 8px 0 #292826}.game-score{display:flex;justify-content:space-between;font-size:13px;margin-bottom:20px}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.memory-card{aspect-ratio:3/4;border:2px solid #302e2a;border-radius:9px;background:#e8634d;font-size:40px;color:#faf2d5;transition:transform .15s,background .15s;font-family:Georgia,serif}.memory-card.revealed{background:#fff;color:#314c36;transform:rotate(-3deg)}.memory-card.matched{background:#d7e5b3;color:#304c35;opacity:1}.game #game-status{min-height:44px;font-size:14px;margin:20px 0 10px}.game .button{background:#2d2b22}.game-maker{display:flex;gap:15px;align-items:center;margin-top:25px;font-size:12px}.game-maker img{width:70px;height:70px;object-fit:cover;object-position:center 30%;border-radius:50%;border:2px solid #2d2b22}.game .line,.game .page-footer{border-color:#b3a924}.game .section .grid3{font-size:14px}.preview .coffee-intro{padding:25px 0}.preview .coffee-intro h1{font-size:60px}.preview .coffee-intro img{width:165px;height:220px;right:0;top:15px}.preview .coffee-intro p{max-width:380px}.preview .lesson-layout{grid-template-columns:1fr;padding:20px 0}.preview .lesson aside{display:none}.preview .lesson h1{font-size:56px}.preview .light-study{height:200px}.preview .meter,.preview .game-layout{padding:25px 0;gap:30px}.preview .meter h1{font-size:55px}.preview .meter-card{padding:22px}.preview .game h1{font-size:80px}.preview .game-box{padding:20px}.preview .game-maker{display:none}
@media(max-width:850px){.coffee-intro img{width:180px;height:245px;right:0;top:70px;opacity:.8}.coffee-intro h1{max-width:520px;font-size:68px}.coffee-intro p{max-width:380px}.lesson-layout{gap:35px;grid-template-columns:165px 1fr}.meter,.game-layout{gap:30px}.meter-card{padding:25px}.memory-grid{gap:7px}.memory-card{font-size:30px}.game-box{padding:20px}}
@media(max-width:600px){.coffee-intro{padding:30px 0}.coffee-intro h1{font-size:57px;position:relative;z-index:1}.coffee-intro img{position:static;width:100%;height:240px;object-position:center 27%;border-radius:8px;transform:none;opacity:1;margin-top:20px}.coffee-tabs{flex-wrap:wrap}.coffee-tabs button{font-size:12px}.lesson-layout{grid-template-columns:1fr;gap:25px;padding-top:20px}.lesson aside{position:static;display:flex;gap:10px;flex-wrap:wrap}.lesson aside>.eyebrow,.teacher{display:none}.lesson aside>a{font-size:11px}.lesson h1{font-size:48px}.light-study{height:210px}.light-study span{left:40%;width:125px;height:125px}.meter,.game-layout{grid-template-columns:1fr;gap:35px;padding:35px 0 50px}.meter h1{font-size:59px}.meter-card{padding:24px}.meter-result strong{font-size:65px}.game h1{font-size:90px}.game-maker{display:none}.game-box{padding:20px;margin-right:8px}.memory-card{font-size:36px}.game .wordmark{font-size:21px}.game .site-nav>a:last-child{font-size:12px}}
@media(prefers-reduced-motion:reduce){.memory-card{transition:none}}