:root{--bg0: #1a2f28;--bg1: #243d34;--bg2: #2f4f43;--surface: rgba(247, 242, 232, .94);--surface-strong: #f7f2e8;--ink: #14241e;--ink-muted: #4a6358;--accent: #e85d4c;--accent-deep: #c44738;--line: rgba(20, 36, 30, .12);--ok: #2a7a55;--warn: #b06a1a;--danger: #b33a2e;--shadow: 0 18px 50px rgba(10, 20, 16, .22);--radius: 14px;--font-display: "Fraunces", Georgia, serif;--font-body: "DM Sans", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--font-body);color:var(--ink);background:radial-gradient(ellipse 80% 60% at 10% 0%,rgba(232,93,76,.28),transparent 55%),radial-gradient(ellipse 70% 50% at 90% 10%,rgba(120,180,150,.35),transparent 50%),linear-gradient(165deg,var(--bg0),var(--bg1) 45%,var(--bg2));background-attachment:fixed}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;color:var(--surface-strong)}.brand{font-family:var(--font-display);font-size:1.65rem;font-weight:700;letter-spacing:-.02em}.brand span{color:#ffb4a8}.topbar nav{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.topbar a,.topbar button.linkish{color:#f7f2e8e0;background:none;border:none;padding:.35rem .55rem}.topbar a:hover,.topbar button.linkish:hover{color:#fff}.lang-switch{display:inline-flex;border:1px solid rgba(255,255,255,.28);border-radius:999px;overflow:hidden;margin-right:.25rem}.lang-switch button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:#f7f2e8bf;padding:.3rem .65rem;font-size:.8rem;font-weight:600}.lang-switch button.active{background:#ffffff2e;color:#fff}.main{flex:1;width:min(1080px,calc(100% - 2rem));margin:0 auto 2.5rem}.panel{background:var(--surface);border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow);padding:1.5rem;border:1px solid rgba(255,255,255,.35)}.panel h1,.panel h2,.hero-title{font-family:var(--font-display);letter-spacing:-.02em;margin:0 0 .5rem}.muted{color:var(--ink-muted)}.stack{display:flex;flex-direction:column;gap:1rem}.row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.card-link{display:block;padding:1.1rem 1.15rem;border-radius:var(--radius);border:1px solid var(--line);background:#ffffff8c;transition:transform .18s ease,border-color .18s ease,background .18s ease}.card-link:hover{transform:translateY(-2px);border-color:#e85d4c73;background:#fff}.card-link h3{margin:0 0 .35rem;font-size:1.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:999px;padding:.65rem 1.15rem;background:var(--accent);color:#fff;font-weight:600;transition:background .15s ease,transform .15s ease}.btn:hover{background:var(--accent-deep)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn.secondary:hover{border-color:var(--ink-muted);background:#ffffff80}.btn.ghost{background:#ffffff1f;color:var(--surface-strong);border:1px solid rgba(255,255,255,.2)}.field{display:flex;flex-direction:column;gap:.35rem;flex:1;min-width:180px}.field label{font-size:.85rem;font-weight:600;color:var(--ink-muted)}.field input,.field textarea,.field select{border:1px solid var(--line);border-radius:10px;padding:.65rem .75rem;background:#fff;color:var(--ink)}.field textarea{min-height:88px;resize:vertical}.banner{padding:.75rem 1rem;border-radius:10px;background:#e85d4c1f;border:1px solid rgba(232,93,76,.28);color:var(--danger);font-size:.95rem}.banner.ok{background:#2a7a551f;border-color:#2a7a5547;color:var(--ok)}.banner.info{background:#243d3414;border-color:var(--line);color:var(--ink-muted)}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:.7rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}.table th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted)}.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600;background:#243d341a}.badge.react{background:#61dafb40}.badge.html{background:#e85d4c26}.badge.failed{background:#b33a2e26;color:var(--danger)}.hero{padding:2.5rem 1.75rem 2rem;color:var(--surface-strong);text-align:center}.hero-title{font-size:clamp(2.4rem,6vw,3.6rem);margin-bottom:.4rem}.hero p{margin:0 auto 1.5rem;max-width:34rem;color:#f7f2e8d1;font-size:1.05rem}.code-input{font-size:1.4rem;letter-spacing:.28em;text-align:center;text-transform:uppercase;font-weight:700}.viewer-frame{width:100%;min-height:min(75vh,720px);border:1px solid var(--line);border-radius:var(--radius);background:#fff}.split-actions{display:grid;gap:1rem;grid-template-columns:1fr 1fr}@media(max-width:720px){.split-actions{grid-template-columns:1fr}.main{width:min(100% - 1.25rem,1080px)}.panel{padding:1.15rem}}.dropzone{border:2px dashed var(--line);border-radius:var(--radius);padding:1.5rem;text-align:center;background:#fff6;transition:border-color .15s ease,background .15s ease}.dropzone.active{border-color:var(--accent);background:#e85d4c14}.dropzone.busy{opacity:.65;pointer-events:none}.filter-chips{display:flex;flex-wrap:wrap;gap:.45rem}.chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:#ffffff8c;color:var(--ink);border-radius:999px;padding:.35rem .75rem;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;transition:background .15s ease,border-color .15s ease,color .15s ease}.chip:hover{border-color:#e85d4c66;background:#fff}.chip.active{background:var(--ink);border-color:var(--ink);color:var(--surface-strong)}.chip-count{font-size:.75rem;font-weight:700;opacity:.7}.chip.active .chip-count{opacity:.85}.group-section{display:flex;flex-direction:column;gap:.65rem}.group-header{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding-bottom:.35rem;border-bottom:1px solid var(--line)}.group-header h2,.group-header h3{margin:0;font-family:var(--font-display);font-size:1.15rem;letter-spacing:-.02em}.linkish-inline{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;padding:0;margin-top:.25rem;cursor:pointer;text-align:left;font:inherit}.linkish-inline:hover .badge,.linkish-inline:hover .muted{color:var(--accent-deep)}.category-edit input{border:1px solid var(--line);border-radius:8px;padding:.3rem .5rem;background:#fff;color:var(--ink);font:inherit;font-size:.85rem}