/* HTML 1 | Retro desktop chaos window design */
:root{
  --d1-desktop:#181a20;--d1-grid-a:rgba(255,0,119,.12);--d1-grid-b:rgba(0,231,255,.08);
  --d1-face:#c0c0c0;--d1-face-light:#d4d0c8;--d1-hi:#fff;--d1-mid:#808080;--d1-dark:#404040;--d1-black:#000;
  --d1-title:#000080;--d1-paper:#f4f0e6;--d1-paper-cool:#dfe7dc;--d1-pink:#ff0077;--d1-cyan:#00e7ff;--d1-lime:#ccff00;--d1-orange:#ff8a00;
}
html{background:var(--d1-desktop)}
body.design-chaos{
  color:#000;background:
    linear-gradient(90deg,var(--d1-grid-a) 1px,transparent 1px),linear-gradient(0deg,var(--d1-grid-b) 1px,transparent 1px),
    radial-gradient(circle at 16% 12%,rgba(255,0,119,.16),transparent 18rem),radial-gradient(circle at 84% 8%,rgba(0,231,255,.14),transparent 20rem),
    linear-gradient(180deg,#202229,#16181d);background-size:36px 36px,36px 36px,auto,auto,auto;
  font-family:"MS Sans Serif","Microsoft Sans Serif",Tahoma,Geneva,system-ui,sans-serif;
}
body.design-chaos.light{background:linear-gradient(90deg,rgba(0,0,128,.08) 1px,transparent 1px),linear-gradient(0deg,rgba(255,0,119,.08) 1px,transparent 1px),#ece9d8;background-size:36px 36px;color:#000}
.design-chaos .design-masthead{width:min(1500px,calc(100% - 28px));margin:16px auto 14px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:5px;background:var(--d1-face);border-top:2px solid var(--d1-hi);border-left:2px solid var(--d1-hi);border-right:2px solid var(--d1-dark);border-bottom:2px solid var(--d1-dark);box-shadow:7px 7px 0 #000,13px 13px 0 var(--accent)}
.design-chaos .chaos-title{min-width:0;flex:1;display:flex;align-items:center;gap:10px;padding:9px 12px;color:#fff;background:linear-gradient(90deg,var(--d1-title) 0 62%,var(--accent) 62% 78%,var(--accent2) 78% 100%);font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.design-chaos .chaos-logo{display:grid;place-items:center;min-width:34px;height:28px;padding:0 7px;color:#000;background:var(--d1-lime);border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;box-shadow:2px 2px 0 #000}
.design-chaos .chaos-app-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-chaos .chaos-sub{font-size:.72rem;opacity:.75;white-space:nowrap}
.design-chaos .chaos-controls{display:flex;gap:4px}.design-chaos .chaos-controls span{display:grid;place-items:center;width:30px;height:28px;background:var(--d1-face);border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;font-weight:900}
.design-chaos .ticker{position:relative;top:auto;width:min(1500px,calc(100% - 28px));margin:0 auto 14px;background:#000;border:2px inset #aaa;box-shadow:5px 5px 0 var(--accent2)}
.design-chaos .ticker-track{padding:7px 0;font-size:.78rem;gap:30px}.design-chaos .ticker-track span:nth-child(3n+1){color:var(--d1-pink)}.design-chaos .ticker-track span:nth-child(3n+2){color:var(--d1-cyan)}.design-chaos .ticker-track span:nth-child(3n){color:var(--d1-lime)}
.design-chaos .shell{width:min(1500px,calc(100% - 28px));padding:8px;background:var(--d1-face);border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;box-shadow:10px 10px 0 #000,16px 16px 0 color-mix(in srgb,var(--accent) 85%,#fff);margin-bottom:36px}
.design-chaos .topbar{margin:0 0 8px;padding:8px 10px;background:linear-gradient(90deg,var(--d1-title),color-mix(in srgb,var(--accent) 70%,#000));color:#fff;border:0;box-shadow:none}
.design-chaos .brand h1,.design-chaos .brand small{color:#fff}.design-chaos .logo{border-radius:0;color:#000;background:var(--d1-lime);border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;box-shadow:3px 3px 0 #000}
.design-chaos .btn{border-radius:0;color:#000;background:var(--d1-face);border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;box-shadow:2px 2px 0 #000;text-transform:uppercase;letter-spacing:.04em}
.design-chaos .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--accent)}.design-chaos .btn:active{border-top-color:#404040;border-left-color:#404040;border-right-color:#fff;border-bottom-color:#fff;transform:translate(1px,1px);box-shadow:none}
.design-chaos .btn.primary{background:var(--d1-lime);color:#000}.design-chaos .btn.secondary{background:var(--d1-cyan)}.design-chaos .btn.danger{background:var(--d1-pink);color:#fff}
.design-chaos .hero{min-height:330px;border-radius:0;color:#000;background:var(--d1-paper);border-top:2px solid #404040;border-left:2px solid #404040;border-right:2px solid #fff;border-bottom:2px solid #fff;box-shadow:8px 8px 0 #000,14px 14px 0 var(--accent);padding:clamp(28px,5vw,60px)}
.design-chaos .hero::before{background-image:linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px);mask-image:none}.design-chaos .hero h2{color:#050505;text-shadow:2px 2px 0 var(--accent),-2px -2px 0 var(--accent2)}.design-chaos .hero p,.design-chaos .hero .muted{color:#333}.design-chaos .eyebrow{border-radius:0;background:var(--d1-title);color:#fff;border:2px solid #000;box-shadow:4px 4px 0 var(--accent)}
.design-chaos .hero-stats{gap:14px}.design-chaos .stat{border-radius:0;color:#000;background:var(--d1-face-light);border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;box-shadow:4px 4px 0 #000}.design-chaos .stat b{color:var(--d1-title)}.design-chaos .stat span{color:#333}
.design-chaos .navtabs{top:8px;border-radius:0;background:var(--d1-face);border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;box-shadow:4px 4px 0 #000}.design-chaos .navtabs a{border-radius:0;color:#000;font-weight:900;text-transform:uppercase}.design-chaos .navtabs a:hover{background:var(--d1-title);color:#fff}
.design-chaos .section{padding:28px 10px}.design-chaos .section-head{padding:10px 12px;margin-bottom:18px;background:#000;color:#fff;border-left:8px solid var(--accent);box-shadow:5px 5px 0 var(--accent2)}.design-chaos .section-head h3{color:#fff;text-transform:uppercase;letter-spacing:-.04em}.design-chaos .section-head p{color:#d9d9d9}
.design-chaos .grid{gap:22px}.design-chaos .card{position:relative;border-radius:0;color:#000;background:var(--d1-face);border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;box-shadow:7px 7px 0 #000,12px 12px 0 color-mix(in srgb,var(--accent) 75%,transparent);padding:8px;transition:transform .17s ease,box-shadow .17s ease}.design-chaos .card:nth-child(4n+2){box-shadow:7px 7px 0 #000,12px 12px 0 var(--d1-cyan)}.design-chaos .card:nth-child(4n+3){box-shadow:7px 7px 0 #000,12px 12px 0 var(--d1-lime)}.design-chaos .card:nth-child(4n+4){box-shadow:7px 7px 0 #000,12px 12px 0 var(--d1-orange)}.design-chaos .card:hover{z-index:3;transform:translate(-3px,-3px);box-shadow:10px 10px 0 #000,16px 16px 0 var(--accent)}
.design-chaos .card h4{margin:0 0 10px;padding:7px 76px 7px 9px;min-height:32px;color:#fff;background:linear-gradient(90deg,var(--d1-title) 0 76%,var(--accent) 76%);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}.design-chaos .card h4::after{content:"_  □  ×";position:absolute;right:7px;top:6px;padding:1px 4px;color:#000;background:var(--d1-face);border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040}
.design-chaos .card>*:not(h4){margin-left:8px;margin-right:8px}.design-chaos .muted{color:#333}.design-chaos code{background:var(--d1-lime);color:#000;padding:.05rem .25rem;border:1px solid #000}
.design-chaos .input,.design-chaos select,.design-chaos textarea{border-radius:0;background:#fff;color:#000;border-top:2px solid #404040;border-left:2px solid #404040;border-right:2px solid #fff;border-bottom:2px solid #fff}.design-chaos .input:focus,.design-chaos select:focus,.design-chaos textarea:focus{outline:2px dotted var(--d1-title);box-shadow:none}
.design-chaos .list-item,.design-chaos .table-wrap,.design-chaos .canvas-wrap,.design-chaos .empty{border-radius:0;background:var(--d1-paper);color:#000;border-top:2px solid #404040;border-left:2px solid #404040;border-right:2px solid #fff;border-bottom:2px solid #fff}.design-chaos .list-item .meta span{color:#444}.design-chaos table{background:var(--d1-paper);color:#000}.design-chaos th{background:var(--d1-title);color:#fff}.design-chaos td{border-color:#aaa}.design-chaos tr:hover td{background:#fff6a8}
.design-chaos .pill{border-radius:0;background:var(--d1-lime);color:#000;border:2px solid #000}.design-chaos .progress{border-radius:0;background:#000;border:2px inset #aaa}.design-chaos .progress>i{background:linear-gradient(90deg,var(--d1-pink),var(--d1-cyan),var(--d1-lime))}
.design-chaos footer{margin:20px 0 0;padding:16px;background:var(--d1-face);color:#000;border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040}.design-chaos dialog .dialog-card{border-radius:0;background:var(--d1-face);color:#000;border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;box-shadow:10px 10px 0 #000,16px 16px 0 var(--accent)}.design-chaos dialog .muted{color:#333}
.design-chaos ::-webkit-scrollbar{width:17px;height:17px}.design-chaos ::-webkit-scrollbar-track{background:var(--d1-face);border:2px inset #ddd}.design-chaos ::-webkit-scrollbar-thumb{border-radius:0;background:repeating-linear-gradient(45deg,var(--accent) 0 5px,var(--accent2) 5px 10px);border:3px solid var(--d1-face)}.design-chaos *{scrollbar-color:var(--accent) var(--d1-face);scrollbar-width:auto}
@media(min-width:901px){.design-chaos .card:nth-child(4n+1){transform:rotate(-.18deg)}.design-chaos .card:nth-child(4n+2){transform:translateY(4px) rotate(.16deg)}.design-chaos .card:nth-child(4n+3){transform:translateY(2px) rotate(-.12deg)}.design-chaos .card:nth-child(4n+4){transform:translateY(5px) rotate(.2deg)}}
@media(max-width:700px){.design-chaos .design-masthead{width:calc(100% - 16px);margin-top:8px}.design-chaos .chaos-sub{display:none}.design-chaos .chaos-controls span{width:26px}.design-chaos .ticker,.design-chaos .shell{width:calc(100% - 16px)}.design-chaos .shell{padding:5px;box-shadow:5px 5px 0 #000,9px 9px 0 var(--accent)}.design-chaos .topbar{align-items:stretch}.design-chaos .card{transform:none!important}.design-chaos .hero{padding:24px 18px}.design-chaos .section{padding-left:2px;padding-right:2px}}