:root{--teal:#176d69;--cream:#fffaf0;--ink:#233b4b}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Trebuchet MS,Arial,sans-serif}.header{background:#176d69;color:#fff;padding:22px 18px}.header-inner{width:100%;max-width:1100px;margin:auto}.brand{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none;width:max-content;max-width:100%}.logo{font-size:42px;line-height:1}.header h1{margin:0 0 4px;font-size:clamp(20px,4vw,32px);letter-spacing:-.035em}.header p{margin:0;font-size:14px;opacity:.9}.main{width:100%;max-width:1100px;margin:auto;padding:30px 18px 48px}.intro{text-align:center;max-width:660px;margin:0 auto 18px;align-items:center}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:#4c8e83}.intro h2{color:var(--teal);font-size:clamp(28px,5vw,40px);letter-spacing:-.04em;margin:7px 0}.intro p{line-height:1.65;margin:0;color:#50666b}.filters{display:flex;flex-direction:row;gap:8px;justify-content:center;flex-wrap:wrap;margin:25px auto 12px}.filter{padding:10px 14px;border-radius:100px;border:1px solid #d7e8e1;background:#fff;color:#37655f;text-decoration:none;font-size:13px;font-weight:700;transition:background .15s,color .15s}.filter:hover{border-color:var(--teal)}.filter.active{background:var(--teal);color:#fff;border-color:var(--teal)}.toolbar{align-items:center;margin:4px 0 12px}button{border:0;border-radius:12px;padding:12px 18px;background:var(--teal);color:#fff;font:inherit;font-weight:700;cursor:pointer}button:hover{filter:brightness(1.1)}button:focus-visible,a:focus-visible{outline:3px solid #efad48;outline-offset:3px}.draw{box-shadow:0 5px 14px #176d692b}.counter{text-align:center;color:#58736e;font-size:13px;margin:0}.card{width:100%;max-width:720px;margin:18px auto;background:#fff;border:1px solid #d9eae2;border-radius:24px;overflow:hidden;box-shadow:0 16px 45px #173c3214}.card-top{padding:25px 20px 23px;text-align:center;align-items:center}.illustration{font-size:66px;line-height:1.4;min-height:90px}.tag{display:inline-block;background:#ffffffc9;border-radius:30px;padding:6px 13px;font-size:12px;font-weight:800}.card-top h2{margin:12px 0 0;font-size:clamp(22px,4vw,29px);letter-spacing:-.025em}.card-body{padding:24px 28px 28px}.in-card{text-align:left;margin:0 0 19px}.section-block{margin-bottom:20px}.card-body h3{color:var(--teal);font-size:16px;margin:0 0 8px}.card-body p{line-height:1.65;margin:0}.task{background:#fff5df;border-radius:14px;padding:16px;margin-bottom:20px}.roles{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.role{flex:1;min-width:180px;background:#eef6f3;border-radius:12px;padding:13px;line-height:1.5;gap:5px}.role span:first-child{font-weight:700}.expressions{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;background:#f1edff;padding:14px;border-radius:14px}.phrase{background:#ffffffae;padding:5px 9px;border-radius:9px;line-height:1.5;font-size:14px}.card-actions{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;margin-top:22px}.secondary{background:#e9f3ef;color:var(--teal)}.tip{margin:16px 0 0}.footer{max-width:630px;margin:10px auto 0;text-align:center;color:#55716e;font-size:14px;line-height:1.6}@media(max-width:520px){.header{padding:19px 16px}.logo{font-size:33px}.main{padding:25px 14px 35px}.intro p{font-size:14px}.filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;width:100%;padding:2px 2px 8px;margin:22px 0 10px}.filter{white-space:nowrap}.card{margin-top:14px}.card-body{padding:20px 17px}.illustration{font-size:57px}.role{min-width:130px}.card-actions button{flex:1}.card-actions button:first-child{flex:2}}