:root { --accent: #ffd078; --blue: #7fe7c9; }
.hero h1 { max-width: 1160px; }
.device-surround { padding: clamp(10px, 1.5vw, 20px); padding-bottom: 0; border: 1px solid #343539; border-radius: 26px; background: linear-gradient(150deg, #26272a, #101113 40%, #17181b); box-shadow: 0 20px 80px #000, 0 0 80px #ffd07808; }
.device-scroll { overflow-x: auto; border: 1px solid #06070a; border-radius: 10px; scrollbar-color: #666 #111; }
.device-screen { position: relative; min-width: 920px; overflow: hidden; background: #0d1024; }
.device-screen > img { display: block; width: 100%; height: auto; }
.device-chin { height: 29px; display: flex; justify-content: center; align-items: center; position: relative; }
.device-chin span { font: 7px "IBM Plex Mono", monospace; letter-spacing: .28em; color: #74767a; }
.device-chin i { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; position: absolute; right: 7px; }
.rail-preview { position: absolute; inset: 0 auto 0 0; width: 20%; background: #0c1022; padding: clamp(10px, 1.2vw, 18px); display: flex; flex-direction: column; border-right: 1px solid #31364c; }
.rail-heading { display: flex; align-items: center; gap: 7px; color: #acb8d3; font: 9px "IBM Plex Mono", monospace; letter-spacing: .06em; padding-bottom: 12px; border-bottom: 1px solid #ffffff16; }
.rail-heading > span:last-child { margin-left: auto; color: #71819c; font-size: 7px; }
.signal-dot { width: 5px; height: 5px; background: #7fe7c9; border-radius: 50%; }
.rail-messages { flex: 1; min-height: 0; overflow-y: auto; }
.rail-message { border-bottom: 1px solid #ffffff0c; padding: 12px 0; }
.rail-message > span { display: block; color: #7fe7c9; font: 9px "IBM Plex Mono", monospace; }
.rail-message time, .message-time { float: right; color: #71819c; font-size: 8px; }
.rail-messages:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.rail-message p { margin-top: 6px; color: #e8eaf4; font: 11px/1.6 "IBM Plex Mono", monospace; }
.rail-message.new-message { animation: message-in .4s ease-out; }
.rail-message .ding { color: var(--accent); }
.rail-bottom { display: flex; justify-content: space-between; color: #71819c; font: 7px "IBM Plex Mono", monospace; margin-top: 8px; gap: 8px; }
.rail-bottom > span { color: #7fe7c9; }
.sample-action { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.sample-action p { color: var(--faint); font-size: 11px; }
.handoff-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 34px; padding-block: 24px; border-block: 1px solid var(--line); }
.handoff-flow div > span { color: var(--accent); font: 10px "IBM Plex Mono", monospace; }
.handoff-flow strong { display: block; font: 500 17px "Space Grotesk", sans-serif; margin-top: 12px; }
.handoff-flow p { font-size: 11px !important; line-height: 1.5 !important; margin-top: 6px !important; }
.handoff-flow b { color: var(--faint); font-weight: 400; }
.control-section { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(40px, 9vw, 140px); border-block: 1px solid var(--line-soft); padding: clamp(60px, 8vw, 120px) clamp(0px, 4vw, 70px); }
.control-figure { max-width: 440px; justify-self: center; }
.control-halo { padding: 26px; border: 1px solid #ffd07820; border-radius: 36px; background: radial-gradient(ellipse at 50% 35%, #ffd07814, #ffd07802 70%); }
.control-figure img { display: block; max-width: 100%; width: 285px; height: auto; border-radius: 12px; box-shadow: 0 30px 80px #000a; }
.control-figure figcaption { text-align: center; color: var(--faint); font-size: 11px; margin-top: 20px; }
.control-copy h2 { font: 500 clamp(40px, 5vw, 68px)/1 "Space Grotesk", sans-serif; letter-spacing: -.055em; margin-top: 18px; }
.control-copy > p:not(.section-label) { font-size: 16px; color: var(--muted); line-height: 1.8; margin-top: 26px; }
.control-detail { display: flex; gap: 22px; padding-top: 25px; margin-top: 25px; border-top: 1px solid var(--line); }
.control-detail > span { color: var(--accent); font: 10px "IBM Plex Mono", monospace; padding-top: 5px; }
.control-detail h3 { font: 500 21px "Space Grotesk", sans-serif; letter-spacing: -.03em; }
.control-detail p { color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 9px; }
@keyframes message-in { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) { .control-section { grid-template-columns: 1fr; padding-inline: 20px; } .control-figure { order: 2; } .control-copy { max-width: 650px; } }
@media (max-width: 620px) { .hero h1 { font-size: clamp(38px, 12.5vw, 72px); } .device-surround { border-radius: 18px; } .handoff-flow { grid-template-columns: 1fr; gap: 12px; } .handoff-flow b { transform: rotate(90deg); width: 20px; text-align: center; } .control-section { padding-inline: 6px; } .rail-preview { padding: 10px; } }