:root{--bg: #1f1f28;--bg-dark: #16161d;--bg-highlight: #2a2a37;--muted: #54546d;--fg-dim: #727169;--fg: #dcd7ba;--fg-light: #c8c093;--red: #e46876;--orange: #ffa066;--yellow: #e6c384;--green: #98bb6c;--blue: #7fb4ca;--link: #7e9cd8;--purple: #957fb8;--pink: #d27e99;--diagram-ring: #3f3f52;--diagram-label: #727169;--diagram-open: #ffa066}*{box-sizing:border-box}body{margin:0;padding:1.5rem 1.25rem 3rem;background:var(--bg);color:var(--fg);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.55}header{max-width:1180px;margin:0 auto 1.5rem;border-bottom:1px solid var(--muted);padding-bottom:1rem}.header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}h1{margin:0;font-size:1.5rem;letter-spacing:.14em;color:var(--fg-light)}#start-tour{color:var(--yellow);border-color:var(--yellow);padding:.35rem .7rem}#start-tour:hover{background:var(--yellow);color:var(--bg-dark)}body.touring #start-tour{visibility:hidden}.tagline{margin:.4rem 0 0;max-width:62ch;color:var(--fg-dim)}h2{margin:0 0 .6rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);font-weight:600}main{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:1.5rem;align-items:start}#tour,#controls{grid-column:1;grid-row:1}body.touring #controls{grid-row:2}body.touring main{grid-template-columns:minmax(0,25rem) minmax(0,1fr)}.stage{grid-column:2;grid-row:1 / span 2}.panel{background:var(--bg-dark);border:1px solid var(--muted);border-radius:6px;padding:1rem}.panel h2:not(:first-child){margin-top:1.5rem}.presets{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:1.1rem}button{font:inherit;font-size:.78rem;color:var(--fg);background:var(--bg-highlight);border:1px solid var(--muted);border-radius:4px;padding:.25rem .5rem;cursor:pointer}button:hover{border-color:var(--fg-dim);color:var(--fg-light)}.preset{color:var(--fg-dim)}.preset:hover{color:var(--yellow)}.gene{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.28rem 0;border-bottom:1px solid #24242e}.gene:last-child{border-bottom:0}.gene-name{display:flex;flex-direction:column;min-width:0;cursor:help}.sym{color:var(--fg-light);letter-spacing:.04em}.cls{font-size:.66rem;color:var(--fg-dim);letter-spacing:.05em}.cls-A{color:var(--blue)}.cls-B{color:var(--green)}.cls-C{color:var(--pink)}.cls-E{color:var(--purple)}.allele{display:flex;flex:none}.allele button{border-radius:0;padding:.18rem .42rem;font-size:.7rem;color:var(--fg-dim);border-right-width:0}.allele button:first-child{border-radius:4px 0 0 4px}.allele button:last-child{border-radius:0 4px 4px 0;border-right-width:1px}.allele button.active{background:var(--muted);color:var(--fg-light)}.field{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}.field label{color:var(--fg-dim);font-size:.78rem}select{font:inherit;font-size:.76rem;background:var(--bg-highlight);color:var(--fg);border:1px solid var(--muted);border-radius:4px;padding:.22rem .3rem;max-width:12rem}select:disabled{opacity:.4}.hint,.note{margin:0 0 .7rem;font-size:.74rem;color:var(--fg-dim)}.note{margin-top:.5rem;color:var(--fg-dim);border-left:2px solid var(--muted);padding-left:.6rem}.stage{min-width:0}.stage-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}.views{display:flex}.views button{border-radius:0;border-right-width:0;color:var(--fg-dim)}.views button:first-child{border-radius:4px 0 0 4px}.views button:last-child{border-radius:0 4px 4px 0;border-right-width:1px}.views button.active{background:var(--muted);color:var(--fg-light)}.genotype-label{margin:0;color:var(--yellow);letter-spacing:.06em}.canvas{background:var(--bg-dark);border:1px solid var(--muted);border-radius:6px;padding:1rem;display:flex;justify-content:center}.canvas svg{width:100%;max-width:30rem;height:auto;display:block}.verdict{margin:.8rem 0 1rem;padding-left:.7rem;border-left:2px solid var(--green);color:var(--fg-dim)}.verdict.indeterminate{border-left-color:var(--orange)}.whorls{width:100%;border-collapse:collapse;font-size:.78rem}.whorls th{text-align:left;font-weight:600;color:var(--fg-dim);border-bottom:1px solid var(--muted);padding:.3rem .5rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.whorls td{padding:.28rem .5rem;border-bottom:1px solid #24242e;color:var(--fg)}.whorls tr.repeat td{color:var(--fg-dim)}.whorls tr.repeat td:first-child:before{content:"↻ ";color:var(--orange)}.organ-cell{color:var(--fg-light)}td.chip{text-align:center;width:2ch}td.chip.on{color:var(--green)}td.chip.off{color:var(--muted)}.notes{max-width:1180px;margin:2.5rem auto 0;border-top:1px solid var(--muted);padding-top:1.25rem}.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:1.5rem}.notes h3{margin:0 0 .4rem;font-size:.8rem;color:var(--fg-light);letter-spacing:.06em}.notes p{margin:0 0 .7rem;color:var(--fg-dim);max-width:66ch}.notes em{color:var(--fg);font-style:italic}.cite{margin-top:1rem;font-size:.72rem;color:var(--muted);max-width:90ch}.organ,.glyph{transition:opacity .12s ease}.flower-svg:hover .organ:not(:hover){opacity:.75}.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.7rem;font-size:.75rem;color:var(--fg-dim)}.legend-item{display:inline-flex;align-items:center;gap:.35rem}.legend-item i{width:.7rem;height:.7rem;border-radius:2px;border:1px solid;display:inline-block}#tour{border-color:var(--yellow)}.tour-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.tour-progress{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}.tour-exit{font-size:.7rem;padding:.12rem .4rem;color:var(--fg-dim)}.tour-bar{height:2px;background:var(--bg-highlight);margin:.55rem 0 .9rem}.tour-bar i{display:block;height:100%;background:var(--yellow);transition:width .2s ease}.tour-title{margin:0 0 .6rem;font-size:.95rem;line-height:1.35;color:var(--fg-light);letter-spacing:.01em;text-transform:none}.tour-body p{margin:0 0 .7rem;color:var(--fg);font-size:.82rem;line-height:1.62}.tour-body strong{color:var(--yellow);font-weight:600}.tour-body em,.tour-answer em{color:var(--fg-light);font-style:italic}.tour-question{border-top:1px solid var(--muted);padding-top:.8rem;margin-top:.3rem}.tour-prompt{margin:0 0 .6rem;font-size:.82rem;color:var(--blue)}.tour-options{display:flex;flex-direction:column;gap:.35rem}.tour-option{text-align:left;font-size:.78rem;line-height:1.45;padding:.4rem .55rem;color:var(--fg);border-radius:4px}button.tour-option:hover{border-color:var(--blue);color:var(--fg-light)}div.tour-option{display:flex;gap:.5rem;border:1px solid var(--muted);background:transparent;color:var(--fg-dim)}div.tour-option .mark{flex:none;width:1ch}div.tour-option.correct{border-color:var(--green);color:var(--fg)}div.tour-option.correct .mark{color:var(--green)}div.tour-option.wrong{border-color:var(--red)}div.tour-option.wrong .mark{color:var(--red)}.tour-answer{margin:.7rem 0 0;font-size:.8rem;line-height:1.6;color:var(--fg);border-left:2px solid var(--green);padding-left:.6rem}.tour-nav{display:flex;justify-content:space-between;gap:.5rem;margin-top:1rem}.tour-next{color:var(--yellow);border-color:var(--yellow)}.tour-next:hover{background:var(--yellow);color:var(--bg-dark)}.tour-back:disabled{opacity:.35;cursor:default}body[data-focus] .canvas,body[data-focus] .whorls,body[data-focus] #transgene-block,body[data-focus] .genes{transition:opacity .18s ease,box-shadow .18s ease}body[data-focus=canvas] .whorls,body[data-focus=canvas] #transgene-block,body[data-focus=canvas] .genes,body[data-focus=table] #transgene-block,body[data-focus=table] .genes,body[data-focus=abc] #transgene-block,body[data-focus=abc] .genes,body[data-focus=wus] #transgene-block,body[data-focus=wus] .genes,body[data-focus=transgene] .whorls,body[data-focus=transgene] .genes,body[data-focus=genes] .whorls,body[data-focus=genes] #transgene-block{opacity:.4}body[data-focus=canvas] .canvas,body[data-focus=transgene] #transgene-block,body[data-focus=genes] .genes{box-shadow:0 0 0 1px var(--yellow);border-radius:6px}body[data-focus=abc] .whorls th:nth-child(-n+3),body[data-focus=abc] .whorls td:nth-child(-n+3),body[data-focus=abc] .whorls th:nth-child(n+7),body[data-focus=abc] .whorls td:nth-child(n+7),body[data-focus=wus] .whorls th:not(:nth-child(8)):not(:nth-child(2)),body[data-focus=wus] .whorls td:not(:nth-child(8)):not(:nth-child(2)){opacity:.35}body[data-focus=abc] .whorls th:nth-child(n+4):nth-child(-n+6),body[data-focus=wus] .whorls th:nth-child(8){color:var(--yellow)}@media(max-width:860px){main{grid-template-columns:minmax(0,1fr)}#tour,#controls,.stage,body.touring #controls{grid-column:1;grid-row:auto}body.touring #tour{order:1}body.touring .stage{order:2}body.touring #controls{order:3}}
