:root{
  --bg:#f5f7fb;--surface:#fff;--ink:#172033;--muted:#7b8496;--line:#e3e7ef;
  --accent:#6d5dfc;--accent-2:#9b8cff;--green:#168b68;--green-bg:#e9f8f2;
  --red:#d65768;--red-bg:#fff0f2;--amber:#b77714;--shadow:0 18px 50px rgba(34,42,70,.08);
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--sans:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100vh}
.bg-grid{position:fixed;inset:0;pointer-events:none;opacity:.42;background-image:linear-gradient(rgba(109,93,252,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(109,93,252,.045) 1px,transparent 1px);background-size:32px 32px}
.topbar{height:74px;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,72px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--accent),#b28cff);color:white;display:grid;place-items:center;font-family:var(--mono);font-weight:500;box-shadow:0 7px 18px rgba(109,93,252,.22)}.brand strong{display:block;font-size:14px;letter-spacing:.09em}.brand small{display:block;font-size:8px;color:var(--muted);letter-spacing:.18em;margin-top:2px}
.header-actions{display:flex;align-items:center;gap:10px}.status-dot{font:500 10px var(--mono);color:var(--muted);margin-right:8px}.status-dot i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#31b889;margin-right:6px;box-shadow:0 0 0 3px #dff7ee}
button{font:600 11px var(--sans);letter-spacing:.08em;cursor:pointer}.ghost-btn{border:1px solid var(--line);background:white;color:#687185;border-radius:9px;padding:9px 12px;transition:.18s}.ghost-btn:hover{border-color:#c9c3ff;color:var(--accent);transform:translateY(-1px)}
.shell{width:min(1120px,calc(100% - 32px));margin:0 auto;position:relative;padding:72px 0 38px}.hero{max-width:680px;margin-bottom:42px}.eyebrow,.section-label{font:500 10px var(--mono);letter-spacing:.15em;color:var(--accent);display:flex;gap:10px;align-items:center}.eyebrow span,.section-label span{color:#a5aabd}.hero h1{font-size:clamp(42px,7vw,72px);line-height:.98;letter-spacing:-.055em;margin:13px 0 19px}.hero h1 em{font-style:normal;color:var(--accent)}.hero p{color:var(--muted);font-size:15px;line-height:1.75;max-width:560px}
.editor-card,.diff-panel,.syntax-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.editor-head{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.editor-title{display:flex;align-items:center;gap:10px;padding:14px 18px}.editor-title+ .editor-title{border-left:1px solid var(--line)}.step{width:27px;height:27px;border-radius:8px;background:#eeeaff;color:var(--accent);display:grid;place-items:center;font:500 12px var(--mono)}.step.after{background:#e8f7f2;color:var(--green)}.editor-title strong{font-size:11px;letter-spacing:.1em;display:block}.editor-title small{font-size:9px;color:var(--muted);font-family:var(--mono)}
.editors{display:grid;grid-template-columns:1fr 1fr}.editor-wrap{display:flex;min-height:360px;background:#fbfcfe}.editor-wrap+.editor-wrap{border-left:1px solid var(--line)}.line-numbers{width:44px;flex:none;text-align:right;padding:18px 10px 18px 0;color:#b5bdcc;font:12px/1.65 var(--mono);user-select:none;overflow:hidden;white-space:pre}.editor-wrap textarea{border:0;outline:0;resize:none;width:100%;padding:18px 18px 18px 12px;background:transparent;color:#29334a;font:12px/1.65 var(--mono);tab-size:2;white-space:pre;overflow:auto}.editor-foot{border-top:1px solid var(--line);padding:9px 14px;display:flex;justify-content:space-between;color:#a0a8b8;font:9px var(--mono)}kbd{border:1px solid #d9dde6;border-bottom-width:2px;border-radius:4px;padding:1px 4px;background:#fff;color:#6e7789}
.control-row{display:flex;align-items:center;justify-content:space-between;margin:20px 0 60px}.primary-btn{border:0;border-radius:11px;background:linear-gradient(135deg,var(--accent),#806dff);color:#fff;padding:13px 18px 13px 20px;box-shadow:0 10px 22px rgba(109,93,252,.22);display:flex;gap:26px;align-items:center;transition:.18s}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(109,93,252,.28)}.primary-btn b{font-size:18px;font-weight:400}.mini-stats{display:flex;gap:22px;color:var(--muted);font:10px var(--mono)}.mini-stats div{display:flex;align-items:baseline;gap:5px}.mini-stats small{font-size:8px;color:#a2a9b7}.mini-stats strong{font-size:14px;color:var(--ink)}
.hidden{display:none!important}.section-label{margin-bottom:13px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.stats-grid article{background:white;border:1px solid var(--line);border-radius:13px;padding:15px;display:flex;gap:11px;align-items:center}.stat-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:18px var(--mono)}.stat-icon.add{background:var(--green-bg);color:var(--green)}.stat-icon.del{background:var(--red-bg);color:var(--red)}.stat-icon.edit{background:#f0edff;color:var(--accent)}.stats-grid small{display:block;font:8px var(--mono);color:#9da5b4;letter-spacing:.1em}.stats-grid strong{font:700 20px var(--mono);margin-right:4px}.stats-grid span:last-child{font:9px var(--mono);color:#a0a8b7}
.panel-head{height:44px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font:10px var(--mono);letter-spacing:.12em}.panel-head span{color:#a0a8b7;letter-spacing:0}.diff-output{font:12px/1.65 var(--mono);max-height:600px;overflow:auto}.diff-line{display:grid;grid-template-columns:42px 1fr;min-height:25px;padding-right:15px}.diff-line .ln{text-align:right;padding-right:12px;color:#aeb6c4;user-select:none;border-right:1px solid var(--line)}.diff-line .code{padding-left:13px;white-space:pre-wrap;overflow-wrap:anywhere}.diff-line.add{background:var(--green-bg)}.diff-line.add .code{color:#116b53}.diff-line.del{background:var(--red-bg)}.diff-line.del .code{color:#a83c4d}.diff-line.ctx .code{color:#667084}.diff-line .mark{display:inline-block;width:15px;font-weight:700}.syntax{margin-top:55px}.syntax-card{padding:20px}.syntax-ok{display:flex;align-items:center;gap:13px;color:var(--green)}.syntax-icon{width:39px;height:39px;border-radius:12px;background:var(--green-bg);display:grid;place-items:center;font-size:19px}.syntax-ok strong,.syntax-error strong{display:block;font-size:13px}.syntax-ok small,.syntax-error small{display:block;font:10px var(--mono);color:var(--muted);margin-top:4px}.syntax-error{display:flex;gap:13px;color:var(--red)}.error-list{margin:15px 0 0 52px;padding:0;list-style:none}.error-list li{font:11px/1.7 var(--mono);color:#8e3c49;padding:8px 10px;border-left:3px solid #ef9aa6;background:#fff7f8;margin-top:6px}
footer{display:flex;justify-content:space-between;margin-top:90px;padding-top:18px;border-top:1px solid var(--line);font:9px var(--mono);color:#a1a9b7}
@media(max-width:760px){.topbar{height:auto;min-height:68px}.status-dot{display:none}.header-actions{gap:5px}.ghost-btn{padding:8px;font-size:9px}.shell{padding-top:48px}.editors{grid-template-columns:1fr}.editor-wrap{min-height:260px}.editor-wrap+.editor-wrap{border-left:0;border-top:1px solid var(--line)}.editor-head{grid-template-columns:1fr 1fr}.control-row{margin-bottom:45px}.stats-grid{grid-template-columns:1fr}.mini-stats{gap:10px}.hero h1{font-size:48px}footer{flex-direction:column;gap:7px}}

.breadcrumb{display:flex;gap:8px;align-items:center;font:9px var(--mono);color:#a1a9b7;white-space:nowrap}.breadcrumb a{color:#777f91;text-decoration:none}.breadcrumb a:hover{color:var(--accent)}
.toolbar{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line);background:#fafbfe}.toolbar label{font:700 9px var(--mono);letter-spacing:.12em;color:#697286}.toolbar select{border:1px solid #dce0e9;border-radius:7px;background:white;color:#30394d;padding:6px 9px;font-size:10px}.toolbar span{font:9px var(--mono);color:#a0a8b7;margin-left:auto}.lang-btn{font-family:var(--mono);min-width:42px}.no-diff{padding:28px;text-align:center;color:#9ca4b3;font:11px var(--mono)}
.suspects{margin-top:55px}.suspects-card{padding:20px;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.suspect-item{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}.rank{width:32px;height:32px;border-radius:9px;background:#f0edff;color:var(--accent);display:grid;place-items:center;font:11px var(--mono);flex:none}.suspect-item strong{display:block;font-size:12px}.suspect-item code{display:block;margin-top:6px;color:#667084;font:10px/1.6 var(--mono);white-space:pre-wrap}.heuristic-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font:9px/1.7 var(--mono);color:#9da5b4}.affiliate-widget{min-height:170px;display:flex;justify-content:center;align-items:center;margin-top:24px;overflow:hidden}
@media(max-width:900px){.breadcrumb{display:none}}@media(max-width:760px){.toolbar{flex-wrap:wrap}.toolbar span{width:100%;margin-left:0}.affiliate-widget{min-height:190px}}

.diff-tools{display:flex;align-items:center;gap:7px}
.diff-tools #diffSummary{margin-right:6px}
.view-btn{border:1px solid var(--line);background:#fff;color:#7a8394;border-radius:7px;padding:6px 8px;font:600 9px var(--mono);cursor:pointer}
.view-btn:hover{border-color:#c9c3ff;color:var(--accent)}
.view-btn.active{background:#f0edff;border-color:#cfc8ff;color:var(--accent)}
.diff-output.side-by-side{max-height:600px;overflow:auto}
.side-row{display:grid;grid-template-columns:1fr 1fr;min-height:25px;border-bottom:1px solid rgba(227,231,239,.55)}
.side-cell{display:grid;grid-template-columns:42px 1fr;min-width:0;font:12px/1.65 var(--mono)}
.side-cell+.side-cell{border-left:1px solid var(--line)}
.side-cell .side-ln{text-align:right;padding-right:10px;color:#aeb6c4;border-right:1px solid var(--line);user-select:none}
.side-cell code{padding:0 13px;white-space:pre-wrap;overflow-wrap:anywhere;color:#667084}
.side-cell.del{background:var(--red-bg)}
.side-cell.add{background:var(--green-bg)}
.side-cell.del code{color:#a83c4d}
.side-cell.add code{color:#116b53}
@media(max-width:760px){.diff-tools{flex-wrap:wrap;justify-content:flex-end}.diff-tools #diffSummary{width:100%;text-align:right;margin-right:0}.side-cell{grid-template-columns:34px 1fr}.side-cell .side-ln{padding-right:7px}.side-cell code{padding:0 8px}}

.diff-nav,.error-nav{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);background:#fafbfe;font:9px var(--mono);color:#8d96a8}
.diff-nav button,.error-nav button{border:1px solid var(--line);background:#fff;color:#687185;border-radius:6px;padding:5px 8px;font:600 9px var(--mono);cursor:pointer}
.diff-nav button:hover,.error-nav button:hover{border-color:#c9c3ff;color:var(--accent)}
.error-items{display:grid;gap:7px;margin-top:15px}
.error-item{display:grid;grid-template-columns:28px 65px 1fr;align-items:center;text-align:left;gap:8px;width:100%;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px;color:var(--ink)}
.error-item span{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--red-bg);color:var(--red);font:9px var(--mono)}
.error-item strong{font:10px var(--mono);color:#9a4a56}
.error-item code{font:9px var(--mono);color:#667084;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suspect-item{width:100%;border:0;background:transparent;text-align:left}
.suspect-item small{display:block;margin-top:5px;color:#9da5b4;font:9px var(--mono)}

.target-label{display:flex;align-items:center;gap:10px;min-width:220px}.target-label>div{display:flex;flex-direction:column;gap:3px}.target-label label{font:700 10px var(--mono);letter-spacing:.12em;color:#4f596d}.target-label small{font:9px var(--mono);color:#a0a8b7}.target-icon{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:#eeeaff;color:var(--accent);font:700 13px var(--mono)}.toolbar select{font-weight:600;min-width:145px}.toolbar:focus-within{background:#f7f6ff}.toolbar:focus-within .target-icon{box-shadow:0 0 0 4px rgba(109,93,252,.08)}
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(30,36,52,.32);backdrop-filter:blur(5px)}.modal-dialog{position:relative;width:min(720px,100%);max-height:min(760px,90vh);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 24px 70px rgba(34,42,65,.2)}body.modal-open{overflow:hidden}.modal-close{position:absolute;right:16px;top:14px;border:0;background:#f3f4f8;width:34px;height:34px;border-radius:10px;font-size:22px;color:#667084;cursor:pointer}.modal-eyebrow{font:10px var(--mono);letter-spacing:.14em;color:var(--accent);margin-bottom:9px}.modal-dialog h2{margin:0;font-size:25px;color:var(--ink)}.modal-dialog>p{margin:10px 0 22px;color:#707a8d;font-size:12px;line-height:1.8}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.help-grid article{border:1px solid var(--line);background:#fafbfe;border-radius:14px;padding:15px}.help-grid b{font:700 10px var(--mono);color:var(--accent)}.help-grid p{margin:7px 0 0;color:#687286;font-size:11px;line-height:1.7}.help-note{margin-top:14px;padding:12px 14px;border-left:3px solid #cfc8ff;background:#f7f6ff;color:#7b8496;font:9px/1.8 var(--mono);border-radius:0 9px 9px 0}.toast{position:fixed;left:50%;bottom:28px;z-index:1100;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#252b3a;color:#fff;border-radius:11px;padding:11px 15px;box-shadow:0 12px 30px rgba(31,38,58,.22);font:10px var(--mono);transition:.2s ease;max-width:min(90vw,560px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.toast[data-type="success"]{background:#176a54}.toast[data-type="info"]{background:#343b4d}
@media(max-width:760px){.target-label{min-width:100%;}.toolbar select{flex:1}.help-grid{grid-template-columns:1fr}.modal-dialog{padding:24px 18px}.toast{bottom:18px}}
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 22px}.feature-strip article{display:flex;gap:12px;align-items:flex-start;padding:15px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:13px}.feature-strip article>span{font:10px var(--mono);color:var(--accent);background:#eeeaff;border-radius:7px;padding:5px 6px}.feature-strip strong{display:block;font-size:11px;color:var(--ink)}.feature-strip p{margin:5px 0 0;font:9px/1.65 var(--mono);color:#929aaa}@media(max-width:760px){.feature-strip{grid-template-columns:1fr}}
.icon-btn{display:inline-flex;align-items:center;gap:7px}.icon-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.inline-add,.inline-del{padding:1px 2px;border-radius:3px;font:inherit}.diff-line.add .inline-add{background:#bfeedd;color:#075f48}.diff-line.del .inline-del{background:#ffd0d7;color:#923442}.diff-line.add> .code>.inline-add,.diff-line.del> .code>.inline-del{background:transparent}
.syntax{margin-top:55px}.suspects{margin-top:55px}.syntax-card{scroll-margin-top:90px}.suspects-card{scroll-margin-top:90px}
.error-item,.suspect-item{transition:border-color .16s,background .16s,transform .16s}.error-item:hover,.suspect-item:hover{border-color:#cfc8ff;background:#faf9ff;transform:translateX(2px)}

.diff-line.is-active-diff,.side-row.is-active-diff{outline:2px solid #8b7cf6;outline-offset:-2px;box-shadow:inset 4px 0 0 #8b7cf6;position:relative;z-index:1}
.side-row.is-active-diff .side-cell{background:#f7f5ff}
.error-item.is-active-error{outline:2px solid #8b7cf6;outline-offset:-2px;background:#f7f5ff}

/* Mobile layout hardening */
@media(max-width:760px){
  .topbar{overflow:hidden}
  .header-actions{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;max-width:58vw;padding-bottom:2px;scrollbar-width:none}
  .header-actions::-webkit-scrollbar{display:none}
  .header-actions .ghost-btn{flex:0 0 auto}
  .editor-head{grid-template-columns:1fr}
  .editor-title+.editor-title{border-left:0;border-top:1px solid var(--line)}
  .stats-grid{grid-template-columns:1fr}
  .feature-strip{grid-template-columns:1fr}
  .toolbar{flex-wrap:wrap}
  .toolbar .target-label{min-width:100%;width:100%}
  .toolbar select{min-width:0;width:100%}
  .toolbar>span{width:100%;margin-left:0}
  .diff-nav,.error-nav{flex-wrap:wrap;gap:7px}
  .diff-nav button,.error-nav button{flex:1 1 auto;min-width:0}
  .diff-nav span,.error-nav span{order:-1;width:100%;text-align:center}
  .error-item{grid-template-columns:28px minmax(52px,65px) minmax(0,1fr)}
  .error-item code{min-width:0}
  .suspect-item{grid-template-columns:32px minmax(0,1fr)}
}