*{box-sizing:border-box}
:root{
	--bg:#ffffff;--fg:#111827;--muted:#6b7280;--card:#ffffff;--border:#e5e7eb;--primary:#2563eb;--primary-600:#1d4ed8;--accent:#0ea5e9;--note:#f59e0b;--badge:#f3f4f6;--shadow:0 8px 24px rgba(0,0,0,.06);--success:#10b981
}
[data-theme="dark"]{
	--bg:#0b1020;--fg:#e5e7eb;--muted:#9ca3af;--card:#0f172a;--border:#1f2937;--primary:#3b82f6;--primary-600:#2563eb;--accent:#22d3ee;--note:#fbbf24;--badge:#111827;--shadow:0 8px 24px rgba(0,0,0,.35);--success:#34d399
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:background-color 0.3s, color 0.3s}
header{padding:1rem 1.25rem;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--card),rgba(0,0,0,0))}
.header-content{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem}
header h1{margin:.2rem 0 .4rem;font-size:1.25rem}
header p{margin:0;color:var(--muted);font-size:.9rem;max-width:calc(100% - 120px)}
header .toolbar{margin-top:.5rem}
header .toolbar button{border:1px solid var(--border);padding:.4rem .7rem;border-radius:.6rem;background:var(--card);color:var(--fg);cursor:pointer;transition:all 0.2s}
header .toolbar button:hover{background:rgba(0,0,0,.04)}
main{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;padding:1rem 1.25rem;align-items:start}
@media(max-width:900px){
  main{grid-template-columns:1fr}
  .header-content{flex-direction:column}
  header p{max-width:100%}
}
label{display:block;margin:.25rem 0 .35rem;color:var(--fg);font-size:.9rem}
.controls .row{margin-bottom:.75rem}
.row-inline{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-right:auto}
.controls input,.controls select{width:100%;padding:.6rem;border:1px solid var(--border);border-radius:.6rem;font-size:.95rem;background:var(--card);color:var(--fg);transition:border-color 0.2s}
.controls input:focus,.controls select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37, 99, 235, 0.1)}
.output textarea{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:.6rem;background:var(--card);color:var(--fg);box-shadow:var(--shadow);font-family:ui-monospace,SFMono-Regular,Consolas,Monaco,monospace;font-size:.9rem;resize:vertical;min-height:150px}
.card{background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:1rem;box-shadow:var(--shadow);transition:box-shadow 0.3s}
.card:hover{box-shadow:var(--shadow);}
.examples{margin-top:.5rem}
.examples summary{cursor:pointer;color:var(--primary);font-weight:500}
.examples summary:focus{outline:none}
.examples .examples-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.examples button{padding:.45rem .7rem;border:1px solid var(--border);border-radius:.6rem;background:var(--card);color:var(--fg);cursor:pointer;transition:all 0.2s;font-size:.85rem}
.examples button:hover{background:rgba(0,0,0,.04);transform:translateY(-2px)}
.hint{color:var(--muted);font-size:.85rem}
.row-inline button{height:2.25rem}
.button-group{display:flex;gap:.5rem}
.meta{display:flex;gap:.5rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem;margin-top:.25rem}
.badge{background:var(--badge);border:1px solid var(--border);border-radius:999px;padding:.2rem .6rem}
.badge.accent{border-color:var(--accent);color:var(--accent);background:transparent}
.note{margin-top:.35rem;color:var(--note);font-size:.85rem}
.note.hidden{display:none}
footer{border-top:1px solid var(--border);margin-top:1rem;padding:1rem 1.25rem;color:var(--muted);font-size:.85rem}
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(10px);bottom:20px;background:var(--fg);color:var(--bg);padding:.75rem 1.25rem;border-radius:.6rem;opacity:0;transition:all .25s ease;box-shadow:var(--shadow);z-index:9999;font-size:.9rem}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.output-header label{margin:0}
.small-button{padding:.3rem .6rem;font-size:.85rem;border:1px solid var(--border);border-radius:.4rem;background:var(--card);color:var(--fg);cursor:pointer}
.small-button:hover{background:rgba(0,0,0,.04)}
@media (max-width: 600px) {
  .button-group{width:100%;justify-content:space-between}
  .button-group button{flex:1}
  .checkbox-label{margin-right:0}
  .row-inline{flex-direction:column;align-items:flex-start}
}