/* Adapted HCY desktop brand tokens and motion. See docs/20-ui-port.md. */
:root{--red:#b3132b;--bright:#e23a4f;--panel:rgba(16,9,11,.88);--border:rgba(229,72,91,.24);--ease:cubic-bezier(.16,1,.3,1);background:#070405;color:#f8f3f4;letter-spacing:0}
button{transition:transform .4s var(--ease),background .25s,border-color .25s,box-shadow .25s;border-color:var(--border);background:#ffffff06}button:hover{background:#b3132b26;border-color:#e23a4f88;box-shadow:0 0 16px #b3132b14}button:active{transform:scale(.95)}button b{font-weight:400}.primary{background:var(--red);border-color:#e23a4f66;box-shadow:0 5px 22px #65081844}.primary:hover{background:#cb203a}input,textarea{border-color:var(--border);background:#ffffff04}.glass{border:1px solid var(--border);border-radius:8px;background:var(--panel);box-shadow:0 18px 54px #0006,inset 0 1px #ffffff09;backdrop-filter:blur(20px) saturate(125%)}
header{height:58px;border-color:var(--border);background:#0a0507ed;gap:18px;padding:0 24px;position:relative;z-index:20}header strong{font-size:22px;color:var(--bright)}header strong span{font-size:15px;color:#fff8f9;margin-left:5px}.cloud-label{font-size:10px;color:#917880;border-left:1px solid #573039;padding-left:18px}#connection{font-size:12px;color:#bca9af}header button{font-size:11px}main{max-width:none;padding:0}#auth{min-height:calc(100dvh - 100px);max-width:1100px;margin:auto;grid-template-columns:1fr 360px;gap:80px;padding:45px}.eyebrow{font-size:10px;font-weight:600;color:#cc7787;margin:0 0 14px}h1{font-size:30px;line-height:1.5;margin:12px 0}h2{font-size:19px;font-weight:550;margin:0 0 20px}.muted{font-size:12px;line-height:1.9;color:#a28c94}form{border:0;padding:0}#auth-form{border-top:1px solid #a92440;padding-top:28px}label{font-size:12px}
#workspace{height:calc(100dvh - 58px);position:relative;overflow:hidden}#board{position:absolute;inset:0;height:auto;min-height:0;margin:0;border:0;overflow:auto;background-color:#090607;background-image:radial-gradient(#6b404951 .8px,transparent .8px);background-size:24px 24px;scrollbar-width:thin;scrollbar-color:#4c2630 transparent;outline:none}#board.no-grid{background-image:none}#surface{width:4000px;height:3000px}#empty{position:fixed;top:35%;left:50%;transform:translateX(-50%);width:min(460px,calc(100vw - 140px));text-align:center;z-index:1;pointer-events:none}#empty p:not(.eyebrow){font-size:13px;color:#907c84}#empty button{pointer-events:auto;margin-top:14px}#empty h1{font-size:28px;font-weight:500}
.toolbar{position:absolute;top:18px;left:106px;right:24px;z-index:5;padding:7px 10px;gap:12px;max-width:660px;flex-wrap:nowrap}.canvas-mark{color:#d06376;font-size:20px;padding-left:5px}#canvas-name{flex:1;width:120px;border:0;background:none;padding:7px;font-size:13px}#save-state{color:#ad939b;font-size:10px;white-space:nowrap}.toolbar button{padding:6px 16px;font-size:12px}
.dock{position:absolute;left:18px;top:50%;transform:translateY(-50%);z-index:10;width:66px;min-height:340px;max-height:calc(100% - 160px);padding:10px 7px;display:flex;flex-direction:column;align-items:center;gap:8px}.dock button{width:48px;min-height:49px;display:grid;place-items:center;gap:3px;padding:6px 2px;border-color:transparent}.dock button b{font-size:22px;line-height:22px}.dock button span{font-size:10px}.dock button:hover{transform:translateX(3px);border-color:var(--border)}.dock hr{width:25px;border:0;height:1px;background:#ffffff13;margin:6px 0}.dock-spine{margin-top:auto;font-size:7px;color:#bd5d71;padding:14px 0 3px;white-space:nowrap}
.sweep{isolation:isolate;overflow:hidden}.sweep:after{content:"";position:absolute;top:0;left:-70%;height:1px;width:65%;background:linear-gradient(90deg,transparent,#ffc5cf,transparent);animation:edge-pass 7s var(--ease) infinite;pointer-events:none;z-index:2}@keyframes edge-pass{0%,30%{left:-70%;opacity:0}42%{opacity:.85}75%,100%{left:140%;opacity:0}}
.node{width:280px;border-color:#7b2a3d;background:#130c10;box-shadow:0 16px 40px #0006,inset 0 1px #fff1;animation:node-in .5s var(--ease)}.node:focus-within{border-color:#e23a4f;box-shadow:0 0 0 2px #b3132b25,0 20px 45px #0008}.node-handle{background:#ffffff03;border-bottom:1px solid #59303b;font-size:11px;align-items:center;color:#c9adb6}.node-handle:active{cursor:grabbing}.node-handle button{font-size:17px}.node textarea{margin:12px;width:calc(100% - 24px);height:120px;background:#ffffff03;font-size:13px;line-height:1.8}.node-footer{display:flex;justify-content:space-between;padding:0 14px 12px;font-size:9px;color:#8a6471}.node-footer i{width:5px;height:5px;border-radius:50%;background:#d0506a;margin-right:5px;display:inline-block}@keyframes node-in{from{opacity:0;translate:0 12px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
.projects{position:absolute;left:112px;right:142px;bottom:28px;z-index:6;padding:0;transition:height .65s var(--ease),background .4s;height:200px;min-width:0}.project-heading{height:43px;border-bottom:1px solid #ffffff08;padding:0 13px}.project-heading>button{font-size:10px;padding:5px 10px}#bar-toggle{border:0;background:none;color:#d1a3af;flex:1;text-align:left;font-size:10px}#bar-toggle span{display:inline-block;margin-left:12px;transition:transform .5s var(--ease)}#project-list{align-items:center;gap:18px;height:155px;padding:12px 25px 17px;perspective:900px;scrollbar-width:thin;scrollbar-color:#643040 transparent;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);overscroll-behavior-x:contain}#project-list .project-card{flex:0 0 204px;height:116px;text-align:left;padding:0;overflow:hidden;background:#180e13;transform:scale(.95) rotateY(-5deg);opacity:.74;transition:transform .6s var(--ease),opacity .5s,border-color .4s}#project-list .project-card:hover,#project-list .project-card.selected{transform:scale(1) rotateY(0);opacity:1}#project-list .project-card.selected{border-color:#d85670;box-shadow:0 0 22px #b3132b20}.project-preview{height:65px;position:relative;background-image:radial-gradient(#ffffff18 1px,transparent 1px);background-size:9px 9px;border-bottom:1px solid #ffffff08;overflow:hidden}.preview-node{position:absolute;width:22px;height:13px;border:1px solid #ad465a;border-radius:2px;background:#481c2b}.project-preview:empty:after{content:"HCY";position:absolute;right:12px;top:19px;font-size:22px;color:#83425444}.project-title{display:block;padding:8px 10px 0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#project-list .project-card small{padding:3px 10px;font-size:8px;color:#95727e;margin:0}.projects.collapsed{height:33px}.projects.collapsed .project-heading{height:32px;border:0}.projects.collapsed #bar-toggle{text-align:center;font-size:9px}.projects.collapsed #bar-toggle span{transform:rotate(180deg)}.projects.collapsed #create{display:none}.projects.collapsed #project-list{visibility:hidden;pointer-events:none}.canvas-controls{position:absolute;left:112px;bottom:242px;z-index:6;padding:4px;display:flex;gap:2px;align-items:center;transition:bottom .65s var(--ease)}#workspace.bar-collapsed .canvas-controls{bottom:75px}.canvas-controls button{border:0;font-size:10px;padding:6px 10px}.canvas-controls button[aria-pressed=true]{color:#ff8da3;background:#b3132b2a}.canvas-controls .dev-note{font-size:9px;color:#8d717b;padding:0 8px}
.floating-panel{position:absolute;z-index:12;left:98px;top:110px;width:280px;max-width:calc(100vw - 120px);max-height:calc(100% - 150px);overflow:auto;padding:22px;animation:panel-in .5s var(--ease);transform-origin:left center}.folder-paper{display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:20px 12px;border-top:3px solid #cc3f5e;transform:rotate(-2deg);margin:25px 0 18px;background:#32151f}.folder-paper:hover{transform:rotate(0) translateY(-4px)}.folder-paper b{font-size:25px}.folder-paper small{display:block;font-size:9px;color:#ad8794;margin-top:6px}.folder-paper>span:last-child{margin-left:auto}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #ffffff09}.setting-row input{accent-color:#b3132b;width:17px;height:17px}.floating-panel h2{font-size:17px}@keyframes panel-in{from{opacity:0;transform:translateX(-14px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}
#agent-wrap{position:absolute;right:25px;bottom:42px;z-index:9}#agent{width:88px;height:88px;display:grid;place-items:center;background:none;border:0;box-shadow:none;touch-action:none;padding:0}#agent:active{transform:none}.agent-core{display:grid;place-items:center;width:51px;height:51px;border:1px solid #ff8d9d75;border-radius:50%;background:radial-gradient(circle at 34% 24%,#ff8a9b52,transparent 22%),radial-gradient(circle at 50% 115%,#c713328f,transparent 55%),linear-gradient(145deg,#21070d,#080305 72%);box-shadow:0 14px 38px #36000bb8,0 0 0 4px #ad0c2814,inset 0 1px #ffffff29;z-index:2;transition:box-shadow .5s}.agent-core:before{content:"";position:absolute;width:39px;height:39px;border-radius:50%;border:1px solid #ff6e831f;pointer-events:none}#agent:hover .agent-core{box-shadow:0 0 28px #de1c3d50,inset 0 1px #fff4}.agent-eyes{display:flex;gap:9px;transform:translate(var(--eye-x,0px),var(--eye-y,0px));transition:transform .12s ease}.agent-eyes i{display:block;width:6px;height:11px;border-radius:50%;background:#ff9fb3;box-shadow:0 0 7px #ff466c99;transition:transform .1s}#agent.blink .agent-eyes i{transform:scaleY(.08)}.agent-orbit{position:absolute;inset:3px;border:1px solid #ff6d8240;border-right-color:#ff6d8299;border-bottom-color:transparent;border-radius:50%;pointer-events:none}.satellite{position:absolute;top:50%;left:50%;width:19px;height:19px;margin:-9.5px;display:grid;place-items:center;border-radius:50%;border:1px solid #ff7e9157;background:#0f0609;color:#ff99a8;font:12px sans-serif;box-shadow:0 0 13px #e0254433}.agent-core.idle-float{animation:idle-float 1.8s var(--ease)}.agent-core.idle-tilt{animation:idle-tilt 2.2s var(--ease)}.agent-core.idle-pulse{animation:idle-pulse 2s ease-in-out}@keyframes idle-float{50%{transform:translateY(-7px)}}@keyframes idle-tilt{30%{transform:rotate(-10deg)}65%{transform:rotate(8deg)}}@keyframes idle-pulse{50%{filter:brightness(1.8)}}#agent-panel{position:absolute;right:0;bottom:105px;width:280px;max-width:calc(100vw - 50px);padding:22px;animation:panel-in .45s var(--ease)}#agent-panel h2{font-size:17px}
dialog{color:#f8f3f4;padding:28px;width:min(420px,calc(100vw - 36px));max-height:calc(100dvh - 40px);overflow:auto}dialog[open]{animation:dialog-in .4s var(--ease)}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}dialog p{font-size:12px;line-height:1.8;color:#bca0aa}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}#create-error{color:#ff8ca3;margin:0;min-height:18px}@keyframes dialog-in{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}#message{position:fixed;top:132px;right:24px;z-index:30;max-width:min(410px,calc(100vw - 48px));font-size:12px;color:#ffd5dd;background:#33101bee;border:1px solid #963449;padding:12px 18px;border-radius:6px;box-shadow:0 8px 25px #0006}#message:empty{display:none}footer{position:fixed;bottom:7px;left:24px;right:24px;padding:0;border:0;pointer-events:none;font-size:9px;color:#76535e;z-index:8}.reduced-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:760px){header{padding:0 14px;gap:10px}.cloud-label{display:none}header strong{font-size:19px}header strong span{font-size:12px}#connection{font-size:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#auth{grid-template-columns:1fr;gap:30px;padding:32px 24px}h1{font-size:25px}.toolbar{left:78px;right:12px;top:12px;gap:6px}.toolbar button{flex:0}.canvas-mark{display:none}#save-state{display:none}.dock{left:10px;width:55px;padding:7px 4px;min-height:310px}.dock button{width:44px}.dock-spine{font-size:6px}.projects{left:78px;right:16px;bottom:26px;height:180px}#project-list{height:137px;gap:12px}#project-list .project-card{flex-basis:174px;height:106px}.project-preview{height:57px}.project-heading{padding:0 5px}.project-heading>button{font-size:9px;padding:5px}#bar-toggle{font-size:9px}.canvas-controls{left:78px;bottom:216px}#workspace.bar-collapsed .canvas-controls{bottom:70px}.floating-panel{left:78px;max-width:calc(100vw - 94px)}#agent-wrap{right:15px;bottom:223px}#agent{width:70px;height:70px}#agent-panel{bottom:82px}.agent-core{width:43px;height:43px}.agent-core:before{width:33px;height:33px}.satellite{width:16px;height:16px;margin:-8px;font-size:10px}#empty{left:calc(50% + 25px);top:29%}#empty h1{font-size:21px}#message{top:119px;right:14px}}