.computing-intro { padding-bottom:36px; }
.computing-panel { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:32px 34px 24px; margin-bottom:32px; scroll-margin-top:20px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.panel-heading h2 { font-family:Georgia,serif; font-size:32px; font-weight:400; }
.experiment-tag { font-size:11px; color:var(--green); background:#e8eee5; border-radius:20px; padding:8px 12px; white-space:nowrap; }
.panel-lead { font-size:14px; line-height:1.75; color:var(--muted); max-width:880px; margin:15px 0 26px; }
.experiment-guide { font-size:13px; line-height:1.75; color:var(--ink); background:#f0f2eb; border-radius:4px; padding:14px 17px; margin:-10px 0 26px; }
.bit-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:36px; }
.bit-main { min-width:0; }
.bit-readout { display:flex; align-items:center; gap:22px; margin:5px 0 23px; }
.bit-value { background:#e9eee5; color:var(--green); font-family:Georgia,serif; font-size:70px; width:98px; height:98px; display:flex; align-items:center; justify-content:center; border-radius:10px; flex:0 0 98px; }
.bit-value[data-bit="0"] { color:var(--blue); background:#e7eef5; }
.bit-value[data-bit="unknown"] { color:var(--muted); background:#f0efe9; }
#bit-read-label { margin:0 0 9px; font-size:19px; font-weight:550; }
.readout-detail { margin:5px 0; font-size:12px; color:var(--muted); line-height:1.5; font-variant-numeric:tabular-nums; }
.readout-detail span { margin:0 5px; }
.bit-actions { display:flex; gap:7px; flex-wrap:wrap; padding-bottom:23px; }
.bit-actions button { font-size:12px; padding:10px 13px; }
.bit-actions button span { font-size:10px; opacity:.65; margin-left:6px; }
.chart-heading { border-top:1px solid var(--line); padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chart-heading h3 { font-size:13px; font-weight:600; margin:0; }
.chart-heading>span { font-size:10px; color:var(--muted); text-align:right; }
.computing-chart { display:block; width:100%; height:auto; margin-top:10px; overflow:visible; }
.chart-explanation { font-size:11px; color:var(--muted); line-height:1.7; margin:8px 0 0; }
.computing-controls { border-left:1px solid var(--line); padding-left:26px; }
.rule-label { font-size:9px; letter-spacing:.16em; color:var(--muted); font-weight:650; margin:0 0 8px; }
.computing-equation { font-family:Georgia,serif; color:var(--green); font-size:21px; margin:0 0 10px; }
.control-copy { font-size:11px; line-height:1.7; color:var(--muted); }
.computing-controls label,.sequence-settings label { display:flex; justify-content:space-between; gap:10px; font-size:11px; font-weight:550; margin:18px 0 8px; }
.computing-controls select { font-size:12px; }
.computing-controls label output { font-variant-numeric:tabular-nums; }
.computing-controls .kick-control { border-top:1px solid var(--line); margin-top:18px; }
#bit-disturb { font-size:11px; margin-top:5px; width:100%; }
.action-status { color:var(--green); font-size:12px; line-height:1.65; min-height:20px; }
.method-details { border-top:1px solid var(--line); padding-top:17px; margin-top:18px; font-size:12px; color:var(--muted); line-height:1.75; }
.method-details summary { color:var(--green); cursor:pointer; }
.method-details p { max-width:1000px; }
.sequence-settings { display:grid; grid-template-columns:1fr .8fr 1fr 1fr auto; align-items:end; gap:15px; border-top:1px solid var(--line); padding-top:2px; }
.sequence-settings select { font-size:12px; height:40px; }
.sequence-settings input[type=number] { width:100%; padding:10px; height:40px; font-size:12px; }
.sequence-settings button { height:40px; font-size:12px; }
.sequence-metrics { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:25px; border-top:1px solid var(--line); padding:23px 0 27px; margin-top:18px; }
.sequence-metrics span,.sequence-metrics small { display:block; font-size:11px; color:var(--muted); line-height:1.6; }
.sequence-metrics output { display:block; font-size:32px; letter-spacing:-.04em; font-variant-numeric:tabular-nums; margin:7px 0; }
.sequence-metrics small { font-size:10px; }
.sequence-plot-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.sequence-plot-grid>div { min-width:0; }
.computing-legend { display:flex; gap:9px 17px; flex-wrap:wrap; font-size:10px; color:var(--muted); padding-top:5px; }
.computing-legend span { display:flex; align-items:center; gap:6px; }
.computing-legend i { width:16px; border-top:2px solid; display:inline-block; }
.target-key { color:#919b94; border-top-style:dashed!important; }
.sine-key { color:var(--coral); }
.benchmark-note { padding:12px 16px; background:#f0f2eb; font-size:11px; line-height:1.75; color:var(--muted); border-radius:4px; }
.result-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.result-footer button { font-size:11px; flex-shrink:0; }
.result-footer p { max-width:760px; }
.computing-outro { padding:20px 0 40px; max-width:790px; }
.computing-outro>p:not(.eyebrow) { font-family:Georgia,serif; font-size:24px; line-height:1.5; }
.computing-outro>a { font-size:12px; color:var(--green); }
[hidden] { display:none!important; }
@media(max-width:1020px) { .computing-panel { padding:26px; } .bit-layout { gap:24px; grid-template-columns:minmax(0,1fr) 240px; } .computing-controls { padding-left:20px; } .sequence-settings { gap:10px; } .sequence-plot-grid { grid-template-columns:1fr; } .sequence-plot-grid .computing-chart { max-height:300px; } }
@media(max-width:760px) { .computing-panel { padding:23px 20px; } .panel-heading { align-items:flex-start; flex-direction:column; gap:14px; } .panel-heading h2 { font-size:28px; } .bit-layout { grid-template-columns:1fr; } .computing-controls { border-left:0; border-top:1px solid var(--line); padding:20px 0 0; } .computing-controls select,.computing-controls input,.computing-controls button { max-width:100%; } .sequence-settings { grid-template-columns:1fr 1fr; } .sequence-settings button { grid-column:1/-1; margin-top:4px; } .sequence-metrics { gap:12px; } .sequence-metrics output { font-size:25px; } .sequence-metrics span { font-size:10px; } .result-footer { align-items:flex-start; flex-direction:column; gap:5px; } .computing-intro { padding-bottom:28px; } .top-links { gap:16px; } .computing-outro>p:not(.eyebrow) { font-size:22px; } }
@media(max-width:420px) { .computing-panel { padding:21px 16px; } .top-links { gap:11px; } .top-links .text-link { font-size:10px; } .wordmark { font-size:14px; gap:5px; } .bit-readout { gap:14px; } .bit-value { font-size:55px; width:76px; height:84px; flex-basis:76px; } #bit-read-label { font-size:16px; } .readout-detail { font-size:10px; } .panel-lead { font-size:12px; } .chart-heading { align-items:flex-start; flex-direction:column; gap:5px; } .chart-heading>span { text-align:left; } .sequence-metrics { grid-template-columns:1fr 1fr; } .sequence-metrics>div:last-child { grid-column:1/-1; } .sequence-metrics output { font-size:25px; } }