:root{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#172a30;background:#eef2f1;font-synthesis:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh}
::selection{background:#b4d9cf;color:#122825}
button,input{font:inherit}
.shell{width:min(1320px,100%);margin:auto;padding:clamp(20px,4vw,48px)}
.topline{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:28px}
h1{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.025em;line-height:1.2;margin:0 0 8px}
.topline p{max-width:68ch;line-height:1.65;margin:0;color:#40565b}
.scope{font-size:.78rem;font-weight:700;color:#315c55;border:1px solid #b8cec8;border-radius:999px;padding:7px 12px;white-space:nowrap}
.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.7fr);gap:clamp(20px,3vw,36px);align-items:start}
.screen{aspect-ratio:8/5;background:#101b20;border-radius:12px;overflow:hidden;display:grid;place-items:center;box-shadow:0 18px 36px rgba(16,37,41,.16);color:#d8e7e4}
.screen canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.screen canvas[hidden]{display:none}
.screen-message{text-align:center;max-width:36ch;padding:24px;display:grid;gap:10px;line-height:1.6}
.screen-message strong{font-size:1.15rem}
.screen-message span{color:#adbfbd}
.screen-note{color:#50666b;font-size:.85rem;line-height:1.6;margin:12px 0 0}
.controls{display:grid;gap:20px}
.dropzone{background:#fff;border:1px dashed #789e96;border-radius:14px;padding:24px;transition:background .18s ease,border-color .18s ease}
.dropzone.is-over{background:#dceee8;border-color:#276b58}
.dropzone label{display:block;font-weight:700;margin-bottom:14px}
.dropzone input{display:block;max-width:100%;color:#2e484e}
.dropzone input::file-selector-button{background:#185d4f;color:white;border:0;border-radius:8px;padding:10px 14px;margin-right:12px;font-weight:700;cursor:pointer}
.dropzone input::file-selector-button:hover{background:#124a3f}
.dropzone p,.input-note p{font-size:.86rem;line-height:1.65;color:#50666b;margin:15px 0 0}
.dropzone .diagnostic-option{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;font-size:.9rem;line-height:1.5;cursor:pointer}
.dropzone .diagnostic-option input{display:inline-block;flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:#185d4f}
.dropzone .diagnostic-caption{margin:5px 0 0 28px;font-size:.8rem}
.run-controls{display:flex;flex-wrap:wrap;gap:8px}
button{border:1px solid #7d9a94;border-radius:8px;background:#fff;color:#254740;padding:9px 14px;font-weight:700;cursor:pointer}
button:hover:not(:disabled){background:#e0eee9;border-color:#2c6f5b}
button:disabled{opacity:.46;cursor:not-allowed}
:focus-visible{outline:3px solid #d76c30;outline-offset:3px}
.status-block{border-top:1px solid #cad7d3;padding-top:18px;min-height:130px}
.status-heading{display:flex;gap:9px;align-items:center}
.status-dot{height:8px;width:8px;border-radius:50%;background:#8ba5a0;flex:none}
.status-dot.is-running{background:#157d5d}
.status-dot.is-stopped{background:#b65d32}
.status-block p{color:#40565b;line-height:1.6;font-size:.9rem;margin:10px 0 0;overflow-wrap:anywhere}
.status-block .steps{font-variant-numeric:tabular-nums;font-weight:700;color:#254740}
.input-note{border-top:1px solid #cad7d3;padding-top:18px}
.input-note strong{font-size:.92rem}
@media(max-width:860px){.workspace{grid-template-columns:1fr}.topline{align-items:start}.scope{white-space:normal;text-align:right}}
@media(max-width:500px){.topline{display:block}.scope{display:inline-block;margin-top:16px}.shell{padding:18px}.dropzone{padding:18px}.run-controls button{flex:1}}