/* The abloh IDE page, on /glad's ground and type (glad.css): a pinned hero, the planets' scroll story, then the close.
   Transform and opacity only, but for SVG strokes drawn by their dash. */
.ide #hero { height: 937vh; } /* 20.8vh of title, 7 beats of 104vh each, an 88vh hold, plus the screen (ide.js storyAt) */
.ide #intro h1 { max-width: 14ch; }
.ide #lines { width: min(48vw, 640px); }
.ide #lines p { font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
#threads text { pointer-events: none; }
.ide code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; }

/* The close: abloh IDE is coming soon. */
.close-ide .soon, .install-soon { padding: 11px 20px; border: 1px dashed rgb(244 241 232 / 0.35); color: rgb(244 241 232 / 0.6); font-size: 1rem; font-weight: 500; line-height: normal; cursor: default; } /* the same scale as the button beside it, plainly not one */
.close-ide nav a { background: none !important; color: var(--cream) !important; }
.close-ide { padding-bottom: 120px; }
.close-ide .close { margin-top: 0; padding-top: 120px; } /* straight after the story, a screen's breath above it */
.close-ide .close::after { display: none; }

@media (prefers-reduced-motion: reduce) { .ide * { animation: none !important; transition: none !important; } }
@media (max-width: 760px) { .ide #lines { width: auto; left: 20px; right: 20px; } .ide #intro { left: 20px; } .ide #lines p { font-size: 1.35rem; bottom: auto; } } /* each line its own height, so the scene can sit under the words (ide.js) */
.nowrap { white-space: nowrap; }