.drawn-sheet{width:100%;position:relative}.drawn-sheet__stage{width:100%;min-height:120px;position:relative}.drawn-sheet{--drawn-sheet-bg:#fff}.drawn-sheet__stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.drawn-sheet__stage canvas:first-child{mix-blend-mode:multiply}.drawn-sheet__tb{letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab, var(--ink,#1e1e1c) 50%, transparent);flex-wrap:wrap;gap:0 1.4em;margin-top:14px;font-size:.6rem;display:flex}.drawn-sheet__tb b{color:var(--ink,#1e1e1c);font-weight:600}.drawn-sheet__bar{align-items:center;gap:14px;margin-top:12px;display:flex}.drawn-sheet__prog{background:color-mix(in oklab, var(--ink,#1e1e1c) 12%, transparent);flex:1;height:1px;overflow:hidden}.drawn-sheet__prog i{background:var(--sequence-green,#2e7d5b);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.drawn-sheet__replay{all:unset;cursor:pointer;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab, var(--ink,#1e1e1c) 60%, transparent);opacity:0;pointer-events:none;align-items:center;gap:8px;font-size:.6rem;transition:opacity .4s,color .2s;display:inline-flex}.drawn-sheet--ready .drawn-sheet__replay{opacity:1;pointer-events:auto}.drawn-sheet__replay:hover{color:var(--sequence-green,#2e7d5b)}.drawn-sheet__replay:focus-visible{outline:1px solid var(--sequence-green,#2e7d5b);outline-offset:4px}.drawn-sheet__replay svg{width:11px;height:11px}.drawn-sheet--compact .drawn-sheet__bar{margin-top:8px}.drawn-sheet--failed .drawn-sheet__bar{display:none}.drawn-sheet--dark .drawn-sheet__stage canvas:first-child{mix-blend-mode:screen}.drawn-sheet--dark .drawn-sheet__tb,.drawn-sheet--dark .drawn-sheet__replay{color:color-mix(in oklab, var(--paper,#f4f1e8) 60%, transparent)}.drawn-sheet--dark .drawn-sheet__tb b{color:var(--paper,#f4f1e8)}.drawn-sheet--dark .drawn-sheet__prog{background:color-mix(in oklab, var(--paper,#f4f1e8) 15%, transparent)}