.ide-entry { max-width: 620px; margin: clamp(40px, 12vh, 130px) auto; padding: 32px 24px; text-align: center; color: #16342b; }
.ide-entry-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: #e9f5ef; color: #247553; font: 700 24px monospace; }
.ide-eyebrow { margin: 24px 0 12px; color: #4d7664; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.ide-entry h1 { margin: 0 0 16px; font-size: clamp(28px, 5vw, 40px); letter-spacing: -.04em; }
.ide-entry > p { line-height: 1.6; }
.ide-open { margin: 16px 0; padding: 13px 24px; border: 0; border-radius: 8px; background: #207650; color: white; font: inherit; font-weight: 600; cursor: pointer; }
.ide-open:hover { background: #185e40; }
.ide-open:focus-visible { outline: 3px solid #89bda5; outline-offset: 3px; }
.ide-entry .ide-entry-note { font-size: 12px; color: #677d72; }
.ide-page { margin: 0; width: 100%; max-width: 100%; min-height: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.ide-page > .site-header { position: relative; top: auto; flex: 0 0 auto; z-index: 10; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; height: auto; min-height: 32px; padding: 4px 8px; gap: 6px; }
.ide-page > .site-header > .brand-divider { display: none; }
.ide-page .primary-nav { flex-wrap: wrap; gap: 2px 6px; width: 100%; max-width: 100%; overflow: visible; }
.ide-page .primary-nav .site-header-title { box-sizing: border-box; flex: 0 1 auto; max-width: 100%; min-height: 22px; padding: 3px 2px; font-size: clamp(10px, .8vw, 12px); line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.ide-page .site-header .auth-trigger { box-sizing: border-box; min-width: 0; max-width: 100%; margin-left: 0; padding: 4px 6px; font-size: 10px; white-space: nowrap; }
.ide-stage { position: relative; display: flex; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.ide-frame { display: block; flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; background: #fff; opacity: 1; transition: opacity .15s ease; }
.ide-stage.is-loading .ide-frame { opacity: 0; pointer-events: none; }
.ide-loading { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; box-sizing: border-box; background: #fff; color: #16342b; text-align: center; }
.ide-loading strong { font-size: 15px; font-weight: 600; }
.ide-loading p { margin: 0; max-width: 340px; color: #677d72; font-size: 12px; line-height: 1.5; }
.ide-spinner { width: 34px; height: 34px; box-sizing: border-box; margin-bottom: 4px; border: 3px solid #e2eee7; border-top-color: #207650; border-radius: 50%; animation: ide-spin .8s linear infinite; }
@keyframes ide-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ide-spinner { animation: none; } .ide-frame { transition: none; } }
.ide-stage [hidden] { display: none !important; }