@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

    :root {
      color-scheme: light;
      --ink: #172033;
      --muted: #788197;
      --muted-2: #a1a9b9;
      --line: #e7e9ef;
      --paper: #fff;
      --canvas: #f5f6f8;
      --navy: #192238;
      --navy-2: #222e47;
      --blue: #5966dc;
      --blue-soft: #eef0ff;
      --teal: #12977c;
      --teal-soft: #e7f7f2;
      --amber: #c27a1b;
      --amber-soft: #fff4df;
      --red: #d45561;
      --mono: 'DM Mono', 'Cascadia Code', Consolas, monospace;
      --sans: 'DM Sans', 'Segoe UI', sans-serif;
      --display: 'Space Grotesk', 'Segoe UI', sans-serif;
      --shadow: 0 4px 18px rgba(25, 34, 56, .045), 0 1px 3px rgba(25, 34, 56, .035);
    }
    * { box-sizing: border-box; }
    body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 13px; }
    button, textarea, input { font: inherit; }
    button { cursor: pointer; }
    .app { min-height: 100vh; display: grid; grid-template-columns: 68px minmax(0, 1fr); }
    .rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 18px 0 15px; background: var(--navy); color: #aab4c9; z-index: 3; }
    .brand-mark { width: 39px; height: 39px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #8891ff, #545fd1); box-shadow: 0 5px 14px #111a3390; margin-bottom: 28px; }
    .brand-mark svg { width: 22px; height: 22px; }
    .rail-group { display: grid; gap: 10px; width: 100%; justify-items: center; }
    .rail-button { width: 42px; height: 42px; border: 0; border-radius: 12px; display: grid; place-items: center; background: transparent; color: inherit; position: relative; transition: .18s ease; }
    .rail-button:hover { color: #fff; background: #ffffff12; }
    .rail-button.active { color: #fff; background: #5966dc; box-shadow: 0 6px 16px #111a3350; }
    .rail-button svg { width: 19px; height: 19px; stroke-width: 1.8; }
    .rail-spacer { flex: 1; }
    .avatar { width: 32px; height: 32px; border: 1px solid #ffffff30; display: grid; place-items: center; border-radius: 50%; color: #e9eaff; background: #364465; font-size: 10px; font-weight: 700; }
    .main { min-width: 0; }
    .topbar { height: 68px; padding: 0 clamp(20px, 3vw, 42px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
    .wordmark { display: flex; align-items: center; gap: 11px; }
    .wordmark-name { font: 700 15px var(--display); letter-spacing: -.4px; }
    .wordmark-divider { height: 19px; border-left: 1px solid var(--line); }
    .wordmark-tag { color: var(--muted); font-size: 12px; }
    .top-actions { display: flex; align-items: center; gap: 18px; }
    .live-pill, .status-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e5e8f0; border-radius: 20px; background: #fff; padding: 7px 11px; color: #667087; font-size: 10px; font-weight: 700; letter-spacing: .075em; white-space: nowrap; }
    .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #23ae8d; box-shadow: 0 0 0 3px #23ae8d20; }
    .shortcut { color: var(--muted-2); font-size: 11px; }
    .workspace { width: min(1500px, 100%); margin: 0 auto; padding: 30px clamp(20px, 3vw, 42px) 32px; }
    .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 23px; }
    .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #838ba0; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
    .eyebrow .crumb-sep { color: #c5c9d2; }
    h1 { margin: 0; font: 600 clamp(23px, 2.4vw, 29px)/1.2 var(--display); letter-spacing: -.8px; }
    .subtitle { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
    .head-actions { display: flex; align-items: center; gap: 9px; }
    .example-button { border: 0; padding: 9px 8px; display: inline-flex; gap: 7px; align-items: center; color: #626c82; background: transparent; font-size: 11px; font-weight: 600; }
    .example-button:hover { color: var(--blue); }
    .example-button svg { width: 15px; height: 15px; }
    .workspace-grid { display: grid; grid-template-columns: minmax(390px, 1.08fr) minmax(350px, .92fr); gap: 17px; align-items: stretch; }
    .card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); box-shadow: var(--shadow); }
    .card-head { min-height: 53px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
    .card-heading { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: -.1px; }
    .section-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #5966dc; background: #f0f1ff; }
    .section-icon svg { width: 14px; height: 14px; }
    .head-meta { display: flex; align-items: center; gap: 8px; color: #9099aa; font-size: 10px; }
    .language-tag { padding: 4px 7px; border-radius: 5px; color: #647087; background: #f2f4f7; font: 10px var(--mono); }
    .editor-shell { height: 458px; display: grid; grid-template-columns: 48px minmax(0, 1fr); background: #121927; color: #dce3f3; overflow: hidden; }
    .gutter { padding: 17px 0 18px; overflow: hidden; background: #101622; border-right: 1px solid #ffffff0c; color: #667086; text-align: right; user-select: none; font: 11px/22px var(--mono); }
    .line-no { height: 22px; padding-right: 12px; position: relative; }
    .line-no.active { color: #fff; background: #283451; }
    .line-no.active::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #8490ff; }
    .editor-wrap { min-width: 0; position: relative; }
    .editor { width: 100%; height: 100%; padding: 17px 18px 18px; resize: none; border: 0; outline: 0; color: #dce3f3; background: transparent; tab-size: 8; white-space: pre; overflow: auto; font: 11.5px/22px var(--mono); caret-color: #b4bcff; scrollbar-color: #3c4961 transparent; }
    .editor::selection { color: #fff; background: #5664b8; }
    .editor:focus-visible { box-shadow: inset 0 0 0 1px #5966dc55; }
    .editor-footer { min-height: 41px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 15px; color: #8992a5; background: #fdfdfe; font-size: 10px; }
    .editor-info, .editor-info-left { display: flex; align-items: center; gap: 12px; }
    .file-dot { width: 6px; height: 6px; background: #e4ad5c; border-radius: 50%; }
    .exec-card { margin-top: 12px; padding: 12px 13px; border: 1px solid #e9eaf3; border-radius: 9px; display: flex; align-items: center; gap: 8px; background: #fafaff; }
    .primary-button, .secondary-button, .icon-action { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 7px; font-size: 11px; font-weight: 700; transition: .16s ease; }
    .primary-button { padding: 0 13px; color: #fff; border: 1px solid #505ed1; background: #5966dc; box-shadow: 0 3px 8px #5966dc28; }
    .primary-button:hover { background: #4c58c9; transform: translateY(-1px); }
    .secondary-button { padding: 0 11px; color: #566078; border: 1px solid #e3e6ed; background: #fff; }
    .secondary-button:hover, .icon-action:hover { color: var(--blue); border-color: #cfd3fa; background: #f8f8ff; }
    .secondary-button:disabled { opacity: .45; cursor: default; }
    .icon-action { width: 34px; padding: 0; border: 1px solid #e3e6ed; color: #647087; background: #fff; }
    .primary-button svg, .secondary-button svg, .icon-action svg { width: 14px; height: 14px; }
    .exec-divider { width: 1px; height: 22px; margin: 0 3px; background: #e4e6ed; }
    .speed-control { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #8b93a6; font-size: 10px; white-space: nowrap; }
    .speed-control input { width: 65px; accent-color: #5966dc; }
    .speed-value { width: 26px; color: #68738c; text-align: right; font: 10px var(--mono); }
    .debugger { display: flex; flex-direction: column; }
    .machine-label { display: flex; align-items: center; gap: 7px; color: #8a93a6; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .machine-label svg { width: 13px; height: 13px; color: #8690a5; }
    .status-pill { padding: 5px 8px; font-size: 9px; letter-spacing: .06em; }
    .status-pill .live-dot { width: 5px; height: 5px; background: #a6afbf; box-shadow: none; }
    .status-pill.running { color: #147f69; border-color: #c8eadf; background: #f3fcf8; }
    .status-pill.running .live-dot { background: #1da883; box-shadow: 0 0 0 3px #1da88320; animation: pulse 1s infinite; }
    .status-pill.error { color: #bb414d; border-color: #f2d0d4; background: #fff7f7; }
    .status-pill.error .live-dot { background: #d45561; }
    .status-pill.halted { color: #60718c; background: #f2f4f7; }
    @keyframes pulse { 50% { box-shadow: 0 0 0 5px #1da88308; } }
    .register-area { padding: 14px 15px 13px; border-bottom: 1px solid var(--line); }
    .subhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
    .subhead-title { color: #8b94a6; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .subhead-note { color: #a0a7b5; font-size: 9px; }
    .register-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .register { padding: 9px 10px 8px; min-height: 57px; border: 1px solid #eaecf2; border-radius: 8px; background: #fdfdfe; transition: border .2s, background .2s; }
    .register.changed { border-color: #cdd2ff; background: #f7f7ff; }
    .register-top { display: flex; justify-content: space-between; align-items: center; color: #8f98aa; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
    .register-code { color: #a8afbd; font: 9px var(--mono); }
    .register-value { margin-top: 6px; color: #26324b; font: 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .register-value.pc-value { color: #5966dc; }
    .memory-section { min-height: 0; flex: 1; padding: 13px 15px 10px; display: flex; flex-direction: column; }
    .memory-toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
    .memory-toolbar .subhead-title { margin-right: auto; }
    .memory-search { width: 118px; height: 26px; padding: 0 8px; border: 1px solid #e8eaf0; border-radius: 6px; outline: none; color: #657087; background: #fff; font: 10px var(--sans); }
    .memory-search:focus { border-color: #a9b0f5; }
    .memory-table-wrap { min-height: 170px; max-height: 299px; overflow: auto; border: 1px solid #eaecf2; border-radius: 8px; }
    table { width: 100%; border-collapse: collapse; text-align: left; }
    thead { position: sticky; top: 0; z-index: 1; background: #f8f9fb; }
    th { height: 29px; padding: 0 9px; color: #9199aa; border-bottom: 1px solid #ebedf2; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    td { height: 29px; padding: 0 9px; border-bottom: 1px solid #f0f1f4; color: #616c82; font-size: 10px; white-space: nowrap; }
    tr:last-child td { border-bottom: 0; }
    td.symbol { color: #33405a; font: 10px var(--mono); }
    td.address, td.value { font: 10px var(--mono); }
    td.value { color: #1e836f; text-align: right; }
    td.value.touched { animation: flash .8s ease-out; }
    @keyframes flash { 0% { background: #dff5ec; color: #06765e; } 100% { background: transparent; } }
    .memory-empty { padding: 24px 12px; color: #a0a7b5; text-align: center; }
    .debugger-foot { padding: 9px 15px; display: flex; align-items: center; gap: 7px; color: #8b93a4; border-top: 1px solid var(--line); font-size: 10px; }
    .debugger-foot svg { width: 13px; height: 13px; color: #1ca17f; }
    .lower-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr); gap: 17px; margin-top: 16px; }
    .trace-card { min-height: 207px; }
    .trace-head { height: 48px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
    .trace-title-wrap { display: flex; align-items: center; gap: 9px; }
    .trace-indicator { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
    .trace-indicator span { width: 3px; background: #838bf0; border-radius: 3px; opacity: .75; }
    .trace-indicator span:nth-child(1) { height: 5px; }.trace-indicator span:nth-child(2) { height: 10px; }.trace-indicator span:nth-child(3) { height: 7px; }.trace-indicator span:nth-child(4) { height: 13px; }
    .trace-count { color: #a0a7b5; font: 10px var(--mono); }
    .trace-list { max-height: 150px; padding: 5px 14px 7px; overflow: auto; }
    .trace-row { min-height: 27px; display: grid; grid-template-columns: 40px 64px minmax(105px, 1.4fr) minmax(90px, 1fr) 75px; gap: 9px; align-items: center; border-bottom: 1px solid #f0f1f5; color: #8b93a4; font: 9px var(--mono); }
    .trace-row:last-child { border-bottom: 0; }
    .trace-row.current { color: #4451bd; }
    .trace-tick { color: #a0a7b5; }
    .trace-addr { color: #929bac; }
    .trace-op { color: #26334d; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .trace-result { color: #788298; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .trace-cycle { color: #8c94a3; text-align: right; }
    .trace-empty { min-height: 126px; display: grid; place-items: center; color: #a0a7b5; font-size: 11px; }
    .output-card { min-height: 207px; }
    .output-content { padding: 14px 16px; }
    .output-banner { padding: 11px 12px; border: 1px solid #e9ebf2; border-radius: 8px; display: flex; align-items: center; gap: 10px; background: #fbfbfd; }
    .output-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #717ce6; background: #efefff; }
    .output-mark svg { width: 15px; height: 15px; }
    .output-copy { min-width: 0; }
    .output-main { color: #3f4a63; font-size: 11px; font-weight: 600; }
    .output-detail { margin-top: 3px; color: #99a1b0; font: 9px var(--mono); }
    .result-grid { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .result-box { padding: 9px 10px; border: 1px solid #edf0f3; border-radius: 7px; }
    .result-label { color: #929aaa; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .result-value { margin-top: 4px; color: #24314a; font: 16px var(--display); }
    .result-value.pass { color: #14866d; }.result-value.fail { color: #c75660; }
    .notification { position: fixed; right: 24px; bottom: 24px; max-width: min(410px, calc(100vw - 36px)); padding: 12px 15px; border: 1px solid #e9c9cb; border-radius: 9px; color: #9e3d49; background: #fff8f8; box-shadow: 0 8px 25px #18213a20; font-size: 11px; z-index: 10; transform: translateY(12px); opacity: 0; pointer-events: none; transition: .18s ease; }
    .notification.show { transform: translateY(0); opacity: 1; }
    .keyboard-hint { padding: 2px 5px; border: 1px solid #e4e7ee; border-radius: 4px; color: #9ba3b2; font: 9px var(--mono); }
    @media (max-width: 1050px) {
      .workspace-grid, .lower-grid { grid-template-columns: minmax(0, 1fr); }
      .editor-shell { height: 400px; }
      .debugger { min-height: 560px; }
      .memory-table-wrap { max-height: 290px; }
    }
    @media (max-width: 640px) {
      .app { grid-template-columns: 54px minmax(0, 1fr); }
      .rail { padding-top: 13px; }.brand-mark { width: 35px; height: 35px; margin-bottom: 20px; }
      .rail-button { width: 38px; height: 38px; }
      .topbar { height: 58px; padding: 0 15px; }.wordmark-tag, .wordmark-divider, .shortcut { display: none; }.top-actions { gap: 0; }
      .workspace { padding: 22px 13px; }.page-head { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 16px; }.head-actions { width: 100%; justify-content: flex-end; }
      .workspace-grid, .lower-grid { gap: 12px; }.card { border-radius: 10px; }.editor-shell { height: 380px; grid-template-columns: 39px minmax(0, 1fr); }.editor { padding-left: 12px; font-size: 10.5px; }.gutter { font-size: 10px; }
      .exec-card { flex-wrap: wrap; padding: 10px; gap: 7px; }.primary-button, .secondary-button { padding: 0 9px; }.speed-control { flex-basis: 100%; margin: 5px 1px 0; }.speed-control input { flex: 1; }.speed-value { width: 33px; }
      .register-grid { gap: 6px; }.register { padding: 8px; }.register-value { font-size: 10px; }.memory-section, .register-area { padding-left: 11px; padding-right: 11px; }.memory-search { width: 94px; }
      .trace-row { grid-template-columns: 31px 46px minmax(70px, 1fr) minmax(70px, .8fr); gap: 6px; }.trace-cycle { display: none; }
    }