/* Visual direction inspired by motion2code / Think Big. Original dashboard artwork. */
:root{--ink:#191919;--muted:#66645e;--line:#d9d7ce;--green:#0759ee;--bg:#f5f3ea;--blue:#0759ee;--yellow:#f5e000;--lime:#dfff00}
body{font-family:Arial,"Microsoft JhengHei",sans-serif;background:var(--bg);color:var(--ink)}
aside{background:#f5f3ea;border-right:1px solid #c9c6bc;width:216px;padding:28px 20px}.brand{color:var(--ink);font-size:44px;gap:7px}.brand b{font-size:35px;letter-spacing:-2px;font-weight:900}.brand span{letter-spacing:2px;color:#5e5c55;font-size:9px}.workspace{border-color:#c9c6bc;border-radius:0;margin:35px 0 26px}.navlabel{color:#66645e;font-size:9px;font-weight:700}nav button{color:#56544e;border-radius:0;padding:12px 10px;font-weight:600}nav button.active{background:var(--ink);color:var(--lime)}nav button:hover{background:#e4e1d6;color:#191919}nav button.active:hover{background:#30302c;color:var(--lime)}.sidebottom{color:#53544a}.sidebottom p{color:#6c6b62}.live-dot{background:var(--blue)}main{margin-left:216px}header{background:var(--bg);border-bottom:1px solid #c9c6bc;height:66px;color:#67665d;font-size:11px}.demo{background:var(--yellow);color:#222;border-radius:0;font-weight:700}.avatar{background:var(--ink);color:var(--lime);font-weight:700}.content{padding:30px 36px}.heading{position:relative;isolation:isolate;min-height:192px;align-items:center;padding-right:150px}.eyebrow{color:#5b5c53;font-family:Consolas,monospace;font-size:10px;letter-spacing:1.8px}h1{font-size:clamp(27px,3vw,47px);font-weight:900;letter-spacing:-2px;line-height:1.25;margin:13px 0 15px;max-width:780px}h1 span{color:var(--blue)}.heading p{font-size:12px;max-width:540px;color:#65645c;line-height:1.9}.heading .outline{position:absolute;right:0;bottom:0;font-size:10px;padding:8px 12px}.outline{border:1px solid #a8a79b;border-radius:0;color:#292b26;background:transparent}.outline:hover{background:#e8e5d9}.hero-art{position:absolute;right:2px;top:20px;width:148px;height:130px;z-index:-1;overflow:visible}.hero-art .tile{transform-origin:50% 50%;animation:tile-in .65s cubic-bezier(.16,1,.3,1) both}.hero-art .disk{transform-origin:100px 42px;animation:disk-in .8s cubic-bezier(.16,1,.3,1) both}.hero-art .ray{transform-origin:107px 93px;animation:ray-in .7s .15s cubic-bezier(.16,1,.3,1) both}.notice{margin:18px 0 24px;border:1px solid #c9c6bc;border-radius:0;background:#eeece2;color:#55564c;padding:10px 13px}.notice b,.notice button{color:#33372c}.notice button{font-weight:700}.metrics{gap:0;border:1px solid #252720;background:#fdfcf7;margin-bottom:24px}.metric{border:0;border-right:1px solid #252720;border-radius:0;background:transparent;min-height:144px;padding:20px 22px}.metric:last-child{border-right:0;background:var(--lime)}.metric label{color:#464940;font-size:11px;font-weight:650}.metric strong{font-size:43px;font-weight:900;letter-spacing:-2px;line-height:1.3;margin:12px 0 7px}.metric strong small{font-size:11px;letter-spacing:0;font-weight:400}.metric small{font-size:9px;color:#55584e}.metric small em{color:#0759ee;font-weight:700}.panel,.post{border-radius:0;border-color:#c9c6bc;background:#fdfcf7}.chartpanel{background:var(--blue);color:#fff;border:0;padding:27px;grid-template-columns:245px 1fr;min-height:208px;position:relative;overflow:hidden}.chartpanel:after{content:'↗';position:absolute;left:200px;bottom:-45px;font:900 140px Arial;color:#ffffff0a;pointer-events:none}.chartpanel .eyebrow{color:#c4d5ff;font-size:9px}.chartpanel h2{font-size:24px;font-weight:900;letter-spacing:-1px;margin:14px 0 8px}.chartpanel p{color:#d8e3ff;line-height:1.9;font-size:10px}.chartpanel .legend{color:#eff3ff}.legend i{background:var(--lime)}.legend i:nth-of-type(2){background:#fff}.legend i:nth-of-type(3){background:#89afff}.axis{color:#d4e0ff}.chart svg{height:130px}.chart svg path{stroke:#ffffff25}.chart svg path:nth-of-type(2){fill:#ffffff0d;stroke:none}.chart svg path:nth-of-type(3){stroke:var(--lime);stroke-width:3}.chart svg path:nth-of-type(4){stroke:#f9f8f1;stroke-width:2}.chart svg path:nth-of-type(5){stroke:#8badff;stroke-width:2}.sectionhead{margin:28px 0 16px}.sectionhead h2{font-size:21px;font-weight:900;letter-spacing:-.7px}.sectionhead h2 span{color:#66685d;font-size:10px}.sectionhead label,.sectionhead small{color:#66685d}select,input,textarea{border-radius:0;border-color:#c9c6bc;background:#fdfcf7;color:#33352c}select{padding:8px 10px}.filters{padding:12px 0;border-top:1px solid #c9c6bc;border-bottom:1px solid #c9c6bc;margin-bottom:20px}#platforms button{border-radius:0;color:#5b5c53;padding:7px 10px}#platforms button.selected{background:var(--ink);color:var(--lime);border-color:var(--ink)}.columns{gap:20px;grid-template-columns:minmax(0,1fr) 255px}.post{padding:23px;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s}.post:hover{transform:translateY(-3px);box-shadow:5px 5px 0 #d7d5ca}.icon{border-radius:50%;background:var(--yellow);color:#151515;width:36px;height:36px;font-weight:900}.post:nth-child(3n+2) .icon{background:var(--blue);color:white}.post:nth-child(3n) .icon{background:var(--lime)}.author{font-size:12px}.handle{color:#737469}.pill{border:1px solid #d2d2c8;background:transparent;border-radius:0;color:#5d6055;font-family:Consolas,monospace;font-size:9px}.post h3{font-size:17px;line-height:1.75;letter-spacing:-.4px;font-weight:800;margin-top:17px}.post p{color:#65665c;font-size:12px}.tags span{border-radius:0;background:#ecebe1;color:#626457;font-size:9px}.postbottom{border-color:#dcdcd1;color:#626457}.score{background:var(--yellow);color:#191919;border-radius:0;font-weight:800}.draft{color:var(--blue);font-weight:700}.save{color:#777b6b}.save.saved{color:var(--blue)}.rightcol .panel{padding:20px}.rightcol h3{font-weight:800;font-size:14px}.keyword{border-color:#dddcd1}.keyword span{color:#727566;font-family:Consolas,monospace}.keyword b{font-weight:700;font-size:12px}.keyword em{color:var(--blue);font-size:14px}.keyword:hover{color:var(--blue)}.tip{background:var(--yellow);border:1px solid #bdb248;border-radius:0;padding:24px}.tip>span{color:#4b4a1c;font-family:Consolas,monospace;font-size:9px}.tip h3{font-size:25px;font-weight:900;letter-spacing:-1px}.tip p{color:#565527;line-height:1.9}.tip button{color:#20210b;font-weight:bold;border-bottom:1px solid #292a16}.smallnote{color:#53584a}.smallnote p{color:#666a5b}.primary{background:var(--blue);color:white;border-radius:0}.primary:hover{background:#0345c3}.empty{border-radius:0;background:#fdfcf7;border-color:#acae9d;color:#505648}.row{border-color:#d6d8c9}footer{color:#65685a;border-color:#c9c6bc}dialog{border-radius:0;border:1px solid #191919;background:#f5f3ea;box-shadow:10px 10px 0 #19191955}dialog::backdrop{background:#171a1a66}#close{color:#222}#toast{border-radius:0;background:#191919;color:var(--lime);font-weight:650}.post,.metric{animation:card-in .4s cubic-bezier(.16,1,.3,1) both}.metric:nth-child(2){animation-delay:50ms}.metric:nth-child(3){animation-delay:100ms}.metric:nth-child(4){animation-delay:150ms}.post:nth-child(2){animation-delay:40ms}.post:nth-child(3){animation-delay:80ms}button{transition:transform .15s,color .15s,background .15s}button:active{transform:translateY(1px)}
@keyframes card-in{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}@keyframes tile-in{from{opacity:0;transform:translate(-18px,15px) rotate(-12deg)}to{opacity:1;transform:none}}@keyframes disk-in{from{opacity:0;transform:translateY(-22px) scale(.7)}to{opacity:1;transform:none}}@keyframes ray-in{from{opacity:0;transform:rotate(-65deg) scale(.6)}to{opacity:1;transform:none}}
@media(min-width:1500px){.content{padding-top:38px}.heading{min-height:210px}.hero-art{width:190px;height:160px;right:22px}.metric{padding:22px 27px}.metric strong{font-size:49px}}
@media(max-width:1100px){aside{width:184px;padding:24px 14px}main{margin-left:184px}.content{padding:25px}.heading{min-height:190px;padding-right:115px}.hero-art{width:110px;height:110px;top:25px}.metric{padding:16px 14px;min-height:150px}.metric strong{font-size:34px}.columns{grid-template-columns:1fr}.chartpanel{grid-template-columns:200px 1fr}.rightcol{grid-template-columns:1fr 1fr}.rightcol .smallnote{display:none}}
@media(max-width:800px){.metrics{grid-template-columns:1fr 1fr}.metric{min-height:128px}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid #252720}.metric strong{font-size:36px}.heading{min-height:205px}.chartpanel{grid-template-columns:1fr;gap:5px}.chart{margin-top:8px}.chartpanel .legend{margin-top:12px}.chartpanel:after{display:none}.chartpanel h2{margin-top:8px}.chartpanel p{margin-bottom:6px}}
@media(max-width:700px){aside{width:auto;padding:16px}.brand{font-size:28px}.brand b{font-size:27px}main{margin:0}.content{padding:22px 16px}.heading{min-height:225px;padding-right:0;align-items:flex-start;padding-top:15px}.heading>div{max-width:80%}.heading h1{font-size:30px;max-width:320px;letter-spacing:-1.6px}.heading p{max-width:300px;font-size:11px}.hero-art{width:78px;height:90px;top:35px;right:-3px;opacity:.9}.heading .outline{bottom:3px;right:0}.metric{padding:17px}.metric strong{font-size:36px}.chartpanel{padding:22px}.post{padding:19px}.post h3{font-size:16px}.rightcol{display:block}.rightcol .tip{margin-top:16px}.filters{gap:8px}.notice{margin-top:13px}.notice span{font-size:10px;color:#585a4c}.sectionhead h2{font-size:20px}footer{padding:18px 16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.post:hover{transform:none}}