@import "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Noto+Sans+JP:wght@200;300&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#101113;--surface:#191b1d;--surface2:#222426;--text:#e8e8e5;--text-muted:#888884;--text-dim:#555552;--border:#ffffff14;--border-soft:#ffffff0d;--accent:#ffffff26;font-family:Inter,Noto Sans JP,sans-serif}html,body,#root{background:var(--bg);width:100%;height:100%;color:var(--text);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;overflow:hidden}.loading-screen{background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:100%;display:flex}.loading-word{letter-spacing:.25em;color:var(--text);font-size:22px;font-weight:200}.loading-sub{color:var(--text-muted);letter-spacing:.15em;font-family:Noto Sans JP,sans-serif;font-size:13px;font-weight:300}.wordmark{z-index:100;pointer-events:none;flex-direction:column;gap:3px;display:flex;position:fixed;top:20px;left:24px}.wordmark-main{letter-spacing:.3em;color:var(--text);font-size:15px;font-weight:300}.wordmark-sub{letter-spacing:.12em;color:var(--text-muted);font-family:Noto Sans JP,sans-serif;font-size:10px;font-weight:300}.status-indicator{z-index:100;pointer-events:none;align-items:center;gap:7px;display:flex;position:fixed;top:22px;right:24px}.status-dot{background:var(--text-dim);border-radius:50%;width:5px;height:5px;transition:background .5s}.status-dot.online{background:#78c878b3}.status-count{color:var(--text-muted);letter-spacing:.08em;font-size:11px;font-weight:300}.canvas-outer{cursor:default;background:var(--bg);position:fixed;inset:0;overflow:hidden}.canvas-outer.drag-over:after{content:"";pointer-events:none;z-index:200;border:1px solid #ffffff1f;position:absolute;inset:0}.grid-svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.canvas-content{transform-origin:0 0;will-change:transform;position:absolute;top:0;left:0}.empty-state{pointer-events:none;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:fixed;inset:0}.empty-title{letter-spacing:.08em;color:var(--text);font-size:clamp(18px,3vw,26px);font-weight:200}.empty-sub{color:var(--text-muted);letter-spacing:.05em;max-width:360px;font-size:clamp(11px,1.5vw,14px);font-weight:300;line-height:1.7}.empty-cta{color:var(--text-dim);letter-spacing:.08em;margin-top:8px;font-size:12px;font-weight:300}.drop-hint{letter-spacing:.1em;color:var(--text-dim);pointer-events:none;white-space:nowrap;font-size:11px;font-weight:300;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.add-btn{z-index:100;letter-spacing:.1em;color:var(--text-muted);cursor:pointer;border:1px solid var(--border);background:var(--surface);white-space:nowrap;padding:8px 14px;font-size:11px;font-weight:300;transition:color .2s,border-color .2s;position:fixed;bottom:22px;right:24px}.add-btn:hover{color:var(--text);border-color:#ffffff26}.add-btn input{display:none}.photograph{opacity:0;transition:opacity .4s;position:absolute}.photograph.loaded{opacity:1}.photograph.own{cursor:grab}.photograph.own:active{cursor:grabbing}.photo-frame{background:var(--surface);position:relative;overflow:hidden}.photo-frame img{object-fit:cover;pointer-events:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.photo-skeleton{background:var(--surface2);animation:1.5s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%,to{opacity:.5}50%{opacity:.8}}.photo-label{margin-top:8px;padding:0 2px}.photo-caption{color:#e8e8e5d1;letter-spacing:.03em;font-size:11px;font-style:italic;font-weight:300;line-height:1.55}.photo-contributor{color:var(--text-muted);letter-spacing:.05em;margin-top:3px;font-size:10px;font-weight:300}.dialog-overlay{z-index:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0b0cd1;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.dialog{background:var(--surface);border:1px solid var(--border);flex-direction:column;width:100%;max-width:420px;display:flex;overflow:hidden}.dialog-preview{background:var(--bg);justify-content:center;align-items:center;width:100%;max-height:220px;display:flex;overflow:hidden}.dialog-preview img{object-fit:cover;width:100%;height:220px;display:block}.dialog-form{flex-direction:column;gap:14px;padding:20px;display:flex}.dialog-field{flex-direction:column;gap:6px;display:flex}.dialog-field label{letter-spacing:.15em;color:var(--text-muted);text-transform:uppercase;font-size:10px;font-weight:400}.dialog-field input,.dialog-field textarea{background:var(--bg);border:1px solid var(--border);color:var(--text);resize:none;letter-spacing:.03em;outline:none;padding:9px 12px;font-family:inherit;font-size:13px;font-weight:300;transition:border-color .2s}.dialog-field input::placeholder,.dialog-field textarea::placeholder{color:var(--text-dim);font-style:italic}.dialog-field input:focus,.dialog-field textarea:focus{border-color:#fff3}.dialog-error{color:#dc6464e6;letter-spacing:.03em;font-size:11px}.dialog-actions{justify-content:flex-end;gap:10px;margin-top:4px;display:flex}.btn-ghost{border:1px solid var(--border);color:var(--text-muted);letter-spacing:.1em;cursor:pointer;background:0 0;padding:8px 16px;font-family:inherit;font-size:11px;font-weight:300;transition:color .2s,border-color .2s}.btn-ghost:hover:not(:disabled){color:var(--text);border-color:var(--accent)}.btn-primary{color:var(--text);letter-spacing:.12em;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;padding:8px 18px;font-family:inherit;font-size:11px;font-weight:300;transition:background .2s}.btn-primary:hover:not(:disabled){background:#ffffff21}.btn-primary:disabled,.btn-ghost:disabled{opacity:.4;cursor:not-allowed}.error-toast{color:#dca0a0e6;cursor:pointer;z-index:300;letter-spacing:.05em;background:#280f0ff2;border:1px solid #c850504d;padding:10px 18px;font-size:11px;font-weight:300;position:fixed;bottom:60px;left:50%;transform:translate(-50%)}@media (width<=600px){.wordmark-main{font-size:13px}.wordmark-sub{font-size:9px}.drop-hint{display:none}.dialog{max-width:100%}.dialog-preview img{height:160px}}