:root{--accent:#b8860b;--accent-light:#d4a017;--accent-faint:#b8860b1a;--accent-dark:#8a6508;--interactive:#b8860b;--interactive-hover:#8a6508;--rotation:#2e6da4;--rotation-bg:#2e6da41a;--reflection:#9b4dca;--reflection-bg:#9b4dca1a;--r0:var(--ink-light);--r90:#2e6da4;--r180:#1a8a5a;--r270:#c07a2a;--rv:#9b4dca;--rh:#b84d8c;--rd1:#7a4dca;--rd2:#ca4d7a;--cup-a:#c04e4e;--cup-b:#2e6da4;--cup-c:#b8860b;--match-highlight:#b8860b33;--mismatch:#c04e4e;--cell-empty:var(--bg);--cell-discovered:var(--bg-subtle);--cell-prefilled:var(--bg);--cell-correct:#2a7a3f1f;--cell-wrong:#c04e4e1f;--cell-broken:#c04e4e14;--gate-bg:var(--bg-subtle);--gate-border:var(--rule);--gate-correct:var(--success);--gate-incorrect:#c07a2a}blockquote.formula{border-left-color:var(--accent)}.transform-label{letter-spacing:.01em;font-family:Source Code Pro,Menlo,monospace;font-size:.875rem;font-weight:600}.rotation-color{color:var(--rotation)}.reflection-color{color:var(--reflection)}.cup-a-color{color:var(--cup-a)}.cup-b-color{color:var(--cup-b)}.cup-c-color{color:var(--cup-c)}.cayley-table-wrap{width:fit-content;margin:0 auto}.cayley-table{background:var(--rule);border:1px solid var(--rule);border-radius:4px;gap:1px;width:fit-content;margin:0 auto;display:grid;overflow:hidden}.cayley-table-wrap.size-3 .cayley-table{grid-template-columns:56px repeat(3,64px)}.cayley-table-wrap.size-4 .cayley-table{grid-template-columns:56px repeat(4,64px)}.cayley-table-wrap.size-6 .cayley-table{grid-template-columns:56px repeat(6,56px)}.cayley-table-wrap.size-8 .cayley-table{grid-template-columns:48px repeat(8,48px)}.cayley-corner{background:var(--bg-subtle);color:var(--dimmed);justify-content:center;align-items:center;min-height:56px;font-size:.875rem;display:flex}.cayley-header{background:var(--bg-subtle);padding:var(--space-xs);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;min-height:56px;transition:background-color .15s ease-out;display:flex}.cayley-header:hover{background:var(--accent-faint)}.cayley-header.selected{background:var(--accent-faint);box-shadow:inset 0 0 0 2px var(--accent)}.cayley-header:focus-visible{outline:2px solid var(--interactive);outline-offset:-2px}.cayley-header-label{margin-top:2px;font-family:Source Code Pro,Menlo,monospace;font-size:.6875rem;font-weight:600}.cayley-cell{background:var(--cell-empty);padding:var(--space-xs);cursor:default;flex-direction:column;justify-content:center;align-items:center;min-height:56px;transition:background-color .2s ease-out;display:flex;position:relative}.cayley-cell.empty{cursor:pointer}.cayley-cell.empty:hover{background:var(--bg-subtle)}.cayley-cell.selectable{background:var(--accent-faint);box-shadow:inset 0 0 0 2px var(--accent);animation:2s ease-in-out infinite cellPulse}@keyframes cellPulse{0%,to{box-shadow:inset 0 0 0 2px var(--accent)}50%{box-shadow:inset 0 0 4px 2px var(--accent-light)}}.cayley-cell.discovered{background:var(--cell-discovered)}.cayley-cell.prefilled{background:var(--cell-prefilled);opacity:.7}.cayley-cell.correct-flash{background:var(--cell-correct)}.cayley-cell.wrong-flash{background:var(--cell-wrong);animation:.3s ease-out cellShake}@keyframes cellShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.cayley-cell.broken{background:var(--cell-broken)}.cayley-cell.broken:after{content:"";background:linear-gradient(to bottom right, transparent calc(50% - 1px), var(--mismatch) calc(50% - 1px), var(--mismatch) calc(50% + 1px), transparent calc(50% + 1px));pointer-events:none;position:absolute;inset:0}.cayley-cell.non-commutative{border-left:3px solid var(--mismatch)}.cayley-cell-icon{width:28px;height:28px}.cayley-cell-label{color:var(--ink-light);margin-top:2px;font-family:Source Code Pro,Menlo,monospace;font-size:.6875rem}.cayley-cell-label.broken-label{color:var(--mismatch);font-weight:600;text-decoration:line-through}.cayley-cell .not-in-set{text-transform:uppercase;letter-spacing:.05em;color:var(--mismatch);font-family:"Source Sans 3",system-ui,sans-serif;font-size:.5625rem;font-weight:600}.cayley-cell.empty .cayley-placeholder{color:var(--dimmed);font-size:.75rem}.interactive-controls{gap:var(--space-sm);margin-top:var(--space-md);justify-content:center;align-items:center;display:flex}.animation-status{text-align:center;min-height:1.5rem;color:var(--ink-light);margin-top:var(--space-sm);font-family:"Source Sans 3",system-ui,sans-serif;font-size:.875rem}.rotation-table-layout{gap:var(--space-lg);flex-wrap:wrap;justify-content:center;align-items:flex-start;display:flex}.square-panel{text-align:center;flex:none;min-width:240px}.square-panel svg{width:240px;height:240px;margin:0 auto;display:block}.table-panel{flex:auto;justify-content:center;min-width:280px;display:flex}.answer-buttons{gap:var(--space-xs);margin-top:var(--space-sm);flex-wrap:wrap;justify-content:center;display:flex}.answer-btn{border:1px solid var(--rule);background:var(--bg);color:var(--ink);cursor:pointer;border-radius:4px;min-width:44px;min-height:44px;padding:.5rem 1rem;font-family:Source Code Pro,Menlo,monospace;font-size:.8125rem;font-weight:600;transition:background-color .15s ease-out,border-color .15s ease-out}.answer-btn:hover{border-color:var(--accent);background:var(--accent-faint)}.answer-btn:focus-visible{outline:2px solid var(--interactive);outline-offset:2px}.d4-layout{gap:var(--space-lg);flex-wrap:wrap;justify-content:center;align-items:flex-start;display:flex}.d4-move-selector{gap:var(--space-xs);margin-top:var(--space-sm);flex-wrap:wrap;justify-content:center;display:flex}.d4-move-btn{border:1px solid var(--rule);background:var(--bg);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:36px;min-width:44px;height:36px;min-height:44px;transition:background-color .15s ease-out,border-color .15s ease-out;display:flex}.d4-move-btn:hover{border-color:var(--accent);background:var(--accent-faint)}.d4-move-btn.rotation{border-style:solid}.d4-move-btn.reflection{border-style:dashed}.clock-layout{gap:var(--space-lg);flex-wrap:wrap;justify-content:center;align-items:flex-start;display:flex}.clock-panel{text-align:center;flex:none;min-width:200px}.clock-panel svg{width:200px;height:200px;margin:0 auto;display:block}.table-comparison{gap:var(--space-lg);margin-top:var(--space-lg);padding:var(--space-lg);border:1px solid var(--rule);background:var(--bg-subtle);border-radius:4px;flex-wrap:wrap;justify-content:center;align-items:flex-start;display:flex}.table-comparison.hidden{display:none}.comparison-prompt{text-align:center;width:100%;color:var(--ink-light);margin-bottom:var(--space-md);font-size:.9375rem;font-style:italic}.comparison-layout{gap:var(--space-lg);flex-wrap:wrap;justify-content:center;align-items:flex-start;width:100%;display:flex}.comparison-table{text-align:center}.comparison-mapping{gap:var(--space-sm);padding:var(--space-md) 0;flex-direction:column;align-items:center;display:flex}.mapping-pill{border:1px solid var(--accent);background:var(--bg);color:var(--accent);cursor:grab;-webkit-user-select:none;user-select:none;border-radius:999px;align-items:center;min-height:44px;padding:.375rem .75rem;font-family:Source Code Pro,Menlo,monospace;font-size:.8125rem;font-weight:600;transition:opacity .2s ease-out,transform .2s ease-out;display:flex}.mapping-pill.placed{opacity:.4;cursor:default}.mapping-pill.dragging{opacity:.5;cursor:grabbing}.mapping-drop-target{border:2px dashed var(--accent);border-radius:999px;justify-content:center;align-items:center;min-width:60px;min-height:32px;padding:.25rem .5rem;transition:border-style .15s ease-out,background-color .15s ease-out;display:flex}.mapping-drop-target.hover{background:var(--accent-faint);border-style:solid}.mapping-drop-target.filled{border-style:solid;border-color:var(--accent);background:var(--accent-faint)}.comparison-result{text-align:center;width:100%;color:var(--ink-light);margin-top:var(--space-md);font-family:"Source Serif 4",Georgia,serif;font-size:1.125rem;font-style:italic;transition:opacity .4s ease-out}.comparison-result.hidden{display:none}.broken-group-layout{align-items:center;gap:var(--space-md);flex-direction:column;display:flex}.crack-overlay{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.cup-shuffle-layout{align-items:center;gap:var(--space-lg);flex-direction:column;display:flex}.cups-panel{text-align:center;width:100%}.cups-panel svg{width:100%;max-width:360px;height:auto;margin:0 auto;display:block}.cup-controls{gap:var(--space-sm);margin-top:var(--space-md);flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.cayley-rearrangement-layout{align-items:center;gap:var(--space-md);flex-direction:column;display:flex}.cayley-selector{justify-content:center}.cayley-rearrangement-layout svg{width:100%;max-width:400px;height:auto;display:block}.wallpaper-figure{margin-top:var(--space-xxl);margin-bottom:var(--space-xxl)}.wallpaper-gallery{gap:var(--space-sm);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.wallpaper-card{aspect-ratio:1;border:1px solid var(--rule);cursor:pointer;background:var(--bg);border-radius:4px;transition:transform .15s ease-out,box-shadow .15s ease-out;position:relative;overflow:hidden}.wallpaper-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.wallpaper-card:focus-visible{outline:2px solid var(--interactive);outline-offset:2px}.wallpaper-card canvas{width:100%;height:100%;display:block}.wallpaper-card-label{padding:var(--space-xs) var(--space-sm);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#fffff8d9;position:absolute;bottom:0;left:0;right:0}.wallpaper-card-notation{color:var(--ink);font-family:Source Code Pro,Menlo,monospace;font-size:.75rem;font-weight:600;display:block}.wallpaper-card-desc{color:var(--ink-light);font-family:"Source Sans 3",system-ui,sans-serif;font-size:.6875rem;font-style:italic;display:block}.wallpaper-expanded{z-index:50;background:var(--bg);padding:var(--space-lg);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.wallpaper-expanded.hidden{display:none}.wallpaper-close{top:var(--space-md);right:var(--space-md);border:1px solid var(--rule);cursor:pointer;min-width:44px;min-height:44px;color:var(--ink);z-index:51;background:0 0;border-radius:4px;justify-content:center;align-items:center;font-size:1.5rem;display:flex;position:absolute}.wallpaper-close:hover{background:var(--bg-subtle)}.wallpaper-expanded-content{text-align:center;width:100%;max-width:800px}.wallpaper-expanded-content canvas{border:1px solid var(--rule);border-radius:4px;width:100%;max-width:800px;height:auto}.wallpaper-info{margin-top:var(--space-md)}.wallpaper-notation{color:var(--ink);margin-right:var(--space-sm);font-family:Source Code Pro,Menlo,monospace;font-size:1.25rem;font-weight:600}.wallpaper-description{color:var(--ink-light);font-family:"Source Sans 3",system-ui,sans-serif;font-size:1rem;font-style:italic}@media (width<=768px){.rotation-table-layout,.d4-layout,.clock-layout{flex-direction:column;align-items:center}.table-panel{-webkit-overflow-scrolling:touch;width:100%;min-width:auto;overflow-x:auto}.cayley-table-wrap.size-6 .cayley-table{grid-template-columns:40px repeat(6,44px)}.cayley-table-wrap.size-6 .cayley-cell{min-height:44px}.cayley-table-wrap.size-6 .cayley-cell-icon{width:20px;height:20px}.cayley-table-wrap.size-6 .cayley-cell-label{font-size:.625rem}.cayley-table-wrap.size-8{-webkit-overflow-scrolling:touch;padding-bottom:var(--space-sm);overflow-x:auto}.cayley-table-wrap.size-8 .cayley-table{grid-template-columns:40px repeat(8,44px);min-width:392px}.cayley-table-wrap.size-8 .cayley-header-col,.cayley-table-wrap.size-8 .cayley-corner{z-index:2;position:sticky;left:0}.comparison-layout{flex-direction:column;align-items:center}.cup-controls{flex-direction:column;align-items:stretch}.wallpaper-gallery{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion:reduce){.cayley-cell,.cayley-header,.square-panel *,.cups-panel *,.clock-panel *,.wallpaper-card,.answer-btn,.mapping-pill{transition-duration:0s!important;animation-duration:0s!important}}