.player-page{align-content:start;gap:clamp(18px,3vw,30px);display:grid}.player-page-header,.player-page-shortcut{border-radius:24px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;padding:clamp(22px,4vw,42px);display:flex}.player-page-header{isolation:isolate;background:var(--accent);color:var(--surface);position:relative;overflow:hidden}.player-page-header h1{font-size:clamp(2.1rem,5vw,4rem)}.player-page-header p{color:#e7eddb;max-width:46ch;margin-top:9px}.player-page-header img{width:min(18vw,145px);height:auto;margin-left:auto}.player-page-shortcut{background:var(--surface);padding:clamp(16px,3vw,26px)}.player-page-shortcut p{margin-top:5px}.player-action{background:var(--lime);min-height:44px;color:var(--accent);border-radius:999px;justify-content:space-between;align-items:center;gap:9px;padding:5px 5px 5px 14px;font-size:13px;font-weight:710;display:inline-flex}.player-action .action-arrow{background:var(--surface);width:34px;height:34px;color:var(--accent);border-radius:50%;flex:none;place-items:center;display:grid}.player-action .action-arrow svg{transition:transform .2s}.player-action:hover,.player-action:focus-visible{color:var(--accent)}.player-action:is(:hover,:focus-visible) .action-arrow svg{transform:translate(2px)}@media (width<=680px){.player-page-header img{z-index:-1;width:64px;position:absolute;bottom:8px;right:14px}.player-page-header:has(img){padding-right:76px}}.learning-page .learning-workshop{background:var(--surface);border-radius:22px;margin:0;padding:clamp(16px,3vw,27px)}.learning-workshop-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:11px;margin-bottom:18px;display:flex}.learning-workshop .learning-workshop-heading h2{margin:0}.learning-progress{min-width:145px;color:var(--accent);gap:5px;font-size:12px;font-weight:680;display:grid}.learning-progress progress{width:100%;accent-color:var(--accent)}.learning-workshop .platform-exercise-workspace{max-width:none}.learning-workshop .platform-form{background:var(--background);border-radius:16px;margin:0 0 14px;padding:clamp(14px,3vw,22px)}.learning-workshop .platform-exercise-workspace>.field{max-width:100%}.learning-workshop .platform-check:has(input:checked){background:#e3ecd6}.learning-section{gap:14px;display:grid}.learning-guide-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));gap:12px;display:grid}.learning-guide-grid>a{background:var(--surface);border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:16px;display:flex}.learning-guide-grid h3{font-weight:710}.learning-guide-grid p{margin-top:4px;font-size:13px}.learning-guide-grid .action-arrow,.learning-formats .action-arrow{background:var(--lime);width:33px;height:33px;color:var(--accent);border-radius:50%;flex:none;place-items:center;display:grid}.learning-guide-grid>a:hover,.learning-formats>a:hover{background:#edf0e5}.player-page-header{overflow-wrap:anywhere;min-width:0}.player-page-header--art{min-height:clamp(140px,19vw,220px);padding-inline-end:clamp(112px,17vw,240px)}.player-page-header--art img{z-index:-1;border-radius:11px;width:clamp(78px,14vw,155px);position:absolute;inset:auto 5% -27% auto;rotate:13deg}.player-action.player-action--dark{background:var(--accent);color:var(--surface)}.player-action.player-action--dark:hover{background:var(--accent-hover);color:var(--surface)}.button.player-action{width:fit-content;min-height:44px;padding:5px 5px 5px 14px}.button.player-action:disabled{opacity:.7}@media (width<=680px){.player-page-header--art{padding-inline-end:clamp(99px,28vw,178px)}.player-page-header--art img{width:clamp(68px,21vw,104px);inset:auto 5% -14% auto}}@media (prefers-reduced-motion:reduce){.player-action .action-arrow svg{transition:none}}
