:root{color-scheme:dark;--cream:#e5dac0;--muted:#a49b85;--brass:#695d43;--line:#494232;--amber:#dda435;--grain:url('./assets/ui-grain.svg')}*{box-sizing:border-box}body{margin:0;height:100dvh;display:grid;grid-template-columns:370px minmax(0,1fr);gap:16px;padding:18px;background:#080907;color:var(--cream);font:17px/1.4 Georgia,'Times New Roman',serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:-4px}[hidden]{display:none!important}
.animation-collection{display:block!important;margin:0 4px 10px;border:1px solid var(--brass)}.animation-collection>summary{padding:13px 15px;background:#dda43514}.animation-collection>summary strong{font-size:18px;font-weight:400}.animation-collection>summary small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}.collection-note{margin:10px 14px;font-size:11px;color:var(--muted)}.collection-actor{padding:9px 16px 5px;color:var(--amber);font-size:12px;letter-spacing:1px;text-transform:uppercase}.animation-collection .clip{padding:9px 13px}.animation-collection .clip strong{font-size:17px}
aside,header,.transport{background-image:var(--grain),linear-gradient(110deg,#181711,#090a08 65%,#171610);background-blend-mode:soft-light,normal}aside{min-height:0;display:flex;flex-direction:column;border:1px solid var(--brass);outline:1px solid #26251d;outline-offset:4px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--brass) #0c0c0a}.clapper{flex-shrink:0;height:21px;margin:5px 4px 7px;background-image:var(--grain),repeating-linear-gradient(135deg,var(--cream) 0 23px,#10110d 23px 45px);background-blend-mode:multiply;border-bottom:2px solid #393426;opacity:.85}.brand{position:relative;flex-shrink:0;min-height:190px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px 15px 25px;border:1px solid var(--brass);margin:0 4px 4px;box-shadow:inset 0 0 35px #0009;text-transform:uppercase;text-align:center;color:#dfd3b8;text-shadow:1px 2px #000,-1px 0 #928773;font:bold 38px/.98 Georgia,serif;letter-spacing:4px}.brand>span{display:block;transform:scaleY(1.25)}.brand>span:last-child{font-size:31px;letter-spacing:3px}.brand i{display:flex;align-items:center;width:76%;gap:8px;font:12px Georgia;margin:18px 0;line-height:1;color:#c6b89a}.brand i:before,.brand i:after{content:'';height:1px;background:linear-gradient(90deg,transparent,#c6b89a);flex:1}.brand i:after{transform:rotate(180deg)}
.section-heading{display:flex;justify-content:space-between;gap:12px;flex-shrink:0;text-transform:uppercase;letter-spacing:1.7px;font-size:15px;padding:11px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--brass);background:#0607058c}.section-heading>span:last-child{letter-spacing:1px}.section-heading.secondary{margin-top:23px;color:var(--muted);font-size:12px;padding:10px 18px}.search{display:flex;align-items:center;gap:10px;margin:11px 12px;border:1px solid #554c37;background:#05060499;padding:8px 11px;color:var(--muted)}.search input{width:100%;min-width:0;background:none;border:0;color:var(--cream);outline:none;font:14px Georgia}.search input::placeholder{color:#a49b85}.clip{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;text-align:left;width:calc(100% - 8px);margin:0 4px;border:1px solid #a87620;outline:1px solid #c79336;outline-offset:-4px;padding:14px 19px;color:#171207;background-image:var(--grain),linear-gradient(105deg,#e7b34a,#d2982c);background-blend-mode:multiply,normal;box-shadow:inset 0 0 15px #6c400849}.clip strong{display:block;font-size:24px;font-weight:400}.clip small{display:block;font:12px Georgia;margin-top:3px;color:#473519}.chevron{font:36px/1 Georgia;margin-left:12px}.clip:hover{filter:brightness(1.1)}
.menu-row{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:58px;padding:11px 24px;width:100%;text-align:left;color:var(--cream);background:transparent;border:0;border-bottom:1px solid var(--line);font-size:23px}.menu-row:hover{background:#dca23616;color:#f3e6c8}.menu-row small{font:12px Georgia;color:var(--muted)}.character{font-size:21px}details{border-bottom:1px solid var(--brass);font-size:17px}summary{cursor:pointer;padding:16px 24px;color:#c6baa0}summary:hover{color:var(--cream);background:#dca23610}.source-content{padding:0 24px 16px;color:var(--muted);font-size:12px}.source-content p{line-height:1.7}code{display:block;font:10px/1.6 monospace;overflow-wrap:anywhere}.quality-note{color:#c9a461}#empty{padding:0 20px;color:var(--muted);font-size:14px}footer{margin-top:auto;padding-top:35px;flex-shrink:0}.ready{display:flex;gap:13px;align-items:center;border-top:1px solid var(--brass);border-bottom:1px solid var(--line);padding:13px 21px;font-size:17px}.dot,.live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:inset 0 0 0 1px #f8d68a66}.keyboard{display:flex;gap:10px;align-items:center;padding:13px 19px;font-size:14px;color:#c7bda6}kbd{border:1px solid #a29578;border-radius:2px;box-shadow:inset 0 0 0 1px #343023;font:11px/1.2 monospace;padding:4px;color:var(--cream)}.prototype{margin-left:auto;font-size:8px;letter-spacing:1px;color:var(--muted)}
main{min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid var(--brass);outline:1px solid #26251d;outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 28px;border-bottom:1px solid var(--brass)}.eyebrow{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted)}h1{font-size:29px;font-weight:400;margin:3px 0 0;letter-spacing:.5px}.scene-info{text-align:right;font-size:18px}.scene-info small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;color:var(--muted)}#viewport{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#302f28 0,#181a16 50%,#0d0f0c 100%)}#viewport:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #0007}canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none}.viewer-label,.viewer-number{position:absolute;z-index:1;top:23px;font-size:10px;letter-spacing:2px;color:#a99e83;pointer-events:none}.viewer-label{left:27px}.live-dot{width:6px;height:6px;margin-right:9px}.viewer-number{right:27px;font-size:11px}.gestures{position:absolute;z-index:1;bottom:21px;left:0;right:0;text-align:center;color:#a69b83;font-size:12px;pointer-events:none}.gestures span{font-size:7px;margin:0 16px;color:#7f6e48}#loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--cream);font-size:20px}
.transport{padding:19px 26px 23px;border-top:1px solid var(--brass)}.play-row{display:flex;gap:15px;align-items:center}.play{width:48px;height:44px;border:1px solid #ae7c25;outline:1px solid #c79233;outline-offset:-4px;color:#1a1307;font-size:22px;background-image:var(--grain),linear-gradient(100deg,#e7b34a,#cf9125);background-blend-mode:multiply,normal}.play:hover{filter:brightness(1.15)}.now strong,.now small{display:block}.now strong{font-size:19px;font-weight:400}.now small{font-size:11px;color:var(--muted);margin-top:3px}.speed{margin-left:auto;font-size:14px;color:var(--muted)}select{margin-left:8px;border:1px solid var(--brass);border-radius:0;background:#14140f;color:var(--cream);padding:7px 12px;font-size:14px}.quiet{border:1px solid var(--brass);background:transparent;border-radius:0;color:var(--muted);font-size:15px;padding:8px 16px}.quiet.active{color:var(--cream);border-color:#a68a4c;box-shadow:inset 0 -2px var(--amber)}.quiet:hover{background:#dca23616}.timeline{display:flex;gap:22px;align-items:center;margin-top:19px}.timeline output{font:11px monospace;color:var(--muted);min-width:112px}.timeline input{min-width:0;width:100%;accent-color:var(--amber);height:4px;cursor:pointer}
@media(min-width:801px){body{overflow:hidden}}@media(max-height:850px) and (min-width:801px){.brand{min-height:155px;font-size:32px;padding:20px}.brand>span:last-child{font-size:27px}.brand i{margin:14px 0}.menu-row{min-height:48px;font-size:21px}.section-heading.secondary{margin-top:12px}footer{padding-top:15px}}@media(max-width:1100px) and (min-width:801px){body{grid-template-columns:310px minmax(0,1fr);gap:12px;padding:12px}.brand{font-size:31px}.brand>span:last-child{font-size:26px}.clip strong{font-size:21px}.menu-row{font-size:21px}header{padding:19px}.scene-info{font-size:15px}.transport{padding:18px}.now strong{font-size:16px}.gestures{font-size:10px}.gestures span{margin:0 8px}}@media(max-width:800px){body{height:auto;min-height:100dvh;grid-template-columns:1fr;padding:10px;gap:14px}aside{overflow:visible}.clapper{height:14px}.brand{min-height:130px;font-size:29px;padding:20px}.brand>span:last-child{font-size:24px}.brand i{margin:12px 0}.section-heading{font-size:12px;padding:9px 16px}.clip strong{font-size:22px}.section-heading.secondary,.character,details,footer{display:none}.menu-row{min-height:42px;font-size:17px;padding:8px 20px}.menu-row .chevron{font-size:23px}header{padding:15px 18px}h1{font-size:24px}.scene-info{font-size:14px}.scene-info small{font-size:8px;letter-spacing:1px}#viewport{height:58dvh;min-height:320px;flex:auto}.transport{padding:15px}.play-row{gap:10px}.now strong{font-size:16px}.speed{font-size:0}.speed select{font-size:12px;margin-left:0;padding:6px}.quiet{padding:7px 10px;font-size:13px}.play{width:39px;height:39px;flex-shrink:0}.timeline{gap:10px}.timeline output{font-size:9px;min-width:99px}.gestures{font-size:10px}.gestures span{margin:0 7px}}#hat[aria-pressed="true"] #hat-state{color:var(--amber)}#hat-state{text-transform:uppercase;letter-spacing:1.5px}
.copy-source{display:block;width:100%;text-align:left;background:#08090688;border:1px solid var(--line);color:var(--cream);padding:10px 12px;margin:10px 0;cursor:copy}.copy-source:hover{border-color:var(--amber);background:#dca23610}.copy-source code{font-size:11px}.copy-hint{display:block;margin-top:5px;font:10px Georgia,serif;color:var(--muted)}.copy-source.copied .copy-hint{color:var(--amber)}
#clip-list{max-height:32vh;min-height:84px;overflow-y:auto;flex-shrink:0;scrollbar-width:thin;scrollbar-color:var(--brass) #0c0c0a}.clip{margin-bottom:4px;outline:none;background:#0c0c0980;border-color:var(--line);color:var(--cream);box-shadow:none}.clip small{color:var(--muted)}.clip strong{font-size:20px}.clip.selected{background-image:var(--grain),linear-gradient(105deg,#e7b34a,#d2982c);background-blend-mode:multiply,normal;border-color:#a87620;outline:1px solid #c79336;outline-offset:-4px;color:#171207}.clip.selected small{color:#473519}.clip.unavailable{opacity:.65;cursor:not-allowed}.clip.unavailable strong{font-size:16px}.clip.unavailable small{color:#ce9c7d;font-size:10px}.blocked-clips{flex-shrink:0}.blocked-clips summary{font-size:13px;padding:9px 18px}.blocked-clips[open]{max-height:25vh;overflow-y:auto}.blocked-clips .clip{margin-bottom:2px;padding:10px 16px}@media(max-width:800px){#clip-list{max-height:250px}.blocked-clips{display:block}.play-row{flex-wrap:wrap}.now{flex:1;min-width:110px}}