:root{
  --paper:#f4f4f1;
  --ink:#0d0d0d;
  --green:#57ff09;
  --muted:#d9d9d4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.95), rgba(255,255,255,0) 32%),
    linear-gradient(180deg,#f7f7f5 0%,#efefec 100%);
  font-family:"Segoe Print","Comic Sans MS",cursive;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.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}
.topbar{
  width:min(1480px,calc(100% - 44px));
  margin:0 auto;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:10;
}
.brand{font-size:clamp(22px,2vw,32px);transform:rotate(-1.4deg);font-weight:600}
.nav{display:flex;gap:28px;font-size:19px;align-items:center}
.nav a{position:relative;transition:transform .16s ease}
.nav a:hover{transform:rotate(-3deg) translateY(-2px)}
.nav a::after{content:"";position:absolute;left:2px;right:8px;bottom:-7px;height:3px;background:var(--green);transform:scaleX(0) rotate(-1deg);transform-origin:left;transition:transform .15s ease}
.nav a:hover::after{transform:scaleX(1) rotate(-1deg)}
.hero{
  width:min(1580px,100%);
  margin:0 auto;
  position:relative;
  padding:0 18px;
}
.hero-art{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.scribble{position:absolute;font-size:clamp(14px,1.5vw,24px);opacity:.6;pointer-events:none}
.note-a{left:8%;top:46%;transform:rotate(-8deg)}
.note-b{right:7%;bottom:12%;transform:rotate(5deg);color:#111}
.trade-block{width:min(1140px,calc(100% - 36px));margin:26px auto 72px}
.rough-box{position:relative;background:rgba(255,255,255,.35);border:3px solid var(--ink);border-radius:14px}
.rough-box::before{content:"";position:absolute;inset:5px -6px -5px 5px;border:2px solid rgba(13,13,13,.42);border-radius:11px;pointer-events:none;transform:rotate(.15deg)}
.ca-row{display:flex;align-items:center;gap:14px;padding:12px 16px 13px;transform:rotate(-.15deg)}
.ca-label{font-size:22px;font-weight:700;white-space:nowrap}
.ca-value{border:0;background:transparent;min-width:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:6px 6px;text-align:left}
#caText{font-family:"Courier New",monospace;font-size:clamp(14px,1.65vw,21px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy-mark{font-size:27px;line-height:1;transform:rotate(2deg)}
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.doodle-btn{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border:3px solid var(--ink);
  border-radius:17px 13px 16px 12px;
  background:#fafaf7;
  box-shadow:4px 5px 0 var(--ink);
  font-size:clamp(16px,1.45vw,20px);
  transition:transform .13s ease,box-shadow .13s ease,background .13s ease;
}
.doodle-btn:nth-child(2){transform:rotate(.35deg)}
.doodle-btn:nth-child(3){transform:rotate(-.4deg)}
.doodle-btn:nth-child(4){transform:rotate(.2deg)}
.doodle-btn:hover{background:#fff;transform:translate(-1px,-2px) rotate(-.5deg);box-shadow:6px 7px 0 var(--ink)}
.doodle-btn:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--ink)}
.doodle-btn.green .icon{color:#000;background:var(--green)}
.icon{width:31px;height:31px;border:2px solid var(--ink);border-radius:9px;display:grid;place-items:center;font-family:Arial,sans-serif;font-weight:900;background:white;transform:rotate(-4deg)}
.chart-section{width:min(1320px,calc(100% - 36px));margin:0 auto 80px}
.section-heading{font-size:clamp(30px,4vw,54px);display:inline-flex;flex-direction:column;align-items:flex-start;margin:0 0 24px 12px;transform:rotate(-1deg)}
.green-stroke{width:106%;height:9px;background:var(--green);border-radius:50%;transform:rotate(-1deg);margin-top:-2px}
.chart-shell{height:560px;padding:14px;overflow:hidden;background:#f8f8f5}
#dexFrame{width:100%;height:100%;border:0;border-radius:7px;display:none;background:#fff}
.chart-fallback{position:absolute;inset:42px 34px 36px;display:flex;align-items:flex-end;gap:3.5%;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:0 2.5% 4%;overflow:hidden}
.c{display:block;width:24px;background:var(--green);border:3px solid var(--ink);position:relative;z-index:2}
.c::before,.c::after{content:"";position:absolute;left:50%;width:3px;background:var(--ink);transform:translateX(-50%)}
.c::before{bottom:100%;height:18px}.c::after{top:100%;height:14px}
.c1{height:12%}.c2{height:17%}.c3{height:14%}.c4{height:24%}.c5{height:30%}.c6{height:41%}.c7{height:49%}.c8{height:61%}.c9{height:70%}.c10{height:82%}.c11{height:65%}.c12{height:91%}
.trend-line{position:absolute;left:8%;bottom:17%;width:82%;height:5px;background:var(--green);transform:rotate(-17deg);transform-origin:left;border-radius:50%;opacity:.75}
.footer-art{width:min(1100px,calc(100% - 36px));margin:0 auto 70px;display:grid;grid-template-columns:minmax(280px,560px) 1fr;align-items:center;gap:70px}
.footer-art img{width:100%;border:3px solid var(--ink);border-radius:8px;box-shadow:8px 9px 0 var(--ink);transform:rotate(-1deg)}
.footer-copy{font-size:clamp(34px,5vw,70px);line-height:1.08;transform:rotate(2deg)}
.footer-copy p{margin:.18em 0}.footer-copy p:last-child{display:inline-block;border-bottom:9px solid var(--green)}
footer{width:min(1450px,calc(100% - 40px));margin:0 auto;padding:25px 8px 35px;border-top:3px solid var(--ink);display:flex;justify-content:space-between;align-items:center;font-size:20px}
.tiny-smile{font-family:Arial,sans-serif;font-size:32px}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px) rotate(-2deg);background:var(--green);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:9px 18px;font-weight:700;opacity:0;pointer-events:none;transition:.18s ease;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0) rotate(-2deg)}
@media (max-width:900px){
  .topbar{height:66px;width:calc(100% - 28px)}
  .nav{gap:16px;font-size:16px}
  .hero{padding:0 7px}
  .scribble{display:none}
  .trade-block{margin-top:14px}
  .actions{grid-template-columns:repeat(2,1fr)}
  .chart-shell{height:450px}
  .footer-art{grid-template-columns:1fr;gap:34px}
  .footer-copy{text-align:center}
}
@media (max-width:560px){
  .brand{font-size:20px}
  .nav a:first-child{display:none}
  .hero{margin-top:8px}
  .hero-art{width:156%;max-width:none;margin-left:-29%}
  .trade-block{width:calc(100% - 24px);margin-bottom:54px}
  .ca-row{padding:9px 10px}.ca-label{font-size:18px}
  #caText{font-size:13px}
  .actions{grid-template-columns:1fr;gap:12px}
  .doodle-btn{min-height:54px}
  .chart-section{width:calc(100% - 24px);margin-bottom:55px}
  .chart-shell{height:360px;padding:9px}
  .chart-fallback{inset:36px 19px 30px;gap:2.3%}.c{width:14px;border-width:2px}
  .footer-art{width:calc(100% - 28px);margin-bottom:46px}.footer-art img{box-shadow:5px 6px 0 var(--ink)}
  footer{width:calc(100% - 24px);font-size:16px}
}