.rope-launch{display:flex;align-items:center;width:100%;gap:13px;background:#eaf4f8;border:1px solid #cddfe8;border-radius:15px;padding:13px 16px;margin:0 0 16px;text-align:left;color:#35637d}
.rope-launch>svg{width:38px;height:36px;fill:#4489af;stroke:#4489af;stroke-width:3;flex-shrink:0}.rope-launch>svg path{fill:none;stroke-linecap:round}
.rope-launch>span:first-of-type{flex:1}.rope-launch strong{display:block;font-size:15px;font-weight:700}.rope-launch small{display:block;margin-top:5px;font-size:10px;line-height:1.4;color:#7391a2}
.rope-launch em{display:inline-block;font-style:normal;font-size:7px;letter-spacing:.1em;padding:4px 5px;border-radius:4px;background:#d2e6f0;color:#487a97;margin-left:6px;vertical-align:middle}.rope-launch:hover{background:#deedf4;border-color:#9ebdce}
#rope-sidebar{margin-bottom:19px;padding:12px}.rope-dialog{--accent:#3b7f9e;--surface:#f8fbfc;--ink:#294c62;--muted:#7a94a3;--line:#d5e2e8;--bg:#eff5f7;width:600px;padding:25px 28px 18px;background:var(--surface);color:var(--ink);overflow-y:auto}
.rope-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.rope-heading .eyebrow{font-size:8px;color:#7a97a7}.rope-heading h2{font:500 33px/1.2 Georgia,serif;letter-spacing:-.02em;margin-top:6px}.rope-heading .icon-button{flex:none}
.rope-level-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}.rope-level-bar label{flex:1;display:flex;flex-direction:column;gap:6px;font-size:9px;font-weight:700;color:#7c98a7;text-transform:uppercase;letter-spacing:.1em}
.rope-level-bar select{width:100%;max-width:340px;background:#fff;color:#3f6377;border:1px solid #d6e3e8;border-radius:9px;padding:11px 10px;font-size:13px;letter-spacing:0;min-height:44px}.rope-count{text-align:right;min-width:80px}.rope-count strong{display:block;font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}.rope-count span{font-size:8px;font-weight:700;letter-spacing:.1em;color:#7897a8}
.rope-materials{display:grid;grid-template-columns:1fr 1fr;background:#e9f0f4;padding:4px;border-radius:12px;gap:4px;margin-bottom:19px}.rope-materials button{min-height:52px;background:transparent;color:#638195;border-radius:9px;padding:8px}.rope-materials button.selected{background:#fff;color:#346c89;box-shadow:0 2px 6px #43667b13}.rope-materials span{display:block;font-size:12px;font-weight:700}.rope-materials small{display:block;font-size:9px;margin-top:4px;font-weight:400;opacity:.8}
.rope-stage{padding:18px;background:radial-gradient(ellipse at 50% 0,#aacbdd,#739bb2);border-radius:20px;box-shadow:inset 0 1px 0 #d7e6ed;border:1px solid #7094aa}
#rope-canvas{width:100%;height:auto;aspect-ratio:1;display:block;border-radius:18px;background:linear-gradient(140deg,#f6f7f0,#e8eae2);touch-action:none;user-select:none;box-shadow:-4px 5px 0 #577c9260,0 10px 25px #193e4b30;outline:none}
#rope-canvas:focus-visible{outline:3px solid #f0b955;outline-offset:4px}
.rope-feedback{font-size:11px;color:#68899d;text-align:center;line-height:1.6;min-height:42px;padding:14px 0 10px}.rope-complete .rope-feedback{color:#478050;font-weight:700}
.rope-tools{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px}.rope-tools button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 8px;font-size:11px;background:#fff}.rope-tools svg{height:17px;width:17px}.rope-tools [aria-pressed=true]{color:#337ea3;background:#e4f1f7;border-color:#a7cddd}
.rope-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}.rope-bottom>span{font-size:10px;color:#7793a4;line-height:1.6}.rope-bottom .primary{font-size:12px;padding:12px 17px;gap:10px}.rope-keyboard{text-align:center;font-size:9px;color:#90a4b1;margin-top:17px}
.dark .rope-launch{background:#243c48;border-color:#385563;color:#b8d9e7}.dark .rope-launch small{color:#91b2c2}.dark .rope-launch em{background:#365564;color:#c8dfea}
.dark .rope-dialog{--surface:#20303a;--ink:#d3e5ee;--line:#3d5664;--bg:#2a404e;background:var(--surface)}.dark .rope-level-bar select,.dark .rope-tools button{background:#2a414f;color:#cee2ed;border-color:#3c5869}.dark .rope-materials{background:#1a2831}.dark .rope-materials button.selected{background:#385364;color:#deedf5}.dark .rope-materials button{color:#a6bdcb}.dark .rope-stage{background:radial-gradient(ellipse at 50% 0,#526e7e,#304958);border-color:#5c7888}.dark #rope-canvas{background:linear-gradient(140deg,#3a4b52,#293c48)}.dark .rope-feedback{color:#a4c0cf}.dark .rope-complete .rope-feedback{color:#9dd3a3}
@media(max-width:480px){.rope-dialog{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:20px 17px 17px}.rope-heading{margin-bottom:17px}.rope-heading h2{font-size:30px}.rope-level-bar{gap:10px;margin-bottom:14px}.rope-count strong{font-size:24px}.rope-count{min-width:66px}.rope-level-bar select{font-size:12px}.rope-materials{margin-bottom:15px}.rope-materials small{font-size:8px}.rope-materials span{font-size:11px}.rope-stage{padding:13px;border-radius:17px}#rope-canvas{border-radius:13px}.rope-keyboard{display:none}.rope-bottom .primary{font-size:11px;padding:11px 12px}.rope-feedback{font-size:10px}.rope-bottom>span{font-size:9px;max-width:125px}.rope-launch{padding:12px;gap:9px}.rope-launch small{font-size:9px}.rope-launch>svg{width:31px}.rope-launch strong{font-size:14px}}
@media(min-width:900px){.rope-dialog{width:550px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:650px){
  .rope-dialog[open]{display:grid;grid-template-columns:minmax(230px,1fr) minmax(220px,1fr);column-gap:18px;row-gap:5px;width:790px;padding:15px 20px;max-height:calc(100dvh - 16px)}
  .rope-heading{grid-column:1/-1;margin-bottom:3px}.rope-heading h2{font-size:25px;margin:0}.rope-heading .eyebrow{display:none}.rope-heading .icon-button{height:44px;width:44px;min-height:44px;min-width:44px}
  .rope-stage{grid-column:2;grid-row:2/7;width:min(100%,calc(100dvh - 114px));align-self:center;margin:auto;padding:10px}
  .rope-level-bar{grid-column:1;grid-row:2;margin:0;gap:10px}.rope-level-bar label{font-size:0;gap:0}.rope-level-bar select{font-size:12px;min-height:42px;padding:9px}.rope-count strong{font-size:22px}.rope-count span{font-size:7px}
  .rope-materials{grid-column:1;grid-row:3;margin:0}.rope-materials button{min-height:44px;padding:6px}.rope-materials small{font-size:8px}
  .rope-feedback{grid-column:1;grid-row:4;padding:5px 0;min-height:0;font-size:10px}
  .rope-tools{grid-column:1;grid-row:5}.rope-tools button{min-height:42px}
  .rope-bottom{grid-column:1;grid-row:6;margin-top:3px}.rope-bottom>span{font-size:9px}.rope-bottom .primary{font-size:11px;padding:10px 12px;min-height:42px}
  .rope-keyboard{display:none}
}