/* Evan Burger Brand System: the materials. Every value comes from tokens.json; fallbacks are the Ice values. */

/* Scenes. A format that must keep its scene whatever the viewer's theme sets one of these on its root. */
.eb-ice{--field-top:#E6EDF3;--field-bottom:#A3B6C7;--board-dot:rgba(10,15,20,.15);--glass:rgba(255,255,255,.42);--glass-edge:rgba(255,255,255,1);--ink:#0A0F14;--ink-muted:#4A5560;--hard:#0A0F14;--tone:rgba(10,15,20,.55);--tape:rgba(226,235,243,.78);--pen:#1F45D3;--marker:#0A0F14;--shadow-glass:0 60px 120px -50px rgba(30,54,78,.6),0 18px 36px -24px rgba(30,54,78,.4);--u-a:60%;--u-b:100%}
.eb-obsidian{--field-top:#090D12;--field-bottom:#030508;--board-dot:rgba(242,245,248,.13);--glass:rgba(255,255,255,.055);--glass-edge:rgba(255,255,255,.6);--ink:#F2F5F8;--ink-muted:#A7AFB8;--hard:rgba(214,236,252,.6);--tone:rgba(214,236,252,.55);--tape:rgba(205,225,245,.2);--pen:#A9C2FF;--marker:#F2F5F8;--shadow-glass:0 70px 140px -50px rgba(0,0,0,.9),0 20px 40px -24px rgba(0,0,0,.7);--u-a:84%;--u-b:97%}
[data-theme="obsidian"]{--u-a:84%;--u-b:97%}

/* Ground: the field with the board's grid on it */
.eb-scene{position:relative; overflow:hidden; color:var(--ink,#0A0F14); font-family:var(--font-machine,"Geist","Helvetica Neue",Arial,sans-serif);
  background:radial-gradient(var(--board-dot,rgba(10,15,20,.15)) 1.2px, transparent 1.5px) 0 0/26px 26px,
    radial-gradient(60% 70% at 18% 8%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(70% 60% at 85% 90%, rgba(84,120,156,.35), transparent 70%),
    linear-gradient(170deg, var(--field-top,#E6EDF3), var(--field-bottom,#A3B6C7))}
.eb-obsidian.eb-scene,[data-theme="obsidian"] .eb-scene{background:radial-gradient(var(--board-dot) 1.2px, transparent 1.5px) 0 0/26px 26px,
    radial-gradient(60% 60% at 75% 20%, rgba(44,88,156,.42), transparent 70%),
    radial-gradient(50% 50% at 15% 85%, rgba(150,200,236,.16), transparent 70%),
    linear-gradient(170deg, var(--field-top), var(--field-bottom))}

/* Glass */
.eb-glass{position:relative; background:var(--glass,rgba(255,255,255,.42)); -webkit-backdrop-filter:blur(30px) saturate(160%); backdrop-filter:blur(30px) saturate(160%);
  border-radius:var(--radius-glass,28px); box-shadow:inset 0 1px 0 var(--glass-edge,#fff), var(--shadow-glass,0 60px 120px -50px rgba(30,54,78,.6)); padding:var(--space-4,52px)}
.eb-glass::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, var(--glass-edge,#fff), transparent 40%, transparent 60%, var(--glass-edge,#fff));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.7}

/* Paper fibre, shared by printouts and stickers */
.eb-print,.eb-sticker{--fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .38 0 0 0 0 .42 0 0 0 .5 -.18'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>")}

/* Printout: the machine's paper. Square-cut, torn at the bottom, taped on, halftone shadow */
.eb-print{position:relative; z-index:0; color:var(--paper-ink,#0A0F14); padding:24px 26px 30px; font-family:var(--font-machine,"Geist",sans-serif)}
.eb-print::before,.eb-print::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:var(--radius-print,3px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 2px),97% 100%,94% calc(100% - 4px),91% calc(100% - 1px),88% calc(100% - 5px),85% 100%,82% calc(100% - 3px),79% calc(100% - 1px),76% calc(100% - 4px),73% 100%,70% calc(100% - 2px),67% calc(100% - 5px),64% calc(100% - 1px),61% calc(100% - 3px),58% 100%,55% calc(100% - 4px),52% calc(100% - 2px),49% calc(100% - 5px),46% 100%,43% calc(100% - 3px),40% calc(100% - 1px),37% calc(100% - 4px),34% calc(100% - 2px),31% 100%,28% calc(100% - 5px),25% calc(100% - 2px),22% 100%,19% calc(100% - 3px),16% calc(100% - 1px),13% calc(100% - 4px),10% 100%,7% calc(100% - 2px),4% calc(100% - 5px),1% calc(100% - 1px),0 calc(100% - 3px))}
.eb-print::before{transform:translate(9px,9px); background-image:radial-gradient(circle, var(--tone,rgba(10,15,20,.55)) 1.2px, transparent 1.5px); background-size:4px 4px}
.eb-print::after{background:var(--fibre), var(--paper,#fff); background-size:180px 180px}
.eb-print .hd{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; font-size:13px; color:var(--paper-ink-muted,#5A6068); padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--paper-rule,rgba(10,15,20,.12))}
.eb-print .hd b{font-weight:500; color:var(--paper-ink,#0A0F14)}
.eb-tape{position:absolute; top:-13px; z-index:3; width:104px; height:28px; background:linear-gradient(180deg, rgba(255,255,255,.35), transparent 60%), var(--tape,rgba(226,235,243,.78));
  box-shadow:inset 0 0 0 1px rgba(10,15,20,.09), 0 3px 6px rgba(10,15,20,.12); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,88% 2%,92% 12%,96% 0,100% 10%,98% 30%,100% 52%,97% 72%,100% 92%,95% 100%,90% 90%,86% 100%,10% 98%,6% 88%,2% 100%,0 86%,3% 64%,0 44%,2% 24%)}
.eb-tape.l{left:34px; transform:rotate(-5deg)} .eb-tape.r{right:34px; transform:rotate(4deg)}

/* Sticker: Evan's own paper. Ink edge, solid shadow, sticks itself */
.eb-sticker{position:relative; color:var(--paper-ink,#0A0F14); background:var(--fibre), var(--paper,#fff); background-size:180px 180px; border:2px solid var(--paper-ink,#0A0F14);
  border-radius:var(--radius-sticker,14px); box-shadow:var(--shadow-hard,6px 6px 0 var(--hard,#0A0F14)); padding:22px var(--space-2,26px); font-family:var(--font-machine,"Geist",sans-serif)}
.eb-sticker h3,.eb-sketch h3{margin:0 0 6px; font-weight:500; font-size:21px; line-height:1.2; letter-spacing:-.02em}
.eb-sticker p{margin:0; color:var(--paper-ink-muted,#5A6068); font-size:16px; line-height:1.5}

/* Sketch: not decided. Only the rough outline EvanBurger.ink draws with kind "box" */
.eb-sketch{position:relative; padding:24px; color:var(--ink,#0A0F14)}
.eb-sketch p{margin:0; color:var(--ink-muted,#4A5560); font-size:16px; line-height:1.5}

/* Hand: his two tools */
.eb-pen{font-family:var(--font-pen,"Nanum Pen Script",cursive); color:var(--pen,#1F45D3); font-size:36px; line-height:.98; font-weight:400}
.eb-sticker .eb-pen,.eb-print .eb-pen{color:var(--pen-paper,#1F45D3)}
.eb-label,.eb-sticker p.eb-label,.eb-sketch p.eb-label{font-family:var(--font-pen,"Nanum Pen Script",cursive); color:var(--pen-paper,#1F45D3); font-size:32px; line-height:.9; margin:0 0 12px}
.eb-sketch p.eb-label{color:var(--pen,#1F45D3)}
.eb-marker{font-family:var(--font-marker,"Covered By Your Grace",cursive); color:var(--marker,#0A0F14); line-height:1.05}
.eb-sticker .eb-marker{color:var(--paper-ink,#0A0F14)}
.eb-due{font-family:var(--font-marker,"Covered By Your Grace",cursive); color:var(--due,#D8352B); font-size:22px; line-height:1; white-space:nowrap}
.eb-jw{display:inline-block; white-space:nowrap}
.eb-jl{display:inline-block; transform:translateY(var(--y,0)) rotate(var(--r,0deg)) scale(var(--s,1))}
.eb-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* Highlighter: points at one thing */
.eb-hi{background-image:linear-gradient(transparent var(--u-a,60%), var(--highlighter,#FFE066) var(--u-a,60%), var(--highlighter,#FFE066) var(--u-b,100%), transparent var(--u-b,100%));
  padding:0 .1em; margin:0 -.04em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.eb-print .eb-hi,.eb-sticker .eb-hi{--u-a:60%; --u-b:100%}

/* Machine type */
.eb-num{font-weight:200; letter-spacing:-.055em; line-height:.85; font-variant-numeric:tabular-nums}
.eb-num.on{font-weight:500}
.eb-placard{font-size:21px; letter-spacing:-.015em}
.eb-placard .k{font-weight:300; color:var(--ink-muted,#4A5560)} .eb-placard .k::after{content:":"}
.eb-placard .v{font-weight:500}
.eb-print .eb-placard .k{color:var(--paper-ink-muted,#5A6068)}

/* Ink overlay drawn by EvanBurger.ink */
.eb-ink{position:absolute; left:0; top:0; overflow:visible; pointer-events:none; z-index:8}
.eb-ink .mk{opacity:.94}