:root{font-family:Inter,system-ui,sans-serif;color:#192b28;background:#e9eee7}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#182b27;color:#f2ffef}header>a{font-size:27px;font-weight:900}a{color:inherit;text-decoration:none}nav{display:flex;gap:22px}main{padding:18px}.intro{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:18px}.intro>p{max-width:480px;line-height:1.5;color:#52645c}h1{font-size:clamp(25px,3vw,40px);letter-spacing:-.045em;margin:0}.eyebrow{font:700 11px ui-monospace,monospace;letter-spacing:.12em;color:#397367}.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px;align-items:start}aside{padding:22px;background:#fbfff7;border:1px solid #b8c8bc;border-radius:18px}h2{font-size:25px;line-height:1.15;margin:22px 0 12px}aside p{line-height:1.55}progress{width:100%;height:7px;accent-color:#277961}button{font:inherit;font-weight:750;cursor:pointer;border:1px solid #9fb8aa;border-radius:10px;padding:12px;background:#ecf3e8;color:#20382f}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #db8431;outline-offset:3px}#action{width:100%;background:#bff558;border-color:#71983b;min-height:48px}.navigation{display:flex;gap:8px}.navigation button{flex:1}#restart{width:100%;margin-top:10px;background:transparent}#status{font-size:13px;min-height:42px;color:#486b5a}ol{padding-left:23px;font-size:13px;line-height:2;color:#607367}li.active{color:#102f23;font-weight:850}li.complete{color:#28704b}.hint{font-size:12px;border-top:1px solid #d6e1d3;padding-top:15px}iframe{display:block;border:1px solid #9db7a8;border-radius:18px;width:100%;height:calc(100vh - 165px);min-height:670px;background:#f5f4e9}@media(min-width:1000px){aside{position:sticky;top:16px}}@media(max-width:850px){main{padding:10px}.intro{display:block}.intro>p{font-size:13px}.layout{grid-template-columns:1fr}aside{padding:16px}h2{margin:12px 0}#steps,.hint{display:none}iframe{height:78vh;min-height:640px}header{padding:14px}header>a{font-size:22px}nav{font-size:13px;gap:12px}}
:root{--violet:#7956dc;--signal:#bff558}
header .brand{display:inline-flex;align-items:baseline;flex:0 0 auto;color:inherit;font:800 clamp(30px,4vw,52px)/1 Arial,sans-serif;letter-spacing:-.09em;text-decoration:none}
.portrait-letter{width:.9em;height:1.05em;display:inline-block;overflow:hidden;position:relative;border:2.2px solid currentColor;transform:translateY(.1em);background:var(--violet)}
.portrait-o{border-radius:50%}
.portrait-d{margin-left:.12em;border-radius:2px 50% 50% 2px}
.portrait-letter img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 28%}
.portrait-letter .portrait-image-left{object-position:0% 50%}
.portrait-letter .portrait-image-right{object-position:50% 24%}
.brand-punctuation{margin-left:.08em;color:var(--signal);font-size:.54em;letter-spacing:-.04em}
@media(max-width:420px){header{flex-wrap:wrap;gap:16px}}