/* DERAS protocol preview (homepage EN/ID and /deras/): a running log of sample WebSocket events. Behaviour: deras-stream.js. */
.deras-stream{--pad:26px;--line:#34424a;container-type:inline-size;box-shadow:none}
.deras-stream .stream-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.deras-stream .system-top{flex-wrap:wrap;gap:12px 16px;padding:16px var(--pad)}
.deras-stream .system-top span{font-size:inherit;letter-spacing:normal;color:inherit}
.deras-stream .system-top b{display:flex;align-items:baseline;gap:10px;font-size:15px;letter-spacing:.06em}
.deras-stream .system-top b span{font-size:12px;font-weight:400;letter-spacing:.04em;color:#9fadb2}
.deras-stream .stream-controls{display:flex;align-items:center;gap:14px;margin-left:auto}
.deras-stream .stream-state{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:#e4e9e7}
.deras-stream .stream-state>span:first-child{width:7px;height:7px;border-radius:50%;background:#7f8c90}
.deras-stream[data-phase=streaming] .stream-state>span:first-child{background:#c5d7bd;animation:deras-live 1.6s ease-in-out infinite}
.deras-stream[data-running=false] .stream-state>span:first-child{animation-play-state:paused}
@keyframes deras-live{50%{opacity:.3}}
.deras-stream .stream-toggle{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 13px;border:1px solid #4b5a61;border-radius:3px;background:transparent;color:#f6f5f1;font-size:12px;font-weight:600;transition:border-color .2s,background-color .2s}
.deras-stream .stream-toggle:hover{border-color:#aebbbd;background:#ffffff0d}
.deras-stream .stream-toggle[hidden]{display:none}
.deras-stream .stream-toggle>span:first-child{width:10px;height:10px;border-inline:3px solid currentColor}
.deras-stream .stream-toggle[data-state=paused]>span:first-child{border:0;background:currentColor;clip-path:polygon(12% 0,100% 50%,12% 100%)}

/* Running log: newest line at the bottom; older lines rise and fade at the top edge. */
.deras-stream .stream-console{margin:18px var(--pad) 0;border:1px solid var(--line);border-radius:4px;background:#161f24;font:12px/1.6 ui-monospace,"Cascadia Mono","SFMono-Regular",Menlo,Consolas,monospace}
.deras-stream .stream-console code{font:inherit}
.deras-stream .log-head,.deras-stream .log-entry{display:grid;grid-template-columns:17ch minmax(0,1fr);gap:14px;padding:0 14px}
.deras-stream .log-head{margin:0;padding:8px 14px;border-bottom:1px solid var(--line);font-size:11px;color:#71818a}
.deras-stream .stream-log{display:flex;flex-direction:column;justify-content:flex-end;height:208px;margin:0;padding:6px 0 10px;overflow:hidden;list-style:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 52px);mask-image:linear-gradient(to bottom,transparent,#000 52px)}
.deras-stream .log-entry{flex:none;padding:3px 14px}
.deras-stream .log-event{color:#e8a9b0;white-space:nowrap}
.deras-stream .log-data{color:#dfe5e3}
.deras-stream .log-data [class^=j-]{white-space:nowrap}
.deras-stream .j-key{color:#7f9096}

.deras-stream .system-caption{padding:14px var(--pad) 20px;font-size:12px}
@media(max-width:767px){.deras-stream{--pad:20px}}
@media(max-width:420px){.deras-stream{--pad:16px}}
/* Narrow panels: the data sits under its event name. */
@container (max-width:470px){
 .deras-stream .log-head{display:none}
 .deras-stream .log-entry{grid-template-columns:minmax(0,1fr);gap:0;padding:5px 14px}
 .deras-stream .stream-log{height:276px}
}
@media(prefers-reduced-motion:reduce){.deras-stream .stream-state>span:first-child{animation:none!important}}

/* The reader, middleware and application form a sequence, so the page shows them as one flow. */
.deras-process-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:38px 0 0;padding:0;list-style:none}
.deras-process-flow li{position:relative;min-width:0}
.deras-process-flow li:not(:last-child)::after{content:'';position:absolute;top:17px;right:-25px;width:12px;height:12px;border-top:2px solid var(--wine);border-right:2px solid var(--wine);transform:rotate(45deg)}
.deras-flow-no{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--wine);color:#fff;font-size:13px;font-weight:700}
.deras-process-flow h3{margin:16px 0 10px;font-size:20px;line-height:1.3}
.deras-process-flow p{max-width:42ch;margin:0;color:var(--muted);font-size:16px;line-height:1.65}
@media(max-width:767px){.deras-process-flow{grid-template-columns:1fr;gap:32px;margin-top:28px}.deras-process-flow li:not(:last-child)::after{top:auto;bottom:-23px;right:auto;left:13px;transform:rotate(135deg)}}