/* ===== Realistic green chalkboard ===== */
.board{--wood:#8B5A2B;--wood2:#6B4220;position:relative;border-radius:10px;padding:22px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27600%27%20height%3D%27120%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.012%20.55%27%20numOctaves%3D%273%27%20seed%3D%274%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.25%20%200%200%200%200%20.12%20%200%200%200%200%20.04%20%200%200%200%20.55%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27/%3E%3C/svg%3E"),linear-gradient(180deg,#9C6733,#7A4C22 55%,#6B4220);
  box-shadow:0 30px 60px -25px rgba(40,20,5,.55),inset 0 1px 0 rgba(255,220,170,.35),inset 0 -2px 0 rgba(0,0,0,.25)}
.board .frame-v{position:absolute;top:0;bottom:0;width:22px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27600%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.55%20.012%27%20numOctaves%3D%273%27%20seed%3D%277%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.25%20%200%200%200%200%20.12%20%200%200%200%200%20.04%20%200%200%200%20.55%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27/%3E%3C/svg%3E"),linear-gradient(90deg,#8E5C2C,#71461F);}
.board .frame-v.l{left:0;border-radius:10px 0 0 10px}.board .frame-v.r{right:0;border-radius:0 10px 10px 0}
.slate{position:relative;z-index:1;border-radius:4px;overflow:hidden;min-height:300px;padding:clamp(22px,4vw,44px) clamp(22px,4vw,52px) clamp(30px,4vw,48px);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27400%27%20height%3D%27400%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.65%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.09%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"),
   radial-gradient(60% 40% at 25% 30%,rgba(255,255,255,.07),transparent 70%),
   radial-gradient(45% 35% at 75% 65%,rgba(255,255,255,.06),transparent 70%),
   radial-gradient(120% 90% at 50% 40%,#2F5242,#203A2E 70%,#1A3126);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),inset 0 0 60px rgba(0,0,0,.45)}
.slate::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(closest-side,rgba(240,240,230,.10),transparent) 8% 70%/340px 120px no-repeat,
   radial-gradient(closest-side,rgba(240,240,230,.08),transparent) 70% 18%/420px 110px no-repeat,
   radial-gradient(closest-side,rgba(240,240,230,.07),transparent) 88% 88%/300px 90px no-repeat;
  transform:rotate(-4deg)}
.chalk{font-family:var(--f-chalk);color:transparent;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.55%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"),#F3F1E7;-webkit-background-clip:text;background-clip:text;text-shadow:0 0 1px rgba(243,241,231,.25)}
.chalk.y{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.55%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"),#F7E27A;-webkit-background-clip:text;background-clip:text}
.chalk.p{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.55%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"),#F6A9C0;-webkit-background-clip:text;background-clip:text}
.chalk.o{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.55%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"),#FFB067;-webkit-background-clip:text;background-clip:text}
.cline{height:3px;border-radius:3px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.55%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"),rgba(243,241,231,.85);opacity:.85}
.tray{position:relative;z-index:2;height:16px;margin:12px -22px -22px;border-radius:0 0 10px 10px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27600%27%20height%3D%27120%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.012%20.55%27%20numOctaves%3D%273%27%20seed%3D%274%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.25%20%200%200%200%200%20.12%20%200%200%200%200%20.04%20%200%200%200%20.55%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27/%3E%3C/svg%3E"),linear-gradient(180deg,#A36B35,#6E4320);box-shadow:0 6px 10px -4px rgba(0,0,0,.4)}
.tray .stick{position:absolute;top:-7px;height:9px;border-radius:3px;box-shadow:0 2px 2px rgba(0,0,0,.35)}
.tray .s1{left:14%;width:52px;background:linear-gradient(#fff,#e7e4da)}
.tray .s2{left:21%;width:34px;background:linear-gradient(#FBEA8C,#E9CF55);transform:rotate(-3deg)}
.tray .s3{left:26%;width:28px;background:linear-gradient(#F8B8CC,#E58FA9)}
.tray .sponge{position:absolute;top:-16px;right:12%;width:96px;height:20px;border-radius:5px;background:linear-gradient(180deg,#C7905A 0 45%,#3A3A40 45% 100%);box-shadow:0 3px 4px rgba(0,0,0,.4)}