/* Interactive RTI-style app demo. Scoped to .rtid so it never touches the rest of the site. */
.rtid { --g-text: #f2f5f8; --g-muted: rgba(242,245,248,.72); --g-line: rgba(255,255,255,.28); --g-fill: rgba(255,255,255,.08); --g-fill2: rgba(255,255,255,.14); --g-on: rgba(120,190,255,.38);
	display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 28px; align-items: start; margin: 1.5rem 0 2rem; color: var(--g-text);
	font-family: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif; font-weight: 300; }
@media (max-width: 860px) { .rtid { grid-template-columns: 1fr; justify-items: center; } .rtid-side { width: 100%; } }
.rtid button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.rtid svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* iPhone frame */
.rtid-phone { position: relative; width: 100%; max-width: 340px; aspect-ratio: 9 / 19.5; background: #0b0d10; border-radius: 50px; padding: 11px; box-shadow: 0 0 0 2px #444a52, 0 0 0 6px #15181c, 0 30px 60px rgba(0,0,0,.45); }
.rtid-screen { position: relative; height: 100%; border-radius: 40px; overflow: hidden; display: flex; flex-direction: column;
	background: linear-gradient(118deg, transparent 52%, rgba(255,255,255,.10) 58%, transparent 66%), linear-gradient(140deg, transparent 20%, rgba(255,255,255,.06) 30%, transparent 40%), linear-gradient(165deg, #7d8fa2 0%, #4c6177 38%, #2b4058 72%, #1c2c40 100%); }
.rtid-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 32%; height: 26px; background: #000; border-radius: 20px; z-index: 9; }
.rtid-sbar { display: flex; justify-content: space-between; align-items: center; padding: 13px 28px 4px; font-size: 13px; font-weight: 600; min-height: 38px; font-family: -apple-system, "Segoe UI", sans-serif; }
.rtid-sbar span:last-child { letter-spacing: 1px; font-size: 11px; }
.rtid-app { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 10px 14px; gap: 8px; }

/* Frosted glass */
.rtid-top, .rtid-bar, .rtid-card, .rtid-menu { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 14px; }
.rtid-glass { background: var(--g-fill); border-radius: 8px; }
.rtid-top { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.rtid-top__room { flex: 1; text-align: left; font-size: 15px; }
.rtid-top__exit { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.rtid-top__exit svg { width: 20px; height: 20px; stroke-width: 2.4; }
.rtid-sq { width: 34px; height: 34px; border-radius: 6px; background: var(--g-fill2) !important; display: grid; place-items: center; font-size: 22px; line-height: 1; }
.rtid-sq.is-on { background: var(--g-on) !important; }
.rtid-sq svg { width: 20px; height: 20px; }
.rtid-main { flex: 1; min-height: 0; display: flex; }
.rtid-card { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
.rtid-card::-webkit-scrollbar { display: none; }
.rtid-card__title { font-size: 19px; font-weight: 400; line-height: 1.2; margin: 2px 2px 2px; }
.rtid-when { display: flex; gap: 18px; font-size: 12px; color: var(--g-muted); margin: -2px 2px 2px; }
.rtid-hint { margin: 0 2px; font-size: 11px; color: var(--g-muted); }
.rtid-sub { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 2px; }
.rtid-sub svg { width: 14px; height: 14px; }
.rtid-sec { text-align: center; font-size: 14px; margin: 2px 0; }

.rtid-weather { padding: 10px 12px; text-align: center; }
.rtid-weather__top { display: flex; align-items: center; justify-content: space-around; }
.rtid-weather__top .rtid-wx { width: 62px; height: 62px; stroke: none; }
.rtid-weather__top b { font-size: 34px; font-weight: 300; }
.rtid-weather p { margin: 2px 0 6px; font-size: 12px; }
.rtid-weather dl { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 1px 6px; margin: 0; font-size: 9.5px; text-align: left; }
.rtid-weather dt { color: var(--g-muted); } .rtid-weather dd { margin: 0; }

.rtid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rtid-col { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 8px; }
.rtid-col__icon { display: grid; place-items: center; height: 24px; } .rtid-col__icon svg { width: 18px; height: 18px; }
.rtid-col--temp { align-items: center; justify-content: space-between; }
.rtid-col--temp b { font-size: 28px; font-weight: 300; }
.rtid-btn { border: 1px solid var(--g-line) !important; border-radius: 3px; padding: 6px 4px; font-size: 12px; text-align: center; line-height: 1.2; transition: background .15s; }
.rtid-btn.is-on { background: var(--g-on) !important; border-color: rgba(255,255,255,.55) !important; }
.rtid-btn:active, .rtid-li:active, .rtid-sq:active, .rtid-round:active { background: rgba(255,255,255,.22) !important; }
.rtid-btn svg { width: 22px; height: 22px; }
.rtid-btn--big { min-height: 52px; display: grid; place-items: center; }
.rtid-btn--icons { display: flex; justify-content: center; align-items: center; gap: 2px; } .rtid-btn--icons svg { width: 14px; height: 14px; }
.rtid-round { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--g-line) !important; display: grid; place-items: center; font-size: 26px; font-weight: 200; }
.rtid-round--sm { width: 42px; height: 42px; } .rtid-round--sm svg { width: 18px; height: 18px; }

.rtid-list { display: flex; flex-direction: column; padding: 4px 0; }
.rtid-li { display: flex; align-items: center; gap: 12px; padding: 7px 12px; font-size: 13.5px; text-align: left; width: 100%; }
.rtid-li svg { width: 18px; height: 18px; flex: none; }
.rtid-li span { flex: 1; } .rtid-li em { font-style: normal; font-size: 11px; color: var(--g-muted); }
.rtid-li.is-on { background: rgba(255,255,255,.12); } .rtid-li.is-pick { background: var(--g-on); }
.rtid-list--music .rtid-li { padding: 6px 12px; }
.rtid-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rtid-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rtid-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rtid-chips .rtid-btn { padding: 6px 10px; }
.rtid-pagewrap { display: flex; flex-direction: column; gap: 8px; }
.rtid-group { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 12px; }
.rtid-group small { color: var(--g-muted); }
.rtid-dots { display: flex; justify-content: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.rtid-dots button { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35) !important; }
.rtid-dots button.is-on { background: #fff !important; }
.rtid-transport { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: center; row-gap: 6px; padding: 2px 6px; }
.rtid-transport button:nth-child(1) { grid-column: 1 / span 1; justify-self: end; } .rtid-transport button:nth-child(2) { grid-column: 2 / span 2; } .rtid-transport button:nth-child(3) { grid-column: 4; justify-self: start; }
.rtid-transport svg { width: 22px; height: 22px; }
.rtid-np { display: flex; align-items: center; gap: 10px; padding: 8px; }
.rtid-np i { width: 42px; height: 42px; border-radius: 6px; flex: none; }
.rtid-np b { display: block; font-weight: 400; font-size: 14px; } .rtid-np span { font-size: 11px; color: var(--g-muted); }
.rtid-now { padding: 10px; text-align: center; } .rtid-now b { display: block; font-weight: 400; font-size: 15px; } .rtid-now span { font-size: 11px; color: var(--g-muted); }
.rtid-now--alarm b { font-size: 20px; color: #a6f0c6; } .rtid-now--alarm.is-armed b { color: #ffb4ab; }
.rtid-ring-pad { position: relative; width: 168px; height: 168px; margin: 2px auto; border-radius: 50%; border: 1px solid var(--g-line); }
.rtid-ring-pad button { position: absolute; width: 50px; height: 50px; display: grid; place-items: center; }
.rtid-ring-pad .u { top: 4px; left: 59px; } .rtid-ring-pad .d { bottom: 4px; left: 59px; } .rtid-ring-pad .l { left: 4px; top: 59px; } .rtid-ring-pad .r { right: 4px; top: 59px; }
.rtid-ring-pad .c { left: 49px; top: 49px; width: 70px; height: 70px; border-radius: 50%; border: 1px solid var(--g-line); font-size: 14px; }
.rtid-sliders { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
.rtid-sliders label { display: flex; justify-content: space-between; font-size: 12px; } .rtid-sliders b { font-weight: 400; }
.rtid-sliders input { width: 100%; accent-color: #cfe3ff; margin: 2px 0 6px; }
.rtid-thermo { display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; justify-items: center; padding: 18px 8px; text-align: center; }
.rtid-thermo span, .rtid-thermo small { display: block; font-size: 11px; color: var(--g-muted); } .rtid-thermo b { font-size: 48px; font-weight: 200; line-height: 1.05; }
.rtid-cams { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rtid-cam { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #222; }
.rtid-cam span { position: absolute; left: 6px; bottom: 5px; font-size: 10px; font-weight: 500; text-shadow: 0 1px 2px #000; }
.rtid-cam i { position: absolute; right: 6px; top: 5px; font-style: normal; font-size: 9px; font-weight: 600; background: #d64545; padding: 1px 5px; border-radius: 3px; animation: rtid-blink 2s infinite; }
.rtid-cam--0 { background: linear-gradient(180deg, #3a4a5a 0 45%, #555 45% 100%); }
.rtid-cam--1 { background: linear-gradient(90deg, #4b3b2b 0 30%, #6b5b4b 30% 70%, #4b3b2b 70%); }
.rtid-cam--2 { background: linear-gradient(180deg, #2f4f3f 0 50%, #3f6f4f 50%); }
.rtid-cam--3 { background: repeating-linear-gradient(90deg, #4a4a4a 0 8px, #5a5a5a 8px 16px); }
.rtid-cam--door { aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 38%, #c8a27c 0 13%, transparent 14%), radial-gradient(ellipse at 50% 78%, #375a8c 0 30%, transparent 31%), linear-gradient(180deg, #6d5a48, #3c3028); }
@keyframes rtid-blink { 50% { opacity: .35; } }

.rtid-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; }
.rtid-bar b { font-weight: 400; font-size: 15px; min-width: 32px; text-align: center; }
.rtid-bar .rtid-sq:nth-child(2), .rtid-bar .rtid-sq:nth-child(4) { margin: 0 -18px; }

.rtid-menu { position: absolute; left: 10px; right: 10px; top: 52px; bottom: 66px; z-index: 6; background: rgba(40,58,78,.92); padding: 8px 4px; overflow-y: auto; }
.rtid-menu__head { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 6px 12px; font-size: 16px; }
.rtid-menu .rtid-li { font-size: 15px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.08); }

/* Incoming door station call */
.rtid-ring { position: absolute; inset: 0; z-index: 10; background: rgba(18, 28, 40, .94); display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.rtid-ring[hidden] { display: none; }
.rtid-ring b { font-size: 18px; font-weight: 400; } .rtid-ring p { margin: 0; font-size: 13px; color: var(--g-muted); }
.rtid-ring .rtid-cam { animation: rtid-pulse 1.2s infinite; }
.rtid-ring__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rtid-ring__btns button { border: 1px solid var(--g-line) !important; border-radius: 4px; padding: 12px; font-size: 14px; }
.rtid-ring__btns button:first-child { background: rgba(60, 180, 110, .45) !important; }
@keyframes rtid-pulse { 50% { box-shadow: 0 0 0 6px rgba(160, 210, 255, .3); } }

/* Virtual room */
.rtid-side { display: flex; flex-direction: column; gap: 14px; }
.rtid-room { --wall: #3b4a5c; --floor: #6b5a48; --light: .5; --l0: .5; --l1: .5; --l2: 0; --shade: 0;
	position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--wall); box-shadow: 0 18px 40px rgba(0,0,0,.35); transition: background .4s; }
.rtid-room::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: var(--floor); transition: background .4s; }
.rtid-room__dark { position: absolute; inset: 0; background: #05070a; opacity: calc(.82 - var(--light) * .82); transition: opacity .5s; z-index: 4; pointer-events: none; }
.rtid-room__glow { position: absolute; top: -10%; width: 46%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 150, .55), transparent); opacity: var(--l0); transition: opacity .4s; z-index: 5; pointer-events: none; }
.rtid-room__glow--a { left: 4%; } .rtid-room__glow--b { right: 4%; }
.rtid-room__window { position: absolute; left: 6%; top: 14%; width: 22%; height: 46%; background: linear-gradient(180deg, #7ec8ff, #cfe9ff 70%, #9ad07a 70%); border: 5px solid #d9d4cc; border-radius: 4px; overflow: hidden; z-index: 2; }
.rtid-room__shade { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--shade) * 100%); background: repeating-linear-gradient(180deg, #e9e2d6 0 6px, #d8cfc0 6px 8px); transition: height .7s ease; }
.rtid-room__tv { position: absolute; left: 34%; top: 18%; width: 38%; aspect-ratio: 16 / 9; background: #07080a; border: 4px solid #111; border-radius: 6px; z-index: 6; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 8px; color: #fff; font-size: clamp(9px, 1.1vw, 13px); transition: box-shadow .4s; }
.rtid-room__tv.is-on { box-shadow: 0 0 40px rgba(120, 180, 255, .45); }
.rtid-room__tv span { font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); } .rtid-room__tv em { font-style: normal; opacity: .8; }
.rtid-room__tv.is-flash { animation: rtid-flash .35s; }
@keyframes rtid-flash { 50% { filter: brightness(1.6); } }
.rtid-room__console { position: absolute; left: 30%; bottom: 22%; width: 46%; height: 9%; background: #2a211b; border-radius: 4px; z-index: 3; }
.rtid-room__spk { position: absolute; bottom: 22%; width: 5%; height: 34%; background: #1a1a1a; border-radius: 4px; z-index: 3; }
.rtid-room__spk--l { left: 24%; } .rtid-room__spk--r { right: 20%; }
.rtid-room__led { position: absolute; left: 30%; bottom: 31%; width: 46%; height: 3px; background: #ffd9a0; box-shadow: 0 0 18px 6px rgba(255, 200, 120, .8); opacity: var(--l2); z-index: 6; transition: opacity .4s; }
.rtid-room__lamp { position: absolute; right: 7%; bottom: 22%; width: 7%; height: 34%; z-index: 6; }
.rtid-room__lamp::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 32%; background: #f3e3c3; opacity: calc(.3 + var(--l1) * .7); border-radius: 4px 4px 2px 2px; box-shadow: 0 0 calc(var(--l1) * 40px) calc(var(--l1) * 14px) rgba(255, 210, 140, .85); }
.rtid-room__lamp::after { content: ""; position: absolute; left: 46%; width: 8%; top: 32%; bottom: 0; background: #555; }
.rtid-room__music { position: absolute; left: 34%; top: 6%; z-index: 7; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.45); padding: 3px 10px; border-radius: 999px; opacity: 0; transition: opacity .3s; }
.rtid-room__music.is-on { opacity: 1; animation: rtid-bob 1.6s ease-in-out infinite; }
@keyframes rtid-bob { 50% { transform: translateY(-3px); } }
.rtid-room__hud { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 8; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rtid-room__hud > * { background: rgba(10, 12, 16, .72); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.rtid-room__name { font-size: 13px !important; }
.rtid-room__alarm.is-armed { background: #b3261e; }
.rtid-room__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rtid-room__chips span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #20262e; color: #8b98a8; }
.rtid-room__chips span.is-on { color: #e8edf3; box-shadow: inset 0 0 0 1px #2f8cff; }
.rtid-room__chips span.is-here { background: #2f8cff; color: #fff; }
.rtid-panel { background: #11161d; color: #e8edf3; border-radius: 16px; padding: 14px 16px; }
.rtid-panel h3 { margin: 0 0 8px; font-size: 15px; color: #e8edf3; }
.rtid-log { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.rtid-log li { line-height: 1.35; } .rtid-log time { color: #6e7b8b; font-variant-numeric: tabular-nums; margin-right: 6px; }
.rtid-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rtid-actions button { background: #2f8cff !important; color: #fff !important; border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 14px; }
.rtid-actions button.rtid-ghost { background: #20262e !important; }
.rtid-note { font-size: 12px; color: #8b98a8; margin: 0; }

.rtid-room { --curtain: 0; --fan: 0s; }
.rtid-room__curtain { position: absolute; top: 11%; height: 54%; width: calc(1.5% + var(--curtain) * 11%); background: repeating-linear-gradient(90deg, #8a6a55 0 5px, #765a47 5px 10px); z-index: 3; transition: width .9s ease; border-radius: 0 0 3px 3px; box-shadow: 0 6px 10px rgba(0,0,0,.25); }
.rtid-room__curtain--l { left: 4%; } .rtid-room__curtain--r { right: 70%; }
.rtid-room__rod { position: absolute; left: 3.5%; width: 27%; top: 10%; height: 4px; background: #222; border-radius: 2px; z-index: 4; }
.rtid-room__fan { position: absolute; top: 0; left: 82%; width: 12%; aspect-ratio: 1; z-index: 6; }
.rtid-room__fan::before { content: ""; position: absolute; left: 48%; top: 0; width: 4%; height: 22%; background: #333; }
.rtid-room__fan i { position: absolute; left: 0; right: 0; top: 18%; height: 18%; display: block; }
.rtid-room__fan i::before { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 22%; background: #4a3a30; border-radius: 50%; }
.rtid-room__fan i::after { content: ""; position: absolute; left: 42%; top: 20%; width: 16%; height: 60%; background: #222; border-radius: 50%; }
.rtid-room.is-fan .rtid-room__fan i::before { animation: rtid-spin var(--fan) linear infinite; }
@keyframes rtid-spin { 0% { transform: scaleX(1); } 25% { transform: scaleX(.2); } 50% { transform: scaleX(1); } 75% { transform: scaleX(.2); } 100% { transform: scaleX(1); } }
.rtid-col .rtid-btn { padding: 8px 4px; font-size: 13px; }