:root {
  color-scheme: light;
  --ink:#17231f; --muted:#5c6a65; --line:#cbd8d4; --paper:#f2f4f0;
  --surface:#fffdf8; --soft:#e8efeb; --green:#176f5f; --green-dark:#104c43;
  --blue:#0072b2; --orange:#d55e00; --danger:#a54136;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--paper); color:var(--ink);
}
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 8% 0%,#dfeae4 0,transparent 32rem),var(--paper); }
button,input { font:inherit; }
button { border:1px solid #9baea8; background:#fff; color:#15312c; padding:.58rem .82rem; border-radius:10px; font-weight:750; cursor:pointer; }
button:hover { border-color:var(--green); background:#f3faf7; }
button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid rgba(23,111,95,.24); outline-offset:2px; }
button:disabled { cursor:not-allowed; opacity:.45; }
a { color:var(--green-dark); }
.shell { width:min(1240px,calc(100vw - 28px)); margin:0 auto; padding:28px 0 46px; }
.page-header { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,620px); gap:42px; align-items:end; padding:6px 4px 26px; }
.eyebrow { margin:0 0 8px; color:var(--green); font-size:.72rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:500; letter-spacing:-.035em; }
h1 { font-size:clamp(2.8rem,6vw,5.7rem); line-height:.92; }
.lede { margin:0; color:#40504a; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.08rem,2vw,1.32rem); line-height:1.5; }

.setup-panel { display:grid; grid-template-columns:1.15fr 1fr .9fr; overflow:hidden; border:1px solid var(--line); border-radius:18px 18px 0 0; background:var(--surface); box-shadow:0 18px 48px rgba(31,55,49,.09); }
.setup-group { min-width:0; padding:18px; border-right:1px solid var(--line); }
.setup-group:last-child { border-right:0; }
.setup-heading { display:flex; gap:10px; align-items:center; margin-bottom:14px; }
.setup-heading > span { display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:50%; background:var(--soft); color:var(--green-dark); font-size:.76rem; font-weight:900; }
.setup-heading strong,.setup-heading small { display:block; }
.setup-heading strong { font-size:.88rem; }
.setup-heading small { margin-top:2px; color:var(--muted); font-size:.72rem; }
.segmented { display:flex; min-width:0; padding:3px; border:1px solid var(--line); border-radius:12px; background:#edf2ef; }
.segmented button { flex:1; min-width:0; border:0; border-radius:8px; background:transparent; padding:.55rem .62rem; color:var(--muted); box-shadow:none; }
.segmented button[aria-pressed="true"] { background:#fff; color:var(--ink); box-shadow:0 2px 7px rgba(32,53,47,.11); }
.edit-tile-button { width:100%; margin-top:8px; border-style:dashed; color:var(--green-dark); }
.run-line { display:flex; align-items:center; gap:9px; }
.compact-field { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.78rem; font-weight:750; }
.compact-field input { width:3.5rem; border:1px solid #9baea8; border-radius:8px; padding:.55rem .45rem; }
.primary-button { border-color:var(--green); background:var(--green); color:#fff; }
.primary-button:hover { border-color:var(--green-dark); background:var(--green-dark); }

.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); border-top:0; background:#f8faf7; }
.toolbar button { padding:.46rem .68rem; border-radius:999px; font-size:.78rem; }
.learning-toggle { display:flex; align-items:center; gap:.55rem; padding:.32rem .7rem .32rem .5rem; border:1px solid #9baea8; border-radius:12px; background:#fff; }
.learning-toggle input { width:1rem; height:1rem; accent-color:var(--green); }
.learning-toggle strong,.learning-toggle small { display:block; }
.learning-toggle strong { font-size:.78rem; }
.learning-toggle small { color:var(--muted); font-size:.65rem; }
.toolbar-divider { width:1px; height:28px; margin:0 3px; background:var(--line); }
.symmetry-label,.stripes-label { color:var(--muted); font-size:.68rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.symmetry-toggle,.stripe-toggle { background:#e6ebe8; color:#52645f; border-color:#c3ceca; }
.symmetry-toggle[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.stripe-toggle[aria-pressed="true"].stripe-blue { background:var(--blue); border-color:#005a8c; color:#fff; }
.stripe-toggle[aria-pressed="true"].stripe-orange { background:var(--orange); border-color:#a74700; color:#fff; }
#status { margin-left:auto; max-width:14rem; overflow:hidden; color:var(--muted); font-size:.78rem; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }

.learning-strip { display:grid; grid-template-columns:repeat(3,minmax(105px,auto)) minmax(220px,1fr); align-items:stretch; border:1px solid var(--line); border-top:0; background:var(--soft); }
.learning-strip > div { display:grid; align-content:center; min-height:58px; padding:8px 14px; border-right:1px solid var(--line); }
.learning-strip strong { font-size:1.16rem; font-variant-numeric:tabular-nums; }
.learning-strip span { color:var(--muted); font-size:.65rem; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.learning-strip > p { align-self:center; margin:0; padding:10px 16px; color:#40544e; font-size:.8rem; line-height:1.4; }
.learning-log { grid-column:1/-1; border-top:1px solid var(--line); padding:7px 14px 9px; color:#40544e; font-size:.76rem; }
.learning-log summary { cursor:pointer; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.learning-log ol { display:grid; gap:4px; margin:8px 0 0; padding-left:1.4rem; }
.learning-log li::marker { color:var(--green); font-variant-numeric:tabular-nums; }

.canvas-stack { min-width:0; }
.hidden { display:none; }
#board,#crossingBoard { display:block; width:100%; height:auto; max-height:780px; aspect-ratio:1200/780; border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px; background:#f7faf8; cursor:grab; }
#board:active,#crossingBoard:active { cursor:grabbing; }
canvas.trefoil-token { display:block; width:150px; height:150px; border:0; border-radius:14px; background:transparent; cursor:grab; }

.custom-tile-dialog { width:min(1120px,calc(100vw - 28px)); max-width:none; padding:0; border:0; border-radius:20px; background:var(--surface); box-shadow:0 30px 100px rgba(12,28,23,.3); }
.custom-tile-dialog::backdrop { background:rgba(14,26,22,.58); backdrop-filter:blur(4px); }
.builder-shell { overflow:hidden; border:1px solid var(--line); border-radius:20px; }
.builder-header { display:flex; justify-content:space-between; gap:24px; align-items:start; padding:22px 24px; border-bottom:1px solid var(--line); }
.builder-header h2 { font-size:clamp(1.8rem,4vw,2.8rem); }
.builder-header p:not(.eyebrow) { margin:7px 0 0; color:var(--muted); }
.icon-button { width:40px; height:40px; padding:0; border-radius:50%; font-size:1.5rem; line-height:1; }
.builder-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(270px,.65fr); min-height:570px; }
.builder-canvas-panel { min-width:0; border-right:1px solid var(--line); background:#edf2ef; }
#customTileCanvas { display:block; width:100%; height:auto; max-height:620px; aspect-ratio:900/620; background:#edf2ef; cursor:crosshair; touch-action:none; }
.builder-hint { display:flex; flex-wrap:wrap; gap:7px 14px; padding:10px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; }
.builder-hint span { color:var(--ink); font-weight:800; }
.builder-sidebar { display:flex; flex-direction:column; gap:16px; padding:20px; }
.name-field span { display:block; margin-bottom:6px; color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; }
.name-field input { width:100%; border:1px solid #9baea8; border-radius:10px; padding:.7rem .75rem; }
.builder-metrics { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid var(--line); border-radius:12px; }
.builder-metrics div { padding:12px; }
.builder-metrics div+div { border-left:1px solid var(--line); }
.builder-metrics strong,.builder-metrics span { display:block; }
.builder-metrics strong { font-family:Georgia,serif; font-size:1.55rem; font-weight:500; }
.builder-metrics span { color:var(--muted); font-size:.68rem; text-transform:uppercase; }
.validation-card { padding:13px; border:1px solid #d7c797; border-radius:12px; background:#fff8df; }
.validation-card[data-state="valid"] { border-color:#9fc7b8; background:#edf8f2; }
.validation-card[data-state="invalid"] { border-color:#d7a59f; background:#fff0ed; }
.validation-card strong { display:block; font-size:.84rem; }
.validation-card p { margin:5px 0 0; color:var(--muted); font-size:.76rem; line-height:1.45; }
.builder-section { padding-top:4px; border-top:1px solid var(--line); }
.builder-section > strong { display:block; margin:12px 0 8px; font-size:.78rem; }
.preset-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.preset-grid button { padding:.48rem .3rem; font-size:.74rem; }
.builder-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:auto; }
.builder-actions .primary-button { grid-column:1/-1; }

@media (max-width:900px) {
  .page-header { grid-template-columns:1fr; gap:18px; }
  .setup-panel { grid-template-columns:1fr; }
  .setup-group { border-right:0; border-bottom:1px solid var(--line); }
  .setup-group:last-child { border-bottom:0; }
  .builder-layout { grid-template-columns:1fr; }
  .builder-canvas-panel { border-right:0; border-bottom:1px solid var(--line); }
}
@media (max-width:680px) {
  .shell { width:min(100% - 16px,1240px); padding-top:16px; }
  h1 { font-size:3.2rem; }
  .learning-strip { grid-template-columns:repeat(3,1fr); }
  .learning-strip > div { padding:7px; }
  .learning-strip > p { grid-column:1/-1; border-top:1px solid var(--line); }
  .toolbar-divider { display:none; }
  #status { width:100%; margin-left:0; }
  .builder-header { padding:18px; }
  .builder-sidebar { padding:16px; }
}