:root {
  --bg: #141210;
  --panel: #1e1b18;
  --panel-2: #262220;
  --line: #3a342e;
  --text: #ece4d2;
  --muted: #a89d88;
  --accent: #e8d8a8;
  --accent-2: #c9a96a;
  --radius: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 20% -10%, #2a2419 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #221d18 0%, transparent 60%),
    var(--bg);
}

.top { padding: 28px 24px 8px; max-width: 1400px; margin: 0 auto; }
.top h1 { margin: 0; font-size: 34px; letter-spacing: 0.04em; display: flex; align-items: center; gap: 12px; }
.mark { display: inline-block; width: 26px; height: 32px; background: no-repeat center / contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M6 2v28M6 13l14-9M6 23l14-9' stroke='%23e8d8a8' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
.tag { margin: 6px 0 0; color: var(--muted); }

.app {
  max-width: 1400px; margin: 16px auto; padding: 0 24px 24px;
  display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 20px; align-items: start;
}
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .row { flex-direction: column; gap: 0; } .top h1 { font-size: 28px; } }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; flex: 1; min-width: 0; }
.app > * { min-width: 0; }
.field select, .field input { width: 100%; max-width: 100%; }
.field > span { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.field.inline { flex-direction: row; align-items: center; margin: 0; gap: 8px; flex: 0 0 auto; }
.row { display: flex; gap: 12px; }

textarea, select, input[type="color"], button {
  font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
textarea { padding: 10px 12px; resize: vertical; width: 100%; }
textarea:focus, select:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
select { padding: 8px 10px; }
input[type="color"] { width: 100%; height: 38px; padding: 3px; cursor: pointer; }
input[type="range"] { width: 100%; accent-color: var(--accent-2); }
output { color: var(--text); text-transform: none; letter-spacing: 0; }

.check { display: flex; gap: 10px; align-items: flex-start; margin: -4px 0 14px; color: var(--muted); font-size: 14px; }
.check input { accent-color: var(--accent-2); margin-top: 3px; }

.desc { margin: -6px 0 14px; color: var(--muted); font-size: 14px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
button { padding: 9px 14px; cursor: pointer; }
button:hover { border-color: var(--accent-2); }
button.primary { background: var(--accent); color: #1a1610; border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: #f3e6bd; }
.status { min-height: 1.2em; margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }

.output { display: flex; flex-direction: column; gap: 14px; }
.preview-wrap {
  overflow: auto; border-radius: 8px; border: 1px solid var(--line); padding: 8px;
  background-color: #1a1714;
  background-image:
    linear-gradient(45deg, #221e1a 25%, transparent 25%, transparent 75%, #221e1a 75%),
    linear-gradient(45deg, #221e1a 25%, transparent 25%, transparent 75%, #221e1a 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
  min-height: 120px;
}
#preview { display: block; max-width: none; }

.readout { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--panel-2); }
.readout summary { cursor: pointer; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.readout textarea { margin-top: 8px; font-family: "Segoe UI Historic", "Noto Sans Runic", "Junicode", system-ui, sans-serif; font-size: 20px; }
.hint { color: var(--muted); font-size: 13px; margin: 6px 0 2px; }

.reading { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 0 4px; }
.reading .w { display: inline-flex; flex-direction: column; gap: 2px; }
.reading .w b { font-weight: 500; }
.reading .w i { font-style: normal; color: var(--accent-2); font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; letter-spacing: 0.04em; }

.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 10px 0 4px; }
.legend .k { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 8px; background: var(--panel); }
.legend .k canvas { display: block; }
.legend .k .n { font-size: 12px; color: var(--muted); }
.legend .k .v { font-size: 13px; }

.foot { max-width: 1400px; margin: 0 auto; padding: 0 24px 28px; color: var(--muted); font-size: 13.5px; }