/* Layout for the Embeddings sketch, keyed by the mode class shared/Modes.js puts on (mode-presentation | mode-desktop | mode-mobile). Only layout lives here; colours and fonts stay in src/. One exception: the textareas' font-size lives here too, because it is mode-conditional — an inline size could only lose to the mobile rule below via !important. */ body { display: flex; justify-content: center; margin: 0; } #ui-container { display: flex; flex-direction: column; width: 100%; max-width: 1536px; margin: 0 auto; } #guide-container { display: flex; flex-direction: row; gap: 10px; overflow: hidden; } #instructions-container, #goal-container { flex: 1 1 0; } #textA_input, #textB_input { width: 100%; height: 100px; resize: none; box-sizing: border-box; font-size: 24px; } #embeddings-container { display: flex; position: relative; flex-direction: column; width: 100%; } #embeddings-vis1, #embeddings-vis2 { position: relative; width: 100%; height: 80px; } #diff-vis { width: 100%; height: 40px; } #cossim-vis { width: 100%; height: 40px; position: relative; box-sizing: border-box; } #embeddings-vis1 svg, #embeddings-vis2 svg, #diff-vis svg { width: 100%; height: 100%; display: block; } #embeddings-labels1, #embeddings-labels2 { position: absolute; top: 0; right: 0; width: 100%; height: 100%; text-align: right; padding-right: 20px; pointer-events: none; } #embed_failure_a, #embed_failure_b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; padding: 5px; box-sizing: border-box; } #cos-sim-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; } #cossim-vis-graphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; } #compare_toggle { align-self: flex-end; } body.mode-presentation #guide-container { display: none; } body.mode-presentation h1 { font-size: 20px; margin: 0; } body.mode-mobile #guide-container { flex-direction: column; } body.mode-mobile #textA_input, body.mode-mobile #textB_input { font-size: 18px; }