.era-timeline{--thread-pad:0px;--thread-x:.625rem;--era-py:2.5rem;--era-icon:3.5rem;position:relative}@media (min-width:48rem){.era-timeline{--era-py:3.5rem;--era-icon:4rem}}.era-timeline [data-era]{padding-block:var(--era-py);padding-left:1.75rem}@media (min-width:48rem){.era-timeline [data-era]{padding-left:0}.era-timeline [data-era]>:not(.era-node):first-of-type{padding-left:1.75rem}}.era-timeline:before{content:"";top:0;bottom:0;left:calc(var(--thread-pad) + var(--thread-x) - .5px);background:var(--rule);width:1px;position:absolute}.era-node{top:calc(var(--era-py) + 1px + var(--inset-card) + var(--era-icon) / 2 - 3.5px);left:calc(var(--thread-x) - 3.5px);border:1px solid var(--ink-3);background:var(--ground);border-radius:50%;width:7px;height:7px;position:absolute}.era-thread{top:0;bottom:0;left:calc(var(--thread-pad) + var(--thread-x) - 1rem);pointer-events:none;width:auto;height:100%;position:absolute;right:0;overflow:visible}.era-thread-line{fill:none;stroke:var(--gold);stroke-width:1px;vector-effect:non-scaling-stroke}.era-thread-node{fill:var(--gold)}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.era-thread{animation:linear both era-thread-draw;animation-timeline:view(60% 40%);animation-range:cover}}}@keyframes era-thread-draw{0%{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}}.era-card{padding:var(--inset-card);border:1px solid var(--rule);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-soft);position:relative}.era-icon{width:var(--era-icon);height:var(--era-icon);border-radius:var(--radius-sm);background:var(--pastel,var(--ground));color:var(--pastel-ink);place-items:center;display:grid}.era-index{font-size:var(--text-xl);letter-spacing:-.04em;color:var(--rule);font-weight:600;line-height:1}.era-live{background:var(--gold);border-radius:50%;width:.5rem;height:.5rem;position:relative}@media (prefers-reduced-motion:no-preference){.era-live:after{content:"";border-radius:inherit;background:var(--gold);opacity:0;animation:era-live 2.4s var(--ease-out) infinite;animation-play-state:var(--loop-play,running);position:absolute;inset:0}}@keyframes era-live{0%{opacity:.6;scale:1}70%,to{opacity:0;scale:2.8}}.era-chip{height:2rem;padding-inline:var(--inset-pill);border:1px solid var(--rule);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-2);white-space:nowrap;border-radius:999px;align-items:center;display:inline-flex}:lang(th) .era-chip{font-family:var(--font-sans)}@media print{.era-card{box-shadow:none}.era-thread,.era-timeline:before,.era-node{display:none}.era-timeline{padding-left:0}}
.notes-board{border:1px solid var(--rule);border-radius:var(--radius-card);background:radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--ink-3) 38%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--surface);padding:clamp(1.75rem,1rem + 3vw,4rem) clamp(1.25rem,.5rem + 3vw,4rem);position:relative}.notes-list{justify-items:center;gap:1.75rem;display:grid}@media (min-width:48rem){.notes-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(1.25rem,3vw,3rem);padding-bottom:2rem}.notes-list>:nth-child(2n){margin-top:2.5rem}}@media (min-width:72rem){.notes-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.25rem,2vw,2.25rem)}.notes-list>:nth-child(4n+3){margin-top:.75rem}}.note{--x:0px;--y:0px;--drag-tilt:0deg;--lift:1;width:100%;max-width:23rem;padding:var(--inset-card);padding-top:calc(var(--inset-card) + .5rem);background:var(--pastel);color:var(--pastel-ink);transform:translate(var(--x), var(--y)) rotate(calc(var(--tilt) + var(--drag-tilt))) scale(var(--lift));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .64s cubic-bezier(.34, 1.4, .64, 1), box-shadow var(--dur-2) var(--ease-out);touch-action:auto;border-radius:.375rem;position:relative;box-shadow:0 1px 1px var(--lightningcss-light,#1c140c14)var(--lightningcss-dark,#00000059),0 14px 24px -14px var(--lightningcss-light,#1c140c59)var(--lightningcss-dark,#000000b3);box-shadow:0 1px 1px var(--lightningcss-light,lab(7.19201% 3.16643 5.67935/.08))var(--lightningcss-dark,lab(0% 0 0/.35)),0 14px 24px -14px var(--lightningcss-light,lab(7.19201% 3.16643 5.67935/.35))var(--lightningcss-dark,lab(0% 0 0/.7))}.note:focus-visible{outline-offset:5px;border-radius:.375rem}.note:after{content:"";border-bottom-right-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#0000 50%,var(--lightningcss-light,#1c140c12)var(--lightningcss-dark,#00000038) 50%);background:linear-gradient(135deg,#0000 50%,var(--lightningcss-light,lab(7.19201% 3.16643 5.67935/.07))var(--lightningcss-dark,lab(0% 0 0/.22)) 50%);width:2.75rem;height:2.75rem;position:absolute;inset:auto 0 0 auto}.note-tape{clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,2% 96%,0 50%);background:repeating-linear-gradient(90deg,#0000 0 6px,var(--lightningcss-light,#ffffff40)var(--lightningcss-dark,#ffffff0d) 6px 12px),var(--lightningcss-light,#fffbf49e)var(--lightningcss-dark,#d4cdbf33);background:repeating-linear-gradient(90deg,#0000 0 6px,var(--lightningcss-light,lab(100% 0 0/.25))var(--lightningcss-dark,lab(100% 0 0/.05)) 6px 12px),var(--lightningcss-light,lab(98.8801% .286222 3.81292/.62))var(--lightningcss-dark,lab(82.6758% .650227 7.68034/.2));width:5.5rem;height:1.5rem;position:absolute;top:-.7rem;left:50%;translate:-50%;rotate:-4deg;box-shadow:0 1px 2px var(--lightningcss-light,#1c140c1f)var(--lightningcss-dark,#0000004d);box-shadow:0 1px 2px var(--lightningcss-light,lab(7.19201% 3.16643 5.67935/.12))var(--lightningcss-dark,lab(0% 0 0/.3))}.note:nth-child(2n) .note-tape{rotate:5deg}.note-art{height:4.5rem}.note{font-family:var(--font-hand)}.note h3{color:var(--pastel-ink)}@media (hover:hover) and (pointer:fine){.note{cursor:grab;touch-action:none}.note:hover{--lift:1.02}.note[data-dragging]{cursor:grabbing}}.note[data-dragging]{--lift:1.05;transition:box-shadow var(--dur-2) var(--ease-out);box-shadow:0 2px 4px var(--lightningcss-light,#1c140c1a)var(--lightningcss-dark,#0006),0 30px 48px -18px var(--lightningcss-light,#1c140c6b)var(--lightningcss-dark,#000c);box-shadow:0 2px 4px var(--lightningcss-light,lab(7.19201% 3.16643 5.67935/.1))var(--lightningcss-dark,lab(0% 0 0/.4)),0 30px 48px -18px var(--lightningcss-light,lab(7.19201% 3.16643 5.67935/.42))var(--lightningcss-dark,lab(0% 0 0/.8))}.notes-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;margin-top:1rem;display:flex}.notes-hint{font-size:var(--text-sm);color:var(--ink-2);align-items:center;gap:.5rem;display:inline-flex}.notes-reset{height:2.25rem;padding-inline:var(--inset-pill);border:1px solid var(--rule-strong);font-size:var(--text-sm);transition:background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);border-radius:999px;align-items:center;gap:.5rem;margin-inline-start:auto;font-weight:500;display:inline-flex}.notes-reset:hover{background:var(--ink);color:var(--ground)}.notes-reset[data-idle]{border-color:var(--rule);color:var(--ink-2)}.notes-reset:not([data-idle]){border-color:var(--ink);background:var(--ink);color:var(--ground)}.notes-reset:not([data-idle]):hover{background:color-mix(in oklch, var(--ink) 86%, var(--ground))}.notes-hint-fine{display:none}@media (hover:hover) and (pointer:fine){.notes-hint-fine{display:inline}.notes-hint-touch{display:none}}@media not ((hover:hover) and (pointer:fine)){.notes-reset[data-idle]{display:none}}@media (prefers-reduced-motion:reduce){.note{transition:none}}@media print{.note{box-shadow:none;transform:none!important}.notes-bar{display:none}}