:root { color-scheme: light; }
html, body { margin: 0; height: 100%; background: #ffffff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#python-view { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: auto; }
#graphics-empty { margin: auto; color: #8a8fa3; font-size: 14px; padding: 16px; text-align: center; }
#turtle-wrap { position: relative; flex: 1 1 auto; min-height: 240px; outline: none; touch-action: none; }
#turtle-wrap:focus-visible { box-shadow: inset 0 0 0 3px #3d7bfd55; }
#turtle-wrap canvas { position: absolute; inset: 0; }
#turtle-wrap .hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: #1d2140cc; color: #fff; font-size: 13px; padding: 6px 12px; border-radius: 999px; pointer-events: none; }
#images { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px; }
#images:empty { display: none; }
#images img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 1px 4px #0002; background: #fff; }
#preview { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
[hidden] { display: none !important; }