@property --roll{syntax:"<number>";inherits:true;initial-value:0}.sheet{--sheet-paper:color-mix(in srgb, var(--surface-card) 88%, var(--color-gold-100));--sheet-ink:color-mix(in srgb, var(--text-ink) 84%, transparent);--sheet-rule:color-mix(in srgb, var(--text-ink) 48%, transparent);--sheet-quiet:var(--text-ink-3);--sheet-grid:color-mix(in srgb, var(--accent) 12%, transparent);--sheet-stamp:var(--color-gold-700);--roll:0;margin:0;transition:--roll 1.1s cubic-bezier(.65,0,.35,1);position:relative}.dark .sheet{--sheet-paper:color-mix(in srgb, var(--surface-card) 90%, var(--color-gold-800));--sheet-ink:color-mix(in srgb, var(--text-ink) 80%, transparent);--sheet-rule:color-mix(in srgb, var(--text-ink) 40%, transparent);--sheet-quiet:var(--text-ink-3);--sheet-grid:color-mix(in srgb, var(--accent) 9%, transparent);--sheet-stamp:var(--color-gold-300)}.sheet[data-rolled]{--roll:1;transition-duration:1.9s;transition-timing-function:cubic-bezier(.55,0,.3,1)}.sheet__board{aspect-ratio:4/3;border-radius:var(--radius-card);background:var(--surface-invert);box-shadow:0 0 0 1px color-mix(in srgb, var(--border-subtle) 80%, transparent), 0 18px 40px -22px #2b221880;isolation:isolate;position:relative;overflow:hidden;container-type:inline-size}.dark .sheet__board{box-shadow:0 0 0 1px var(--border-subtle), 0 18px 44px -20px #000c}.sheet__surface{--rail:clamp(7px, 1.3cqw, 12px);--margin:clamp(8px, 2.3cqw, 20px);--tube-max:clamp(9px, 2.5cqw, 22px);--cut:calc(var(--rail) + (1 - var(--roll)) * (100% - var(--rail)));position:absolute;inset:0}.sheet__made:not([data-current]){opacity:0}.sheet__paper{z-index:1;background-color:var(--sheet-paper);background-image:linear-gradient(var(--sheet-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sheet-grid) 1px, transparent 1px);background-size:2.5cqw 2.5cqw;background-position:var(--margin) var(--margin);clip-path:inset(0 0 calc(100% - var(--cut)) 0);position:absolute;inset:0}.sheet__lines{background-color:var(--sheet-ink);clip-path:inset(var(--margin));position:absolute;inset:0;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.sheet__lines:not([data-current]){visibility:hidden}.sheet__frame{inset:var(--margin);border:1px solid var(--sheet-rule);box-shadow:inset 0 0 0 2px var(--sheet-paper), inset 0 0 0 3px color-mix(in srgb, var(--sheet-rule) 60%, transparent);position:absolute}.sheet__zones>span{color:var(--sheet-quiet);font-family:var(--font-plex-mono), ui-monospace, monospace;font-size:clamp(5px,.95cqw,8.5px);line-height:1;position:absolute;translate:-50% -50%}.sheet__zones>[data-side=left]{left:calc(var(--margin) / 2);top:calc(var(--margin) + var(--at) * (100% - 2 * var(--margin)))}.sheet__zones>[data-side=right]{left:calc(100% - var(--margin) / 2);top:calc(var(--margin) + var(--at) * (100% - 2 * var(--margin)))}.sheet__zones>[data-side=bottom]{top:calc(100% - var(--margin) / 2);left:calc(var(--margin) + var(--at) * (100% - 2 * var(--margin)))}.sheet__block{left:calc(var(--margin) + 3px);top:calc(var(--margin) + 3px);background:var(--sheet-paper);border-bottom:1px solid var(--sheet-rule);border-right:1px solid var(--sheet-rule);width:clamp(9.5rem,44cqw,20rem);color:var(--sheet-ink);font-family:var(--font-plex-mono), ui-monospace, monospace;letter-spacing:.04em;text-transform:uppercase;grid-template-columns:repeat(3,minmax(0,1fr));font-size:clamp(6px,1.2cqw,10.5px);font-weight:600;line-height:1.25;display:grid;position:absolute}.sheet__cell{border-bottom:1px solid color-mix(in srgb, var(--sheet-rule) 70%, transparent);border-inline-start:1px solid color-mix(in srgb, var(--sheet-rule) 70%, transparent);flex-direction:column;gap:.15em;min-width:0;padding:.5em .65em .45em;display:flex}.sheet__cell:first-child,.sheet__cell--title,.sheet__cell:nth-child(4){border-inline-start:0}.sheet__cell:nth-child(n+4){border-bottom:0}.sheet__cell--brand{letter-spacing:.22em;flex-direction:row;grid-column:span 2;align-items:center;gap:.5em}.sheet__cell--title{grid-column:1/-1}.sheet__x{flex:none;width:1.35em;height:auto}.sheet__key{color:var(--sheet-quiet);letter-spacing:.12em;font-size:.78em;font-weight:400}.sheet__value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sheet__stamp{box-shadow:inset 0 0 0 .18em var(--sheet-paper), inset 0 0 0 .3em currentColor;color:var(--sheet-stamp);visibility:hidden;border:.2em solid;border-radius:.4em;justify-items:center;gap:.15em;padding:.5em .85em .45em;font-size:1.6em;line-height:1;display:grid;position:absolute;bottom:-3.3em;right:-3.9em;rotate:-9deg;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");-webkit-mask-size:160px 80px;mask-size:160px 80px}.sheet__stamp-word{letter-spacing:.16em;font-size:1.15em;font-weight:600}.sheet__stamp-date{letter-spacing:.14em;font-size:.72em}.sheet[data-stamped] .sheet__stamp{visibility:visible;animation:.34s cubic-bezier(.3,0,.2,1) both sheet-stamp}@keyframes sheet-stamp{0%{opacity:0;scale:1.55}45%{opacity:1}58%{scale:.95}78%{scale:1.02}to{opacity:1;scale:1}}.sheet[data-stamped] .sheet__paper{animation:.28s ease-out .15s sheet-give}@keyframes sheet-give{35%{translate:0 1.5px}}.sheet__curl{inset-inline:0;top:calc(var(--cut) - 2 * var(--tube-max));height:calc(2 * var(--tube-max));opacity:clamp(0, calc(var(--roll) * 30), 1);background:linear-gradient(#0000,#00000029);position:absolute}.sheet__roll{--tube:calc(sqrt(var(--roll)) * var(--tube-max));z-index:2;inset-inline:-2px;top:calc(var(--cut) - var(--tube) / 2);height:var(--tube);background:linear-gradient(180deg, color-mix(in srgb, var(--sheet-paper) 62%, #000) 0%, var(--sheet-paper) 26%, color-mix(in srgb, var(--sheet-paper) 55%, #fff) 40%, var(--sheet-paper) 56%, color-mix(in srgb, var(--sheet-paper) 70%, #000) 88%, color-mix(in srgb, var(--sheet-paper) 55%, #000) 100%);box-shadow:0 calc(var(--tube) * .45) calc(var(--tube) * .7) -2px #00000080;opacity:clamp(0, calc(var(--roll) * 40), 1);pointer-events:none;border-radius:9999px;position:absolute}.sheet__rail{inset-inline:0;z-index:3;height:var(--rail);background:radial-gradient(circle at 2.4% 50%, #ffffffb3 0 .75px, #3c2c128c 1.6px 2.4px, transparent 2.9px), radial-gradient(circle at 97.6% 50%, #ffffffb3 0 .75px, #3c2c128c 1.6px 2.4px, transparent 2.9px), linear-gradient(180deg, var(--color-gold-200) 0%, var(--color-gold-400) 38%, var(--color-gold-600) 72%, var(--color-gold-800) 100%);pointer-events:none;position:absolute;top:0;box-shadow:inset 0 1px #fff6,0 2px 5px -1px #00000073}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.sheet-card:hover .sheet[data-mode=card][data-ready]{--roll:0;transition-duration:.95s;transition-delay:.14s}}.sheet__controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1rem;display:flex}.sheet__pieces{flex-wrap:wrap;gap:.4rem;display:flex}.sheet__piece{background:var(--surface-card);color:var(--text-ink-2);box-shadow:inset 0 0 0 1px var(--border-subtle);cursor:pointer;border-radius:9999px;padding:.4rem .75rem;font-size:.75rem;font-weight:500;transition:background-color .3s cubic-bezier(.22,1,.36,1),color .3s cubic-bezier(.22,1,.36,1)}.sheet__piece:hover{color:var(--text-ink)}.sheet__piece[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);box-shadow:none}.sheet__caption{color:var(--text-ink-2);font-size:.875rem}.sheet__modes{background:var(--surface-hover);border-radius:9999px;padding:3px;display:inline-flex;box-shadow:inset 0 1px 2px #2b22181f}.sheet__mode{color:var(--text-ink-2);cursor:pointer;border-radius:9999px;padding:.35rem .85rem;font-size:.75rem;font-weight:500;transition:background-color .3s cubic-bezier(.22,1,.36,1),color .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)}.sheet__mode[aria-pressed=true]{background:var(--surface-card);color:var(--text-ink);box-shadow:inset 0 1px #fff9,0 1px 3px #2b221833}.dark .sheet__mode[aria-pressed=true]{box-shadow:inset 0 1px #ffffff0f,0 1px 3px #00000080}@container (max-width:380px){.sheet__zones{display:none}}@media (prefers-reduced-motion:reduce){.sheet:not([data-pinned]){--roll:1}.sheet,.sheet[data-rolled]{transition:none}}@media (scripting:none){.sheet{--roll:1}}.sheet__block:lang(ar){font-family:var(--font-plex-mono), var(--font-alexandria), ui-monospace, monospace;font-size:clamp(6.5px,1.3cqw,11.5px);line-height:1.45}.sheet__stamp:lang(ar) .sheet__stamp-word{font-family:var(--font-alexandria), var(--font-plex-mono), sans-serif}
