:root{--bg:#fff;--text:#1d2731;--muted:#6b7680;--line:#e0e5e5;--tile-bg:#f2f5f5;--accent:#0b3c5d;--danger:#df1b41;--font:"Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;overflow:hidden}body{font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:15px}button,input{font:inherit;color:inherit}.viewport{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;background:var(--bg);position:fixed;inset:0;overflow:hidden}.viewport.is-dragging{cursor:grabbing}.viewport.is-dragging .tile{pointer-events:none}.world{will-change:transform;transform-origin:0 0;position:absolute;top:0;left:0}.tile{background:var(--tile-bg);cursor:pointer;width:260px;position:absolute;overflow:hidden}.tile img{object-fit:cover;opacity:0;-webkit-user-drag:none;width:100%;height:100%;transition:opacity .35s;display:block}.tile img.is-loaded{opacity:1}.tile__name{color:#fff;opacity:0;pointer-events:none;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(#0000,#0000008c);padding:22px 10px 8px;font-size:13px;font-weight:600;transition:opacity .2s;position:absolute;bottom:0;left:0;right:0;overflow:hidden}@media (hover:hover){.tile:hover .tile__name{opacity:1}}.tile.is-new{outline:3px solid var(--accent);outline-offset:4px;animation:.6s ease-out both pop}@keyframes pop{0%{opacity:0;transform:scale(.94)}}.pill{height:36px;color:var(--text);white-space:nowrap;border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background:#fffffff0;border-radius:999px;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:600;line-height:1;text-decoration:none;display:inline-flex;box-shadow:0 1px 2px #1d27310f,0 4px 14px #1d273114}.pill:hover{background:#fff}.pill--primary{color:#fff;background:var(--text);border-color:var(--text)}.pill--primary:hover{background:#2c3a47}.pill--primary:disabled{opacity:.4;cursor:not-allowed}.pill--block{justify-content:center;width:100%;height:44px;font-size:15px}.pill--small{height:30px;padding:0 12px;font-size:13px}.pill--count{color:var(--muted);font-weight:400}.pill--demo{color:var(--muted);background:#fffbeb;font-weight:400}.topbar{z-index:5;pointer-events:none;flex-wrap:wrap;gap:8px;display:flex;position:fixed;top:16px;left:16px}.actions{z-index:5;gap:8px;display:flex;position:fixed;bottom:16px;right:16px}.search,.search__toggle{pointer-events:auto;position:relative}.search__toggle{justify-content:center;width:36px;padding:0}.search__input{cursor:text;outline:none;width:min(240px,100vw - 24px);font-weight:400}.search__input:focus{border-color:var(--text)}.search__results{border:1px solid var(--line);background:#fff;border-radius:14px;width:min(280px,100vw - 24px);max-height:60dvh;margin:0;padding:6px;list-style:none;position:absolute;top:44px;left:0;overflow:auto;box-shadow:0 20px 60px -20px #1d273159}.search__result{text-align:left;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;width:100%;padding:6px;display:flex}.search__result.is-active{background:var(--tile-bg)}.search__result img{object-fit:cover;background:var(--tile-bg);border-radius:6px;flex:none;width:40px;height:40px}.search__result span{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.search__empty{color:var(--muted);padding:10px;font-size:14px}.empty{z-index:4;color:var(--muted);pointer-events:none;place-content:center;justify-items:center;gap:14px;display:grid;position:fixed;inset:0}.empty p{margin:0;font-size:18px}.empty .pill{pointer-events:auto}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:default;touch-action:auto;background:#ffffffb3;place-items:center;padding:16px;animation:.18s ease-out fade;display:grid;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.panel{border:1px solid var(--line);-webkit-user-select:text;user-select:text;background:#fff;border-radius:16px;flex-direction:column;gap:14px;width:min(420px,100%);max-height:calc(100dvh - 32px);padding:20px;animation:.22s ease-out rise;display:flex;overflow:auto;box-shadow:0 20px 60px -20px #1d273159}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}.panel__head{justify-content:space-between;align-items:center;display:flex}.panel h2{margin:0;font-size:18px;font-weight:700}.panel__close{background:var(--tile-bg);cursor:pointer;border:none;border-radius:50%;width:32px;height:32px}.dropzone{background:var(--tile-bg);cursor:pointer;border:1.5px dashed #b9c2c2;border-radius:10px;place-items:center;width:100%;min-height:200px;padding:0;display:grid;overflow:hidden}.dropzone span{gap:6px;font-weight:600;display:grid}.dropzone small{color:var(--muted);font-size:13px;font-weight:400}.dropzone.has-photo{background:0 0;border:none;min-height:0}.dropzone img{object-fit:contain;background:var(--tile-bg);width:100%;max-height:46dvh;display:block}.link{color:var(--muted);cursor:pointer;background:0 0;border:none;align-self:flex-start;margin-top:-6px;padding:0;font-size:13px;text-decoration:underline}.field{gap:6px;display:grid}.field span{font-size:13px;font-weight:600}.field input{border:1px solid var(--line);background:#fff;border-radius:10px;outline:none;height:42px;padding:0 12px;font-size:16px}.field input:focus{border-color:var(--text)}.field small{color:var(--muted);justify-self:end;font-size:12px}.panel__error{color:var(--danger);background:#fdecef;border-radius:10px;margin:0;padding:10px 12px;font-size:14px}.panel__note{text-align:center;color:var(--muted);margin:-4px 0 0;font-size:12px}.lightbox{z-index:30;cursor:zoom-out;touch-action:auto;background:#fffffff5;place-items:center;padding:56px 16px 24px;animation:.18s ease-out fade;display:grid;position:fixed;inset:0}.lightbox__inner{cursor:default;justify-items:center;gap:12px;margin:0;display:grid}.lightbox__inner img{background:var(--tile-bg);width:auto;max-width:min(90vw,1100px);height:auto;max-height:calc(100dvh - 130px);display:block;box-shadow:0 10px 40px -12px #1d273159}.lightbox figcaption{align-items:center;gap:12px;font-size:16px;font-weight:600;display:flex}.lightbox__close{justify-content:center;width:36px;padding:0;position:fixed;top:16px;right:16px}@media (max-width:640px){.topbar{top:12px;left:12px}.actions{flex-wrap:wrap;justify-content:flex-end;bottom:12px;left:12px;right:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
