*{box-sizing:border-box}
:root{--blue:#063d69;--deep:#052f52;--sky:#e8f8ff;--cream:#fff8e4;--wood:#7a5630;--green:#1ba867;--gold:#e7bd55;--ink:#123b58;--muted:#607785}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:linear-gradient(#bfeaff,#edfaff 42%,#f2e7c2);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}
button,a,input,select,textarea{font:inherit}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--blue);border-bottom:4px solid var(--gold);color:#fff;position:sticky;top:0;z-index:20}
.topbar a{color:#fff;text-decoration:none;font-weight:950}.topbar .brand{font-size:21px}.topbar .brand small{display:block;font-size:10px;letter-spacing:.1em;color:#bfe7f8}
.page{max-width:1180px;margin:auto;padding:20px 16px 44px}
.ram-hero{display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:center;background:linear-gradient(120deg,#fff8df,#e8f8ff);border:4px solid var(--wood);border-radius:28px;padding:22px;box-shadow:0 12px 28px #173d5530,inset 0 0 0 3px #fff9}
.ram-hero img{width:min(100%,420px);justify-self:center;filter:drop-shadow(0 13px 10px #1235)}
.eyebrow{font-size:11px;font-weight:1000;letter-spacing:.14em;color:#a86618}.ram-hero h1{font-size:clamp(34px,6vw,72px);line-height:.96;margin:6px 0 12px;color:#073f6a}.ram-hero p{font-size:clamp(16px,2vw,21px);font-weight:800;line-height:1.45;margin:0}
.ram-callout{margin-top:14px;padding:13px 15px;border-radius:16px;background:#fff0b2;border:2px solid #d4a83b;color:#6f4b06;font-weight:950}
.section{margin-top:18px;background:var(--cream);border:3px solid var(--wood);border-radius:22px;padding:18px;box-shadow:0 8px 20px #173d5520}
.section h2{margin:0 0 10px;color:#073f6a;font-size:clamp(24px,3vw,38px)}.section h3{color:#0a5a83;margin:18px 0 7px}.section p{line-height:1.55;font-weight:700}
.rules-grid,.mode-grid,.support-grid,.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rule,.mode-card,.support-card,.control-card{background:#fff;border:2px solid #9bb9c7;border-radius:16px;padding:14px;min-width:0}
.rule b,.mode-card b,.support-card b,.control-card b{display:block;color:#073f6a;font-size:17px;margin-bottom:6px}.rule span,.mode-card span,.support-card span,.control-card span{display:block;color:#526b78;line-height:1.4;font-weight:750}
.mode-card{cursor:pointer;text-align:left}.mode-card.active{outline:4px solid #f2c94c;background:#fff3bd;border-color:#a87614}.mode-card:hover{transform:translateY(-1px)}
.big-rule{display:grid;grid-template-columns:1fr 1fr;gap:12px}.big-rule .rule{padding:18px}.big-rule .rule b{font-size:20px}
.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;border-radius:12px;padding:11px 14px;font-weight:1000;cursor:pointer}.btn.green{background:linear-gradient(#5feb9f,#1eb86e);color:#063c28;box-shadow:0 4px 0 #137b4c}.btn.blue{background:#0b6d9d;color:#fff}.btn.gold{background:#f1cb63;color:#604006}.btn.dark{background:#263b4b;color:#fff}
.prompt-box{width:100%;min-height:240px;padding:14px;border:2px solid #8aa8b7;border-radius:14px;background:#f8fcff;color:#153b51;font:700 14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.skill-banner{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 14px}.pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e0f5ff;border:1px solid #8fc2db;font-weight:900}.pill.gold{background:#fff0b2;border-color:#d9af44}
.quick-steps{counter-reset:steps;display:grid;gap:10px}.quick-step{position:relative;padding:13px 13px 13px 54px;background:#fff;border:2px solid #9fb8c4;border-radius:15px;min-height:52px}.quick-step:before{counter-increment:steps;content:counter(steps);position:absolute;left:12px;top:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0b7a4d;color:#fff;font-weight:1000}.quick-step b{display:block;color:#073f6a}
.teacher-note{padding:12px 14px;border-left:5px solid #0b7a4d;background:#e9fff4;border-radius:10px;font-weight:800}
.scoring-table{width:100%;border-collapse:collapse}.scoring-table th,.scoring-table td{border-bottom:1px solid #d4c89e;padding:9px;text-align:left}.scoring-table th{color:#073f6a}
footer{max-width:1180px;margin:auto;padding:0 16px 28px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-weight:850;color:#536c79}
@media(max-width:820px){.ram-hero{grid-template-columns:1fr}.ram-hero img{max-height:230px;object-fit:contain}.rules-grid,.mode-grid,.support-grid,.control-grid{grid-template-columns:1fr 1fr}.big-rule{grid-template-columns:1fr}}
@media(max-width:560px){.topbar{padding:10px 12px;align-items:flex-start}.topbar .hide-phone{display:none}.page{padding:10px 8px 30px}.ram-hero,.section{border-radius:18px;padding:13px}.ram-hero h1{font-size:36px}.ram-hero img{max-height:170px}.rules-grid,.mode-grid,.support-grid,.control-grid{grid-template-columns:1fr}.actions{display:grid}.btn{width:100%}.prompt-box{min-height:300px;font-size:13px}.section h2{font-size:27px}}
@media print{.topbar,.actions,footer{display:none}.page{max-width:none}.section,.ram-hero{box-shadow:none;break-inside:avoid}}