/* The main renderer remains visible during both learning and marked growth. */
.marking-corner{position:absolute;right:12px;top:12px;z-index:6;width:244px;max-width:36%;max-height:calc(100% - 24px);overflow:auto;padding:10px;background:var(--panel,#f8fbfa);color:var(--text,#294d43);border:1px solid var(--line,#c7d7d1);border-radius:9px;box-shadow:0 5px 18px #0002;font:12px/1.4 system-ui}
.marking-corner[hidden]{display:none!important}
.marking-corner h3{font:600 13px system-ui;margin:0 0 7px}
.marking-corner>label{display:block;font-size:11px;margin:0 0 6px}
.marking-corner select{display:block;width:100%;min-width:0;padding:4px;font-size:11px;margin-top:3px}
.marking-corner canvas{display:block;width:100%!important;height:auto!important}
.marking-corner p{font-size:11px;line-height:1.45;margin:6px 0;overflow-wrap:anywhere}
.marking-corner .marking-meta{font-variant-numeric:tabular-nums}
.marking-inspection{border-top:1px solid var(--line,#c7d7d1);padding-top:6px}
.marking-inspection summary{cursor:pointer;font-size:11px}
.marking-corner .marking-pair-controls label{width:100%;font-size:11px;flex-wrap:wrap;gap:4px}
.marking-corner .marking-pair-controls button{padding:3px 8px}
.search-stage{position:relative;min-height:440px;height:clamp(440px,70vh,780px)}
.search-stage>.viewport{height:100%;min-height:0}
.search-phase{position:absolute;left:14px;bottom:12px;max-width:calc(100% - 28px);margin:0;padding:6px 9px;border-radius:5px;background:#f8fbfae8;color:#294d43;font:12px/1.5 system-ui;pointer-events:none}
.search-phase:empty{display:none}
.viewer{height:clamp(440px,56vh,620px)}
.viewer-overlay{max-width:calc(100% - 280px)}
.viewer-overlay p{line-height:1.6}
@media(max-width:700px){.marking-corner{width:185px;max-width:46%;padding:7px;top:auto;bottom:12px;max-height:270px}.viewer-overlay{max-width:calc(100% - 32px)}.viewer{height:500px}.search-phase{bottom:auto;top:8px;max-width:calc(100% - 28px)}}