.original-ui{--bg-top:#fef3e2;--bg-bottom:#dbeafe;--panel:#ffffff;--panel-border:#cbd5e1;--ink:#111827;--muted:#475569;--accent:#748DF4;--accent-soft:#e8ecfe;--accent-strong:#0f172a;--level1-bg:#dcfce7;--level1-border:#22c55e;--level2-bg:#f3e8ff;--level2-border:#B95DCD;--ok-bg:#dcfce7;--ok-border:#22c55e;--err-bg:#fee2e2;--err-border:#ef4444;--success:#16a34a;--shadow:0 12px 30px rgba(15,23,42,0.12);min-height:100svh;position:relative;background:linear-gradient(135deg,var(--bg-top),var(--bg-bottom));font-family:var(--font-montserrat),"Montserrat",sans-serif;color:var(--ink);font-size:16px;line-height:1.5;&:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(15,23,42,.08) 1.2px,transparent 0);background-size:28px 28px;opacity:.45;z-index:0}h1,h2,h3{margin:0;font-family:inherit;font-weight:900}.app{position:relative;z-index:1;min-height:100svh;padding:clamp(14px,1.6vw,22px);display:grid;grid-gap:14px;gap:14px}.panel{background:var(--panel);border:2px solid var(--panel-border);border-radius:18px;box-shadow:var(--shadow);padding:14px}.puzzle-header{display:grid;grid-gap:10px;gap:10px}.puzzle-head-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.puzzle-head-left{flex:1 1;min-width:0}.puzzle-head-right{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.rh-logo{height:28px;width:auto}.puzzle-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.puzzle-count{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:800;color:var(--muted)}.level-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;&.level-1{background:var(--level1-bg);border:2px solid var(--level1-border);color:#166534}&.level-2{background:var(--level2-bg);border:2px solid var(--level2-border);color:#7e22ce}}.challenge-type-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border:2px solid #cbd5e1;background:#f1f5f9;color:var(--accent-strong);&.ct-create{border-color:#34d399;background:#ecfdf5;color:#065f46}&.ct-match{border-color:#60a5fa;background:#eff6ff;color:#1e3a8a}&.ct-design{border-color:#c084fc;background:#f5f3ff;color:#6b21a8}}.puzzle-header h1{font-size:clamp(1.15rem,1.2vw + .95rem,1.7rem)}.puzzle-description{color:var(--muted);font-size:.9rem;margin-top:2px;line-height:1.5}.puzzle-nav{display:flex;gap:8px;flex-wrap:wrap}.btn-playground{text-decoration:none;border-color:var(--accent);color:var(--accent)}.btn-playground:hover{background:var(--accent-soft)}.puzzle-instructions{margin:0;padding-left:20px;display:grid;grid-gap:6px;gap:6px;color:var(--accent-strong);line-height:1.5;li{font-size:.95rem}}.instruction-token.kind-code{display:inline-block;margin:0 2px;padding:1px 8px;border-radius:999px;font-size:.86rem;border:2px solid #cbd5e1;background:#f8fafc}.instruction-token.kind-code,.instruction-token.kind-emphasis{font-weight:800;color:#0f172a;font-family:var(--font-mono),"Fira Code",monospace}.instruction-token.kind-emphasis{font-size:.92em}.token-blue{border-color:#3b82f6;background:#dbeafe;color:#1e3a8a}.token-pink{border-color:#ec4899;background:#fce7f3;color:#831843}.step-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 8px}.step-card{flex:0 0 auto;min-width:280px;max-width:380px;background:#ffffff;border:2px solid #bfdbfe;border-left-width:6px;border-radius:14px;padding:12px;display:grid;grid-gap:8px;gap:8px;box-shadow:var(--shadow)}.step-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.step-num{text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:800;color:#ffffff;background:var(--muted);border-radius:6px;padding:2px 8px}.step-label{font-size:.94rem;font-weight:800;color:var(--accent-strong);line-height:1.3}.step-hint{margin:0;padding:10px 12px;font-family:var(--font-mono),"Fira Code",monospace;font-size:.82rem;color:var(--accent-strong);background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;white-space:pre-wrap;word-break:break-word;line-height:1.45;.step-hint-placeholder,code{-moz-user-select:none;user-select:none;-webkit-user-select:none}&.step-hint-hidden{background:#fef9c3;border-color:#facc15;border-style:dashed}}.step-hint-placeholder{font-family:inherit;font-style:italic;font-size:.82rem;font-weight:700;color:#854d0e}.step-tone-blue{border-color:#bfdbfe #bfdbfe #bfdbfe #3b82f6;background:#eff6ff;.step-num{background:#3b82f6}.step-hint{border-color:#bfdbfe;background:#f5f9ff}}.step-tone-green{border-color:#bbf7d0 #bbf7d0 #bbf7d0 #22c55e;background:#f0fdf4;.step-num{background:#22c55e}.step-hint{border-color:#bbf7d0;background:#f6fef9}}.step-tone-orange{border-color:#fed7aa #fed7aa #fed7aa #f59e0b;background:#fffbeb;.step-num{background:#f59e0b}.step-hint{border-color:#fed7aa;background:#fffaf0}}.step-tone-pink{border-color:#fbcfe8 #fbcfe8 #fbcfe8 #ec4899;background:#fdf2f8;.step-num{background:#ec4899}.step-hint{border-color:#fbcfe8;background:#fef5f9}}.step-tone-purple{border-color:#ddd6fe #ddd6fe #ddd6fe #8b5cf6;background:#faf5ff;.step-num{background:#8b5cf6}.step-hint{border-color:#ddd6fe;background:#fbf8ff}}.workspace{grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);align-items:stretch}.left-column,.right-column,.workspace{display:grid;grid-gap:14px;gap:14px;min-height:0}.left-column,.right-column{align-content:start}.pane-html{display:grid;grid-gap:8px;gap:8px}.pane-label{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.html-pane{background:#f8fafc;border:2px solid #bfdbfe;border-radius:12px;overflow:hidden;.cm-editor{background:transparent}.cm-content{caret-color:transparent}}.pane-css{display:grid;grid-gap:10px;gap:10px}.pane-css-top{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.css-editor{background:#f8fafc;border:2px solid #bfdbfe;border-radius:12px;overflow:hidden;min-height:220px;.cm-editor{background:transparent}.cm-editor,.cm-scroller{min-height:220px}}.pane-preview{display:grid;grid-gap:8px;gap:8px}.pane-preview-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.preview-frame{background:#ffffff;border:2px solid #bfdbfe;border-radius:12px;overflow:hidden;display:block;iframe{width:100%;display:block;border:0}}.preview-frame-tabbed{display:grid;grid-gap:8px;gap:8px}.preview-tabs{display:flex;gap:6px}.preview-tab{flex:0 0 auto;font-family:inherit;font-size:.82rem;font-weight:700;padding:6px 16px;border:2px solid #bfdbfe;border-radius:10px;background:#ffffff;color:var(--accent-strong);cursor:pointer;transition:background .1s ease,color .1s ease;&:hover:not(.is-active){background:#f1f5f9}&.is-active{background:var(--accent);border-color:var(--accent);color:#ffffff}&:focus-visible{outline:3px solid rgba(116,141,244,.35);outline-offset:2px}}.preview-tabs-reset{margin-left:auto;padding:5px 12px;font-size:.82rem}.timeline-controls{display:flex;gap:8px;flex-wrap:wrap}.btn{border:none;border-radius:11px;padding:8px 14px;font-size:.92rem;font-weight:800;font-family:inherit;cursor:pointer;transition:transform .1s ease,filter .1s ease;&:active:not(:disabled){transform:scale(.97)}&:disabled{opacity:.45;cursor:not-allowed}&:focus-visible{outline:3px solid rgba(116,141,244,.35);outline-offset:2px}&.primary{background:var(--accent);color:#ffffff}&.primary:hover:not(:disabled){filter:brightness(.95)}&.ghost{background:#ffffff;color:var(--accent-strong);border:2px solid #94a3b8}}.btn-dev-solution{font-size:.78rem;padding:5px 10px;border:2px solid #f59e0b;color:#92400e;background:#fef3c7;border-radius:8px;font-family:inherit;font-weight:800;cursor:pointer}.dev-level-toggle{display:inline-flex;gap:4px;margin-left:6px;padding:3px;border:1px solid #f59e0b;border-radius:999px;background:#fffbeb}.dev-level-btn{font-family:inherit;font-size:.7rem;font-weight:800;letter-spacing:.04em;padding:3px 10px;border:none;border-radius:999px;background:transparent;color:#92400e;cursor:pointer;transition:background .1s ease,color .1s ease;&:hover:not(.is-active){background:#fef3c7}&.is-active{background:#f59e0b;color:#ffffff}&:focus-visible{outline:2px solid rgba(245,158,11,.5);outline-offset:1px}}.level-complete{display:grid;place-items:center;padding:48px 16px}.level-complete-card{display:grid;grid-gap:18px;gap:18px;text-align:center;max-width:640px;padding:56px 48px;background:#ffffff;border:2px solid #fde68a;border-radius:24px;box-shadow:0 24px 60px -32px rgba(116,141,244,.35)}.level-complete-eyebrow{margin:0;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#b45309}.level-complete-headline{margin:0;font-size:1.8rem;font-weight:900;line-height:1.15;color:#0f172a}.level-complete-sub{margin:0;font-size:1rem;line-height:1.5;color:var(--muted);strong{color:var(--accent-strong)}}.feedback-panel{display:grid;grid-gap:8px;gap:8px;padding:12px 14px;animation:feedbackIn .22s cubic-bezier(.2,1,.3,1)}@keyframes feedbackIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.feedback-running{color:var(--muted);font-size:.92rem;font-style:italic;margin:0}.feedback-pass{display:flex;flex-direction:column;gap:10px}.feedback-panel.feedback-pass{border-color:#86efac;background:#f0fdf4}.feedback-success{margin:0;color:var(--success);font-weight:800;font-size:1rem}.feedback-panel.feedback-fail{border-color:#fecaca;background:#fef2f2}.feedback-fail{display:grid;grid-gap:6px;gap:6px}.feedback-fail-headline{margin:0;color:#991b1b;font-weight:700;font-size:.95rem}.btn-finish-level{align-self:flex-start;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 18px;font:inherit;font-weight:600;cursor:pointer;transition:filter .15s;&:hover{filter:brightness(.92)}}.feedback-explanation{margin-top:10px;padding-top:10px;border-top:1px solid var(--panel-border)}.feedback-loading{display:inline-flex;align-items:baseline;gap:.4em;flex-wrap:wrap;font-style:italic;color:var(--muted);font-size:.85rem;margin:0}.feedback-loading-spinner{display:inline-block;width:1em;height:1em;border-color:transparent transparent currentcolor currentcolor;border-style:solid;border-width:2px;border-radius:50%;opacity:.8;transform:translateY(.15em) rotate(0deg);animation:original-feedback-loading-spin .8s linear infinite}.feedback-loading-elapsed{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-style:normal;opacity:.7}.feedback-text{color:var(--ink);line-height:1.65;font-size:.9rem;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width:1024px){.workspace{grid-template-columns:1fr}}@media (max-width:640px){.app{padding:12px}.btn{flex:1 1 auto}.pane-css-top{flex-direction:column;align-items:flex-start}.timeline-controls{width:100%}}}@keyframes original-feedback-loading-spin{0%{transform:translateY(.15em) rotate(0deg)}to{transform:translateY(.15em) rotate(1turn)}}@media (prefers-reduced-motion:reduce){.original-ui .feedback-loading-spinner{animation:none}}.original-ui{--chip-attr:#64748B;--chip-attr-soft:#F1F5F9;--chip-attr-strong:#334155;--chip-id:#0EA5E9;--chip-id-soft:#E0F2FE;--chip-id-strong:#0369A1;--chip-class:#A855F7;--chip-class-soft:#F3E8FF;--chip-class-strong:#7E22CE;.html-pane{margin:0;padding:12px 14px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;overflow:auto;font-family:var(--font-mono),"JetBrains Mono",monospace;font-size:.92rem;line-height:1.7}.html-pane code{display:block;white-space:pre-wrap;word-break:break-word}.html-tok-syntax{color:#94a3b8}.html-tok-tag-name{color:#e11d48;font-weight:600}.html-tok-attr-name{color:#2563eb}.html-tok-eq{color:#94a3b8}.html-tok-attr-value{color:#16a34a}.html-tok-plain{color:#334155}.html-attr-static{white-space:nowrap}.chip{display:inline-flex;align-items:center;gap:4px;margin:0 2px;padding:1px 8px;border-radius:999px;font-family:var(--font-mono),monospace;font-size:.82rem;font-weight:600;line-height:1.4;cursor:pointer;border:1.5px dashed transparent;transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .16s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:transparent;vertical-align:baseline}.chip-add.chip-attr{color:var(--chip-attr-strong);border-color:var(--chip-attr);background:var(--chip-attr-soft)}.chip-add.chip-add-subtle{width:14px;height:14px;padding:0;margin:0 1px;border-radius:50%;border:1.25px dashed #cbd5e1;background:transparent;color:#94a3b8;font-size:11px;line-height:1;vertical-align:1px}.chip-add.chip-add-subtle .chip-plus{font-weight:700;opacity:.9}.chip-add.chip-add-subtle:hover{background:var(--chip-attr-soft);border-style:solid;border-color:var(--chip-attr);color:var(--chip-attr-strong);transform:scale(1.15);box-shadow:0 2px 6px rgba(15,23,42,.1)}.chip-add.chip-add-subtle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.chip-add:hover{transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px rgba(15,23,42,.12);border-style:solid}.chip-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.chip-plus{font-weight:800;opacity:.8}@keyframes chipFlash{0%{transform:scale(1)}35%{transform:scale(1.08);filter:brightness(1.15)}to{transform:scale(1)}}.chip-flash{animation:chipFlash .6s ease}.chip-attr-name{font-weight:700}.chip-attr-eq,.chip-attr-name,.chip-attr-quote{font-family:var(--font-mono),monospace;font-size:.92rem}.chip-attr-eq,.chip-attr-quote{opacity:.7}.chip-filled{border:1.5px solid;cursor:pointer;padding:1px 4px 1px 8px;gap:0}.chip-filled.chip-filled-subtle{border:1.5px dashed transparent;background:transparent;border-radius:4px;padding:0 2px;margin:0;color:inherit}.chip-filled.chip-filled-subtle .chip-attr-name{color:#2563eb;font-weight:600}.chip-filled.chip-filled-subtle .chip-attr-eq{color:#94a3b8;opacity:1}.chip-filled.chip-filled-subtle .chip-attr-quote{color:#16a34a;opacity:1}.chip-filled.chip-filled-subtle .chip-value{color:#16a34a;font-weight:600}.chip-filled.chip-filled-subtle:hover{border-color:#cbd5e1;background:#f8fafc}.chip-filled.chip-filled-subtle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.chip-filled.chip-filled-subtle .chip-x{width:14px;height:14px;font-size:.85rem;margin-left:2px;opacity:0;transition:opacity .12s ease}.chip-filled.chip-filled-subtle:focus-visible .chip-x,.chip-filled.chip-filled-subtle:hover .chip-x{opacity:.55}.chip-filled.chip-filled-subtle .chip-x:hover{opacity:1}.chip-filled.chip-id{color:var(--chip-id-strong);border-color:var(--chip-id);background:var(--chip-id-soft)}.chip-filled.chip-class{color:var(--chip-class-strong);border-color:var(--chip-class);background:var(--chip-class-soft)}.chip-filled:hover{box-shadow:0 2px 8px rgba(15,23,42,.1)}.chip-value{font-weight:700}.chip-x{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;width:18px;height:18px;border-radius:50%;margin-left:2px;color:inherit;font-size:1rem;line-height:1;cursor:pointer;opacity:.55;transition:opacity .12s ease,background .12s ease;display:inline-flex;align-items:center;justify-content:center;padding:0}.chip-x:hover{opacity:1;background:rgba(0,0,0,.08)}.attr-popover{position:fixed;z-index:1000;min-width:260px;max-width:320px;background:#ffffff;border:1.5px solid #cbd5e1;border-radius:14px;box-shadow:0 16px 40px rgba(15,23,42,.18);padding:14px;font-family:var(--font-montserrat),sans-serif;font-size:.9rem;animation:popoverIn .16s cubic-bezier(.2,1,.3,1)}@keyframes popoverIn{0%{opacity:0;transform:translateY(-4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.attr-popover-arrow{position:absolute;top:-7px;left:16px;width:12px;height:12px;background:#ffffff;border-top:1.5px solid #cbd5e1;border-left:1.5px solid #cbd5e1;transform:rotate(45deg)}.attr-popover-title{font-weight:800;font-size:.95rem;margin-bottom:4px}.attr-popover-hint{font-size:.78rem;color:var(--muted);margin-bottom:10px}.attr-popover-row{display:flex;align-items:center;gap:4px;padding:8px 10px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;margin-bottom:8px}.attr-popover-row:focus-within{border-color:var(--accent);background:#ffffff}.attr-popover-input{flex:1 1;border:0;background:transparent;outline:none;font-family:var(--font-mono),monospace;font-size:.95rem;font-weight:600;color:var(--ink)}.attr-popover-input::placeholder{color:#94a3b8;font-weight:500}.attr-popover-input-wide{min-width:220px}.attr-popover-hint code{font-family:var(--font-mono),monospace;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:0 4px;font-size:.78rem}.attr-popover-error{font-size:.78rem;color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:6px 8px;margin-bottom:8px}.attr-popover-actions{display:flex;justify-content:flex-end;gap:8px}.selector-coach{border:1.5px solid var(--panel-border);border-radius:14px;background:#ffffff;overflow:hidden;transition:box-shadow .16s ease}.selector-coach.is-open{box-shadow:var(--shadow)}.selector-coach-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;text-align:left}.selector-coach-toggle:hover{background:#f8fafc}.selector-coach-toggle-icon{color:var(--muted);font-size:.85rem}.selector-coach-toggle-label{font-weight:800;font-size:.92rem}.selector-coach-toggle-sub{color:var(--muted);font-size:.8rem;margin-left:auto}.selector-coach-body{padding:8px 14px 12px;display:grid;grid-gap:8px;gap:8px}.coach-row{border-left:3px solid;padding:8px 12px;border-radius:6px;background:#f8fafc;display:grid;grid-gap:6px;gap:6px}.coach-row-title{font-family:var(--font-mono),monospace;font-weight:800;font-size:.95rem;text-transform:lowercase;letter-spacing:.02em}.coach-row-when{font-size:.85rem;color:var(--muted);line-height:1.4}.coach-row-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;margin-top:2px}.coach-cell{display:grid;grid-gap:2px;gap:2px;padding:6px 10px;background:#ffffff;border:1px solid var(--panel-border);border-radius:6px}.coach-cell-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.coach-cell-example{font-family:var(--font-mono),monospace;font-size:.92rem;font-weight:700}.coach-cell-note{font-size:.78rem;color:var(--muted);line-height:1.35}@media (max-width:540px){.coach-row-grid{grid-template-columns:1fr}}}