.desktop-canvas{--canvas-ink: #173b2b;--canvas-muted: #607969;--canvas-surface: #fffffff2;--canvas-solid: #fff;--canvas-panel: #f0f6f2;--canvas-line: #184b3020;position:relative;height:100dvh;overflow:hidden;color:var(--canvas-ink);isolation:isolate}.desktop-canvas.is-dark{--canvas-ink: #e8f3ec;--canvas-muted: #a2b9ab;--canvas-surface: #14261ff2;--canvas-solid: #14261f;--canvas-panel: #26392f;--canvas-line: #b8dcc42b}.canvas-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.canvas-workspace,.desktop-canvas-viewport{position:absolute;top:0;right:0;bottom:0;left:0}.desktop-canvas-viewport{overflow:hidden;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;background-image:radial-gradient(#688c7220 .8px,transparent .8px);background-size:28px 28px}.desktop-canvas-viewport:active{cursor:grabbing}.desktop-canvas-viewport:focus-visible{outline:2px solid #00875a;outline-offset:-3px}.desktop-canvas-field{position:absolute;left:0;top:0}.canvas-back,.canvas-tools,.canvas-exit{position:absolute;top:calc(20px + env(safe-area-inset-top));z-index:10}.canvas-back{left:20px;display:grid;place-items:center;width:44px;height:44px;color:var(--canvas-ink);background:transparent;border:0;border-radius:50%;transition:transform .18s}.canvas-back:hover{transform:translate(-3px)}.canvas-back svg{width:26px;height:26px}.canvas-tools{right:20px;display:flex;gap:8px}.desktop-canvas svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.canvas-icon-button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid #ffffff5c;border-radius:50%;background:var(--canvas-surface);color:var(--canvas-ink);box-shadow:0 3px 14px #0d2e1c12;cursor:pointer;transition:background .18s,color .18s,transform .18s}.canvas-icon-button svg{width:21px;height:21px}.canvas-icon-button:hover{color:#00875a;background:#fff;transform:translateY(-2px)}.canvas-icon-button:active{transform:scale(.94)}.canvas-icon-button.selected{color:#00875a;background:#e2f5e9;border-color:#90d5af}.desktop-canvas.is-dark .canvas-icon-button{border-color:var(--canvas-line)}.desktop-canvas.is-dark .canvas-icon-button:hover{background:#2b4636;color:#7be9ab}.desktop-canvas :is(button,a,input):focus-visible{outline:2px solid #00a96b;outline-offset:4px}.canvas-search-panel{position:absolute;z-index:9;top:calc(80px + env(safe-area-inset-top));right:20px;width:min(340px,calc(100% - 40px));display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border:1px solid var(--canvas-line);border-radius:16px;background:var(--canvas-surface);box-shadow:0 10px 40px #14341f18}.canvas-search-panel>svg{width:18px;height:18px;color:var(--canvas-muted);flex-shrink:0}.canvas-search-panel input{min-width:0;flex:1;height:32px;padding:0;border:0;background:transparent;color:var(--canvas-ink);font-size:14px}.canvas-search-panel input::placeholder{color:var(--canvas-muted)}.canvas-search-panel input:focus-visible{outline:none}.canvas-search-panel:focus-within{border-color:#00a96b}.canvas-search-panel>button,.canvas-panel-heading>button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--canvas-muted);font-size:21px;cursor:pointer}.canvas-search-panel>button:hover,.canvas-panel-heading>button:hover{background:var(--canvas-panel);color:var(--canvas-ink)}.desktop-canvas .canvas-search-status{z-index:7;top:calc(26px + env(safe-area-inset-top));max-width:calc(100% - 430px);width:max-content;padding:9px 14px;border-color:var(--canvas-line);background:var(--canvas-surface);color:var(--canvas-ink);font-size:12px}.desktop-canvas .canvas-search-status button{flex-shrink:0;color:#00875a}.desktop-canvas-field>.canvas-art-button{position:absolute;display:block;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.canvas-card-art{display:block;position:relative;width:100%;height:100%;transform:rotate(var(--card-angle))}.canvas-card-art>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 9px 7px #12351b20);transition:filter .2s}.canvas-art-button:hover .canvas-card-art>img{filter:drop-shadow(0 12px 9px #12351b32)}.canvas-card-art:after{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px;border:2px solid transparent;border-radius:14px;pointer-events:none;transition:border-color .18s}.canvas-art-button.is-selected .canvas-card-art:after,.canvas-art-button:focus-visible .canvas-card-art:after{border-color:#00a96b}.desktop-canvas .canvas-art-button:focus-visible{outline:none}.canvas-card-fallback{display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;height:100%;padding:12%;border-radius:10px;font-size:18px;font-weight:600;text-align:left;box-shadow:0 9px 20px #0002;overflow:hidden}.canvas-card-fallback small{font-size:11px;font-weight:400;opacity:.8}.canvas-card-caption{position:absolute;top:calc(100% + 16px);left:0;width:100%;display:flex;justify-content:center;align-items:center;gap:9px;padding:0;color:var(--canvas-ink);font-size:13px;font-weight:600;line-height:20px;text-shadow:0 1px 4px #ffffffb3;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s}.canvas-card-caption b{color:#00875a;font-size:14px;font-weight:400}.canvas-art-button:is(:hover,:focus-visible,.is-selected) .canvas-card-caption{opacity:1}.desktop-canvas.is-dark .canvas-card-caption{text-shadow:0 1px 4px #0008}.canvas-inspector,.canvas-preview{position:absolute;z-index:9;top:calc(80px + env(safe-area-inset-top));right:20px;width:304px;max-height:calc(100% - 160px - env(safe-area-inset-top));overflow-y:auto;overscroll-behavior:contain;padding:22px;border:1px solid var(--canvas-line);border-radius:22px;background:var(--canvas-solid);box-shadow:0 16px 55px #12341e24}.canvas-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.canvas-panel-heading .section-caption{color:var(--canvas-muted);font-size:12px}.canvas-inspector fieldset{border:0;padding:0;margin:24px 0}.canvas-inspector legend{margin-bottom:11px;color:var(--canvas-muted);font-size:12px}.canvas-inspector fieldset>button{padding:8px 10px;margin:0 6px 6px 0;border:1px solid var(--canvas-line);border-radius:8px;background:var(--canvas-panel);color:var(--canvas-ink);font-size:12px;cursor:pointer}.canvas-inspector button.selected{border-color:#00875a;box-shadow:0 0 0 2px #00bc7d18}.canvas-colors{display:flex;gap:14px}.canvas-colors button{width:36px;height:36px;padding:0;border:1px solid var(--canvas-line);border-radius:50%;cursor:pointer}.canvas-angle{display:flex;flex-wrap:wrap;justify-content:space-between;color:var(--canvas-muted);font-size:12px}.canvas-angle input{width:100%;height:5px;margin:18px 0 10px;accent-color:#00875a;cursor:pointer}.canvas-inspector .canvas-play{width:100%;margin-top:18px;padding:12px;border:0;border-radius:10px;background:#00875a;color:#fff;font-size:13px;cursor:pointer}.canvas-inspector>small{display:block;margin-top:17px;color:var(--canvas-muted);font-size:11px;line-height:1.8}.canvas-preview-art{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;height:176px;padding:14px;border-radius:13px;margin:18px 0 22px;background:var(--canvas-panel)}.canvas-preview-art img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 6px #0002)}.canvas-preview>small{color:var(--canvas-muted);font-size:11px}.canvas-preview h2{margin:7px 0 20px;font-size:22px;line-height:1.4;letter-spacing:-.025em}.canvas-preview dl{margin:0 0 20px}.canvas-preview dl>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--canvas-line);font-size:12px}.canvas-preview dt{color:var(--canvas-muted);flex-shrink:0}.canvas-preview dd{margin:0;text-align:right;line-height:1.6}.desktop-canvas .canvas-preview .canvas-save-button{border-color:var(--canvas-line);background:var(--canvas-panel);color:var(--canvas-ink);font-size:13px}.canvas-preview>a{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:12px 15px;border-radius:10px;background:#00875a;color:#fff;font-size:13px}.canvas-empty{position:absolute;inset:45% 25px auto;text-align:center;color:var(--canvas-muted);font-size:14px}.canvas-hint{position:absolute;left:28px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:6;margin:0;color:var(--canvas-muted);font-size:12px;pointer-events:none}.canvas-hint span{margin:0 6px;opacity:.6}.canvas-bottom-controls{position:absolute;right:20px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:8;display:flex;flex-direction:column;align-items:center;gap:8px}.desktop-canvas:has(.canvas-inspector,.canvas-preview) .canvas-bottom-controls{right:344px}.canvas-bottom-controls output{padding:1px 0;color:var(--canvas-ink);font-size:12px;font-weight:600;line-height:20px;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #fffc}.desktop-canvas.is-dark .canvas-bottom-controls output{text-shadow:0 1px 4px #0008}.canvas-exit{right:20px}.canvas-panel-enter-active,.canvas-panel-leave-active{transition:opacity .18s,transform .22s}.canvas-panel-enter-from,.canvas-panel-leave-to{opacity:0;transform:translateY(8px)}@media(max-width:900px){.desktop-canvas .canvas-search-status{top:calc(80px + env(safe-area-inset-top));left:20px;transform:none;max-width:calc(100% - 390px);border-radius:12px;flex-wrap:wrap;gap:6px}}@media(max-width:600px){.canvas-back{left:12px}.canvas-tools,.canvas-exit{right:14px}.canvas-tools{gap:6px}.canvas-search-panel{right:14px;width:calc(100% - 28px)}.canvas-search-panel input{font-size:16px}.desktop-canvas .canvas-search-status{top:auto;bottom:calc(22px + env(safe-area-inset-bottom));left:14px;max-width:calc(100% - 82px);font-size:11px;gap:6px;padding:9px 11px}.canvas-inspector,.canvas-preview{top:auto;right:0;bottom:0;width:100%;max-height:min(calc(100dvh - 90px - env(safe-area-inset-top)),650px);padding:18px 24px calc(22px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;box-shadow:0 -12px 40px #12341e26}.canvas-inspector:before,.canvas-preview:before{content:"";display:block;width:36px;height:4px;margin:-6px auto 12px;border-radius:4px;background:var(--canvas-line)}.canvas-inspector fieldset{margin:18px 0}.canvas-preview-art{height:154px;margin:12px 0 14px}.canvas-preview h2{margin-bottom:12px;font-size:20px}.canvas-preview dl{margin-bottom:14px}.canvas-preview dl>div{padding:9px 0}.canvas-bottom-controls{right:14px;bottom:calc(18px + env(safe-area-inset-bottom));gap:6px}.desktop-canvas:has(.canvas-inspector,.canvas-preview) .canvas-bottom-controls{visibility:hidden}.canvas-hint{left:16px;bottom:calc(24px + env(safe-area-inset-bottom));max-width:calc(100% - 90px);font-size:10px}.desktop-canvas:has(.canvas-search-status) .canvas-hint{display:none}}@media(prefers-reduced-motion:reduce){.desktop-canvas *,.desktop-canvas *:after{transition:none!important}}