@import"https://heyitsmejosh.com/tokens.css";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font: var(--font-body);--font-mono: var(--font-code);--surface: var(--color-bg2);--surface2: var(--color-hairline);--border2: var(--color-hairline);--muted: var(--color-secondary);--subtle: var(--color-soft);--accent-dim: var(--bulb-deep);--accent-muted: rgba(217, 119, 87, .14)}:root{--color-bg: #FAF9F5;--color-bg2: #F0EEE6;--color-text: #191919;--color-secondary: rgba(25, 25, 25, .55);--color-soft: rgba(25, 25, 25, .7);--color-hairline: #E3DFD4;--color-code-bg: #F0EEE6;--bulb: #D97757;--bulb-deep: #B45F42;--radius: 10px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 12px;--rule: 1px solid var(--color-hairline)}html,body,#root{height:100%;width:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--color-soft)}:root[data-theme=dark]{--color-bg: #1F1E1D;--color-bg2: #262624;--color-text: #F5F4EF;--color-secondary: rgba(245, 244, 239, .55);--color-soft: rgba(245, 244, 239, .72);--color-hairline: rgba(245, 244, 239, .14);--color-code-bg: #262624;--bulb: #E08A6B;--bulb-deep: #C96A4A}.app{display:grid;grid-template-columns:200px 1fr 220px;grid-template-rows:40px 1fr;height:100vh;height:100dvh;width:100vw;background:var(--bg)}.app-header{grid-column:1 / -1;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border)}.app-title{font-family:var(--font);font-size:13px;font-weight:500;color:var(--subtle);letter-spacing:.01em}.app-header-actions{margin-left:auto;display:flex;align-items:center;gap:6px}.header-mobile{display:none}.btn{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--muted);font-family:var(--font);font-size:12px;cursor:pointer;transition:all .12s;white-space:nowrap}.btn:hover{color:var(--text);border-color:var(--border2);background:var(--surface2)}.btn-primary{background:#b45f42;border-color:#b45f42;color:#fff;font-weight:500}.btn-primary:hover{background:#9c4e34;border-color:#9c4e34;color:#fff}.btn-danger{border-color:var(--border);color:var(--muted)}.btn-danger:hover{border-color:#ef4444;color:#ef4444;background:#ef444414}.btn-icon-round{width:32px;height:32px;padding:0;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.mobile-bar,.mobile-backdrop,.mobile-more-sheet{display:none}@media(max-width:768px){.app{grid-template-columns:1fr;grid-template-rows:44px 1fr 54px}.app-header{grid-column:1;padding:0 12px}.header-desktop{display:none}.header-mobile{display:flex;margin-left:auto;align-items:center;gap:4px}.btn-icon-round{width:36px;height:36px}.mobile-bar{display:flex;align-items:stretch;justify-content:space-around;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0px);z-index:110}.mobile-bar-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;min-height:54px;border:none;background:transparent;color:var(--muted);font-family:var(--font);font-size:10px;cursor:pointer;transition:color .12s,background .12s;padding:0 4px}.mobile-bar-btn:hover,.mobile-bar-btn.is-active{color:var(--text);background:var(--surface2)}.mobile-bar-btn--add{color:var(--link, var(--accent))}.mobile-bar-btn--add:hover,.mobile-bar-btn--add.is-active{color:var(--accent-dim);background:var(--accent-muted)}.mobile-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:99}.mobile-more-sheet{display:flex;flex-direction:column;position:fixed;bottom:calc(54px + env(safe-area-inset-bottom,0px));left:0;right:0;background:var(--surface);border-top:1px solid var(--border);border-radius:var(--radius);z-index:105;box-shadow:var(--shadow-md);padding:6px 0}.mobile-action-item{display:flex;align-items:center;width:100%;padding:14px 20px;border:none;background:transparent;color:var(--text);font-family:var(--font);font-size:15px;text-align:left;cursor:pointer;transition:background .1s}.mobile-action-item:hover,.mobile-action-item:active{background:var(--surface2)}}.tour-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#0009;display:flex;align-items:center;justify-content:center}.tour-card{background:var(--bg, #1a1a1a);color:var(--text, #e8e8f0);border:1px solid var(--border, rgba(232,232,240,.1));border-radius:var(--radius-lg, 12px);padding:28px 32px;max-width:420px;width:90%}.tour-card h2{margin:0 0 14px;font-size:18px}.tour-card ol{margin:0 0 20px;padding-left:20px;line-height:1.8;font-size:14px;color:var(--text2, rgba(232,232,240,.6))}.tour-card .btn{width:100%}.toolbar{display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);overflow:hidden}.toolbar-search{position:relative;padding:6px 8px 4px;border-bottom:1px solid var(--border);flex-shrink:0}.toolbar-search-input{width:100%;box-sizing:border-box;padding:4px 24px 4px 8px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:var(--font);font-size:11px;outline:none;transition:border-color .12s}.toolbar-search-input:focus{border-color:var(--link, var(--accent))}.toolbar-search-input::placeholder{color:var(--muted)}.toolbar-search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}.toolbar-search-clear:hover{color:var(--text)}.toolbar-no-results{padding:16px 12px;font-size:11px;color:var(--muted);text-align:center}.toolbar-body{overflow-y:auto;flex:1;padding:6px 0}.toolbar-section{margin-bottom:2px}.toolbar-category{padding:8px 12px 3px;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}.toolbar-item{display:flex;flex-direction:column;gap:1px;width:100%;padding:5px 12px;border:none;background:transparent;color:var(--muted);text-align:left;cursor:pointer;transition:background .1s,color .1s}.toolbar-item:hover{background:var(--surface2);color:var(--subtle)}.toolbar-item--active{background:var(--accent-muted);color:var(--text)}.toolbar-item-preview{font-family:var(--font-mono);font-size:11px;color:inherit;overflow:hidden;text-overflow:clip;white-space:nowrap;opacity:.85}.toolbar-item-label{font-size:12px;color:inherit}@media(max-width:768px){.toolbar{position:fixed;bottom:calc(54px + env(safe-area-inset-bottom,0px));left:0;right:0;width:100%;max-height:45vh;overflow-y:auto;z-index:100;background:var(--surface);border-right:none;border-top:1px solid var(--border);border-radius:var(--radius);transform:translateY(110%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow-md)}.toolbar--mobile-open{transform:translateY(0)}.toolbar-body{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:0;padding:6px 0}.toolbar-section{flex-shrink:0;margin-bottom:0;border-right:1px solid var(--border)}.toolbar-item{min-height:44px;min-width:44px;padding:6px 10px}}.canvas-wrapper{position:relative;overflow:hidden;background:var(--bg);outline:none;touch-action:manipulation}.canvas-scroll{width:100%;height:100%;overflow:auto;display:grid;place-content:center;touch-action:pan-x pan-y}.canvas{display:block;cursor:crosshair;image-rendering:pixelated}.canvas--place-mode{cursor:cell}@media(max-width:768px){.canvas-wrapper{height:100%}}.canvas-stage{position:relative;width:max-content;height:max-content}.element-overlay{position:absolute;border:2px solid var(--accent);pointer-events:none;box-sizing:border-box}.resize-handle{position:absolute;width:12px;height:12px;padding:0;border:1px solid var(--color-text);background:var(--color-bg);pointer-events:auto;touch-action:none;transform:translate(-50%,-50%)}.handle-nw{left:0;top:0}.handle-n{left:50%;top:0}.handle-ne{left:100%;top:0}.handle-w{left:0;top:50%}.handle-e{left:100%;top:50%}.handle-sw{left:0;top:100%}.handle-s{left:50%;top:100%}.handle-se{left:100%;top:100%}.element-edit{position:absolute;top:calc(100% + 10px);left:0;white-space:nowrap;pointer-events:auto}.element-editor{position:absolute;top:0;left:0;min-width:260px;z-index:3;pointer-events:auto;background:var(--color-bg);padding:6px;border:1px solid var(--color-text)}.element-editor textarea{display:block;width:100%;min-height:100px;font:14px/20px var(--font-code,monospace);white-space:pre;color:var(--color-text);background:var(--color-bg);resize:both}.element-editor div{display:flex;gap:6px;margin-top:6px}.inspector{display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);overflow:hidden}.inspector-header{padding:10px 14px 8px;border-bottom:1px solid var(--border);flex-shrink:0}.inspector-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}.inspector-section{border-bottom:1px solid var(--border);padding:10px 14px}.inspector-section-title{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:6px}.inspector-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}.inspector-key{font-size:12px;color:var(--muted)}.inspector-value{font-size:12px;color:var(--subtle);font-family:var(--font-mono)}.inspector-value--green{color:var(--link, var(--accent))}.inspector-value--kbd{color:var(--subtle);font-size:11px}.inspector-value--muted{color:var(--muted);font-family:var(--font)}.inspector-preview{margin-top:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:8px;overflow-x:auto}.inspector-preview-line{font-family:var(--font-mono);font-size:10px;color:var(--subtle);white-space:pre;line-height:1.4}.inspector-hint{margin-top:6px;font-size:11px;color:var(--muted)}@media(max-width:768px){.inspector{display:flex;position:fixed;bottom:calc(54px + env(safe-area-inset-bottom,0px));left:0;right:0;height:45vh;border-left:none;border-top:1px solid var(--border);border-radius:var(--radius);z-index:100;transform:translateY(110%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);overflow-y:auto;box-shadow:var(--shadow-md)}.inspector.is-open{transform:translateY(0)}}