/* Lucian UX/UI Prompt #201 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#201 */
.u201 { background:var(--blue); color:#fcfbfa; }
.u201 .page-section { padding-top:65px; padding-bottom:45px; }
.u201 .u201-header { display:grid; grid-template-columns:1fr 27%; gap:8%; align-items:center; margin-bottom:65px; }
.u201 .u201-header .eyebrow { color:#d9d6ff; }
.u201 .u201-header h2 { font-size:clamp(32px,3.5vw,60px); }
.u201 .u201-header > img { width:100%; height:270px; object-fit:contain; background:var(--paper); border-radius:26px; }
.u201 .u201-run { margin-top:30px; padding:16px 26px; background:var(--red); color:white; border-radius:14px; font-size:19px; font-weight:700; min-width:185px; }
.u201 .u201-run:hover { background:#b80710; }
.u201 .u201-run:disabled { opacity:.7; cursor:wait; }
.u201 .u201-run:focus-visible { outline:3px solid white; outline-offset:5px; }
.u201 .u201-flow { position:relative; padding-bottom:110px; }
.u201 .u201-nodes { list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:32px; margin:0; padding:0; }
.u201 .u201-node { position:relative; z-index:1; padding:22px 20px 48px; border-radius:22px; background:var(--paper); color:var(--blue); box-shadow:0 0 0 2px transparent; transition:box-shadow .3s,transform .3s; }
.u201 .u201-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:16px; font-weight:600; margin-bottom:20px; }
.u201 .u201-number { width:37px; height:37px; display:grid; place-items:center; background:var(--blue); color:white; border-radius:50%; font-size:17px; }
.u201 .u201-node h3 { font-size:clamp(21px,1.7vw,29px); line-height:1.2; margin:0 0 14px; }
.u201 .u201-node p { margin:0; font-size:clamp(15px,1.1vw,18px); line-height:1.6; }
.u201 .u201-node.is-run { box-shadow:0 0 0 3px var(--red); transform:translateY(-1px); }
.u201 .u201-state { position:absolute; right:18px; bottom:17px; width:22px; height:22px; border-radius:50%; }
.u201 .is-run .u201-state { border:3px solid #d9d6ff; border-top-color:var(--red); animation:u201-spin .7s linear infinite; }
.u201 .is-done .u201-state { background:var(--blue); }
.u201 .is-done .u201-state::after { content:""; position:absolute; left:7px; top:4px; width:6px; height:10px; border:solid white; border-width:0 2px 2px 0; transform:rotate(45deg); }
.u201 .u201-connectors { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.u201 .u201-paths > path { fill:none; stroke:#d9d6ff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.u201 .u201-paths > path.is-on { stroke:white; }
.u201 .u201-dot { fill:var(--red); filter:drop-shadow(0 0 5px #ff8690); opacity:0; }
.u201 .u201-loop-label { position:absolute; bottom:18px; left:55%; transform:translateX(-50%); font-size:15px; color:#d9d6ff; white-space:nowrap; }
.u201 .u201-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes u201-spin { to { transform:rotate(360deg); } }
@media (max-width:1200px) and (min-width:961px) {
 .u201 .u201-nodes { gap:23px; }
 .u201 .u201-node { padding:18px 13px 45px; }
 .u201 .u201-meta { font-size:13px; }
 .u201 .u201-number { width:29px; height:29px; font-size:14px; }
 .u201 .u201-node h3 { font-size:21px; }
 .u201 .u201-node p { font-size:14px; }
}
@media (max-width:960px) {
 .u201 .u201-header { grid-template-columns:1fr 25%; gap:25px; margin-bottom:42px; }
 .u201 .u201-header > img { height:185px; border-radius:18px; }
 .u201 .u201-flow { padding:0 0 0 35px; }
 .u201 .u201-nodes { grid-template-columns:1fr; gap:32px; }
 .u201 .u201-node { padding:22px 24px 45px; }
 .u201 .u201-node h3 { font-size:25px; }
 .u201 .u201-node p { font-size:16px; }
 .u201 .u201-meta { margin-bottom:14px; }
 .u201 .u201-loop-label { left:-8px; bottom:auto; top:51%; transform:translate(-50%,-50%) rotate(-90deg); font-size:12px; background:var(--blue); padding:7px; }
}
@media (max-width:480px) {
 .u201 .page-section { padding-top:40px; }
 .u201 .u201-header { grid-template-columns:1fr; gap:25px; }
 .u201 .u201-header > img { height:180px; width:170px; justify-self:end; }
 .u201 .u201-header h2 { font-size:30px; }
 .u201 .u201-run { font-size:16px; padding:15px 22px; margin-top:24px; }
 .u201 .u201-flow { padding-left:30px; }
 .u201 .u201-node { padding:19px 18px 42px; }
}
@media (prefers-reduced-motion:reduce) {
 .u201 * { transition:none !important; animation:none !important; }
 .u201 .u201-dot { display:none; }
}