#horticode-flow{color:#d6e7ee;background:#060b12;font:14px system-ui,sans-serif;border-radius:14px;overflow:hidden}#horticode-flow *{box-sizing:border-box}#horticode-flow header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid #20303d}#horticode-flow header strong{font-weight:500;letter-spacing:2px;margin-right:auto}#horticode-flow button,#horticode-flow select{background:#14222e;color:#e2f2fa;border:1px solid #304657;border-radius:6px;padding:8px 10px;font:inherit}#horticode-flow .layout{display:grid;grid-template-columns:minmax(0,1fr) 280px}#horticode-flow .stage{position:relative;min-width:0;height:650px;background:#03070e}#horticode-flow canvas{width:100%;height:100%;display:block;touch-action:none}#horticode-flow .status{position:absolute;left:18px;bottom:16px;color:#8ca7ba;font-size:12px;pointer-events:none}#horticode-flow aside{padding:8px 16px 18px;border-left:1px solid #20303d}#horticode-flow details{border-bottom:1px solid #20303d;padding:12px 0}#horticode-flow summary{font-weight:500;cursor:pointer}#horticode-flow .control{display:block;margin-top:13px;font-size:12px;color:#aac0d0}#horticode-flow .line{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px}#horticode-flow output{color:#e3f4ff;font-variant-numeric:tabular-nums}#horticode-flow input[type=range]{width:100%;accent-color:#00baff}#horticode-flow input[type=color]{width:100%;height:30px;background:none;border:0;padding:0}#horticode-flow select{width:100%}#horticode-flow .check{display:flex;gap:9px;align-items:center;margin-top:12px;font-size:12px}#horticode-flow input[type=checkbox]{accent-color:#00baff}#horticode-flow .footer{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}#horticode-flow .error{position:absolute;inset:20px;color:#ffbda8}#horticode-flow :focus-visible{outline:2px solid #00baff;outline-offset:3px}@media(max-width:680px){#horticode-flow .layout{grid-template-columns:1fr}#horticode-flow .stage{height:440px}#horticode-flow aside{border-left:0;border-top:1px solid #20303d}}
#horticode-flow .layout{align-items:start}#horticode-flow aside{height:650px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#304657 #060b12}#horticode-flow aside summary{padding:3px 0}@media(max-width:680px){#horticode-flow aside{height:360px}#horticode-flow .stage{height:360px}}

html,body{margin:0;width:100%;height:100%;background:#03070e;color:#d6e7ee;font-family:system-ui,sans-serif;overflow:hidden}
#horticode-flow{height:100svh;min-height:320px;border-radius:0;position:relative}
#horticode-flow header{position:absolute;inset:0 0 auto;z-index:4;border:0;background:linear-gradient(#03070ecc,transparent);padding:22px 28px;pointer-events:none}
#horticode-flow header>*{pointer-events:auto}
#horticode-flow .brand{color:#d6e7ee;text-decoration:none;font-size:16px;font-weight:500;letter-spacing:.08em;margin-right:auto}
#horticode-flow header button{background:#07121a88;backdrop-filter:blur(10px)}
#horticode-flow .layout{display:block;height:100%}
#horticode-flow .stage{height:100%;width:100%;min-height:0}
#horticode-flow aside{display:none;position:absolute;z-index:5;right:0;top:80px;bottom:64px;width:300px;height:auto;background:#060b12ee;backdrop-filter:blur(20px);border:1px solid #20303d;border-right:0;border-radius:12px 0 0 12px}
#horticode-flow.controls-open aside{display:block}
#horticode-flow .status{display:none}
#horticode-flow footer{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:28px;right:28px;display:flex;justify-content:space-between;gap:16px;align-items:center;pointer-events:none;font-size:12px;color:#91a8b7;letter-spacing:.09em}
#horticode-flow footer a{pointer-events:auto;color:#bed8e6;text-decoration:none}
#horticode-flow .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:680px){#horticode-flow header{padding:16px;gap:8px}#horticode-flow .brand{flex-basis:100%;font-size:14px}#horticode-flow header button{font-size:12px;padding:8px}#horticode-flow aside{top:108px;width:min(300px,85vw);bottom:64px}#horticode-flow footer{left:16px;right:16px;font-size:10px}#horticode-flow .stage{height:100%}}