*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#eee9df;color:#292820;font:14px/1.5 system-ui,sans-serif}button,a,input,select,textarea{font:inherit}button,a{color:inherit}a{text-decoration:none}button{border:0;background:transparent;cursor:pointer;padding:9px 12px}button:focus-visible,a:focus-visible,#stage:focus-visible{outline:2px solid #ad343f;outline-offset:3px}button:hover{color:#a52d3b}button:disabled{opacity:.5;cursor:wait}.edge{position:fixed;left:0;right:0;display:flex;align-items:center;gap:18px;padding:16px 28px;z-index:20;background:#eee9df}header{top:0}header a{font-size:12px}h1{font:400 16px Georgia,serif;position:absolute;left:50%;transform:translateX(-50%);margin:0}header #add{margin-left:auto;background:#292820;color:#eee9df;padding:11px 18px}header #add span{padding-left:18px}footer{bottom:0;min-height:56px;font-size:11px;gap:12px}footer #about{margin-left:auto}#stage{position:fixed;inset:76px 0 56px;overflow:hidden;touch-action:none;outline:none;cursor:grab}#stage.panning{cursor:grabbing}#world{position:absolute;transform-origin:0 0;will-change:transform}.piece{position:absolute;width:280px;cursor:pointer;outline:none;touch-action:none}.piece:focus-visible{outline:1px solid #ad343f;outline-offset:10px}.piece.is-mine{cursor:move}.piece img,.piece video{display:block;width:100%;height:auto;max-height:600px;object-fit:contain}.piece audio{width:100%}.piece pre{white-space:pre-wrap;overflow-wrap:anywhere;font:400 23px/1.5 Georgia,serif;margin:0}.piece .authored-title{font:500 16px/1.3 Georgia,serif;margin:0 0 10px}.piece .credit{font-size:10px;margin-top:10px;opacity:0;transition:opacity .15s}.piece:hover .credit,.piece:focus-within .credit{opacity:.7}.piece.is-audio{background:#e0d9cb;padding:18px}.piece.is-audio .credit{opacity:.7}#view-tools{align-items:center;gap:3px}#view-tools:not([hidden]){display:flex}#zoom{min-width:40px;text-align:center}#connection{color:#6c6a5f}dialog{border:1px solid #c3beaf;background:#f8f5ee;color:#292820;padding:28px;width:min(540px,calc(100vw - 28px));max-height:calc(100svh - 36px);overflow:auto;box-shadow:0 20px 80px #2223}dialog::backdrop{background:#25271e66}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.dialog-heading h2{font:400 28px Georgia,serif;margin:0}.dialog-heading button{font-size:25px;padding:0 4px}label{display:block;margin:16px 0;font-size:12px}label small{font-size:11px;color:#777368;margin-left:8px}input:not([type=file]),textarea,select{display:block;width:100%;background:transparent;color:inherit;border:1px solid #b8b3a5;padding:10px;margin-top:6px;border-radius:0}textarea{resize:vertical;font:18px/1.5 Georgia,serif}input[type=file]{display:block;max-width:100%;margin:8px 0}.file-label>small{display:block;margin:7px 0}.quiet{font-size:12px;color:#706b5e}.primary{background:#a52f3e;color:#fff;padding:12px 20px}.primary:hover{background:#852531;color:white}[role=alert]{color:#a52f3e}#notice{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);max-width:calc(100vw - 40px);padding:9px 16px;background:#292820;color:#f8f5ee;font-size:12px;z-index:60;pointer-events:none;opacity:0}#notice.visible{opacity:1}#piece-content img,#piece-content video{display:block;max-width:100%;max-height:65svh;margin:auto}#piece-content audio{width:100%}#piece-content pre{white-space:pre-wrap;overflow-wrap:anywhere;font:20px/1.6 Georgia,serif}.piece-actions{display:flex;gap:4px;flex-wrap:wrap;margin:20px -10px 0}.piece-actions button{font-size:12px;text-decoration:underline;text-underline-offset:4px}.record{border-top:1px solid #d6d0c2;padding:12px 0;font-size:12px}#sketch{display:block;width:100%;height:auto;background:#fff;touch-action:none;cursor:crosshair;border:1px solid #d1c9b9;margin-top:15px}#drawing button{font-size:12px}noscript{position:fixed;top:80px;left:28px}@media(max-width:600px){.edge{padding:12px 14px;gap:8px}header a{font-size:10px;max-width:105px}h1{font-size:13px}header #add{font-size:11px;padding:10px}header #add span{padding-left:5px}footer{font-size:10px;flex-wrap:wrap}#connection{max-width:100px}#view-tools{gap:0}#view-tools button{padding:7px}#view-tools #fit{font-size:10px}#stage{inset:64px 0 62px}dialog{padding:20px}.dialog-heading h2{font-size:25px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:600px){header h1{position:static;transform:none;flex:none}header>a{flex:none}}