:root {
  --green:#32e13d;
  --red:#ff2c31;
  --yellow:#ffd326;
  --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050505;color:#fff;font-family:Arial,Helvetica,sans-serif}
body:before{
  content:"";position:fixed;inset:0;z-index:-5;
  background-image:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.12) 35%,rgba(0,0,0,.35) 65%,rgba(0,0,0,.88)),url("cotton-bg.jpg");
  background-size:cover;background-position:center;
}
body:after{content:"";position:fixed;inset:0;z-index:-4;background:linear-gradient(to right,rgba(0,0,0,.42),transparent 45%,rgba(0,0,0,.48))}
.app{width:100vw;height:100vh;display:grid;grid-template-rows:14vh 71vh 15vh;text-shadow:0 4px 16px rgba(0,0,0,.95)}
.top{display:flex;align-items:center;justify-content:space-between;padding:1.55vh 2.45vw;border-bottom:1px solid rgba(255,255,255,.52);background:rgba(0,0,0,.54)}
.title{display:flex;align-items:baseline;gap:2.4vw}
.title h1{margin:0;font-size:4.45vw;line-height:.92;font-weight:900;letter-spacing:.035em}
.title span{color:var(--yellow);font-size:1.9vw;font-weight:900;letter-spacing:.045em;white-space:nowrap}
.clock{text-align:right;line-height:1}
.clock-label{font-size:1.15vw;font-weight:900;letter-spacing:.09em;color:rgba(255,255,255,.86);margin-bottom:.55vh}
.clock-main{font-size:3.4vw;font-weight:900;letter-spacing:.03em}
.clock-main small{color:var(--yellow);font-size:1.35vw;margin-left:.34vw}
.clock-date{margin-top:.55vh;font-size:1.25vw;font-weight:800;color:rgba(255,255,255,.86)}
.quotes{display:grid;grid-template-rows:repeat(3,1fr)}
.row{position:relative;display:grid;grid-template-columns:29vw 42vw 29vw;align-items:center;padding:0 2.45vw;border-bottom:1px solid rgba(255,255,255,.44);overflow:hidden}
.row:before{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.48),rgba(0,0,0,.08),rgba(0,0,0,.46));opacity:.68;z-index:-1}
.row.flash-up{animation:flashUp .7s ease-out}.row.flash-down{animation:flashDown .7s ease-out}
@keyframes flashUp{0%{background:rgba(50,225,61,.22)}100%{background:transparent}}
@keyframes flashDown{0%{background:rgba(255,44,49,.24)}100%{background:transparent}}
.name h2{margin:0;font-size:4.1vw;line-height:.92;font-weight:900;letter-spacing:.04em}
.name p{margin:.9vh 0 0;color:var(--yellow);font-size:1.6vw;font-weight:900;letter-spacing:.055em}
.price{font-size:9.6vw;line-height:.83;font-weight:900;letter-spacing:-.025em;font-variant-numeric:tabular-nums;transition:transform .22s ease,opacity .22s ease}
.price.bump{transform:scale(1.025);opacity:.92}
.move{display:flex;align-items:center;justify-content:center;gap:2.05vw;font-variant-numeric:tabular-nums}
.move.up{color:var(--green)}.move.down{color:var(--red)}.move.flat{color:var(--yellow)}
.tri{width:0;height:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.95));animation:breathe 1.7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.tri.up{border-left:3.55vw solid transparent;border-right:3.55vw solid transparent;border-bottom:6.2vw solid var(--green)}
.tri.down{border-left:3.55vw solid transparent;border-right:3.55vw solid transparent;border-top:6.2vw solid var(--red)}
.tri.flat{width:5.2vw;height:1.05vw;border:none;background:var(--yellow);border-radius:99px}
.change strong{display:block;font-size:3.6vw;line-height:1.05;font-weight:900;letter-spacing:-.02em}
.footer{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(0,0,0,.84);border-top:1px solid rgba(255,255,255,.52)}
.footer-card{display:flex;align-items:center;gap:1.45vw;padding:0 2.65vw;border-right:1px solid rgba(255,255,255,.36)}
.footer-card:last-child{border-right:none}
.footer-icon{font-size:3.55vw;line-height:1;color:rgba(255,255,255,.82)}
.footer-icon.live{color:var(--green);text-shadow:0 0 18px rgba(50,225,61,.8)}
.footer-card b{display:block;font-size:1.62vw;font-weight:900;letter-spacing:.045em}
.footer-card span{display:block;margin-top:.55vh;color:var(--yellow);font-size:1.42vw;font-weight:900;letter-spacing:.025em}
.pulse{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}