*{box-sizing:border-box}body{margin:0;background:#eee9df;color:#1d303c;font:16px/1.55 system-ui,sans-serif}main{max-width:900px;margin:auto;padding:40px 28px}header{max-width:690px;margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:2px;color:#5f6868}h1{font:64px/1.04 Georgia,serif;letter-spacing:-2px;margin:17px 0}header p{font-size:18px;color:#4e6066;max-width:620px}.lesson{border:1px solid #c8ccc5;background:#fffdf7;padding:28px;border-radius:20px;box-shadow:0 15px 40px #1730390a}.lesson-top,.status{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}.lesson-top{font-size:13px;color:#50616b}h2{font:32px Georgia,serif;margin:20px 0 6px}h3{font-size:14px;margin:26px 0 10px}small{font-weight:400;color:#657578;margin-left:8px}.rule{background:#e8efef;border-left:3px solid #487684;padding:13px 16px;font-size:14px;margin:20px 0}.status{font-size:12px;color:#5b6b72;justify-content:flex-start;gap:20px}.ribbon{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;direction:ltr!important;max-width:720px}.tile{border:2px solid transparent;border-radius:12px;min-width:0;padding:8px 2px;background:#f6f0e4 url('tile.webp') center/cover;color:#152f42;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:.85;position:relative;font-family:system-ui,sans-serif}.tile .glyph{font-size:clamp(20px,4vw,40px);line-height:1.2;unicode-bidi:isolate;direction:ltr}.tile .id{font-size:10px;color:#536c77}.tile .level{font-size:10px;color:#536c77}.tile.selected{border-color:#086b7c;box-shadow:0 0 0 2px #086b7c44;background-color:#d5f1ee}.tile.inside{border-color:#68a5ad}.tile.correct{box-shadow:inset 0 -4px #4b866c}.target .tile{aspect-ratio:1.2;filter:saturate(.6);border:1px solid #d0d8d6}.target .glyph{font-size:clamp(18px,3vw,30px)}button,select{font:inherit;min-height:44px;border:1px solid #adbdc0;border-radius:8px;background:#fffdf8;color:#254652;padding:9px 14px;cursor:pointer}button:hover:not(:disabled){background-color:#edf4f2}button:focus-visible,select:focus-visible{outline:3px solid #bc6f37;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button.primary{background:#235a69;color:white;border-color:#235a69}.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.controls button{font-size:13px}#feedback{min-height:26px;color:#2c626a;font-size:14px;margin-bottom:0}#completion{background:#deeee4;border:1px solid #88b49c;padding:16px;border-radius:10px;margin-top:20px}details{border-top:1px solid #d7ded8;margin-top:25px;padding-top:18px;font-size:14px}summary{cursor:pointer;font-weight:600}#engine{font-family:monospace;overflow-wrap:anywhere}footer{font-size:12px;color:#63767a;margin-top:25px}a{color:#275e70}@media(max-width:540px){main{padding:23px 12px}h1{font-size:46px}.lesson{padding:18px 12px;border-radius:14px}.ribbon{gap:3px}.tile{padding:4px 0;border-radius:7px;aspect-ratio:.66}.tile .glyph{font-size:24px}.tile .id,.tile .level{font-size:9px}.target .tile{aspect-ratio:.9}.target .glyph{font-size:22px}small{display:block;margin:0}h2{font-size:27px}.controls button{flex:1;padding:9px 8px}.lesson-top select{max-width:180px}.status{gap:10px}.rule{padding:10px;font-size:13px}}
/* Keep the full working ribbon and proof close together. */
@media(min-width:541px){main{padding-top:24px}header{margin-bottom:22px}h1{font-size:46px;margin:12px 0}h1 br{display:none}h1 br:after{content:" "}header p{font-size:16px;margin:10px 0}.tile{height:100px;aspect-ratio:auto}.target .tile{height:72px;aspect-ratio:auto}.lesson{padding:22px}h3{margin-top:18px}.rule{margin:14px 0}}