*{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#f5f0e8;touch-action:manipulation;overscroll-behavior:none;background-color:#111;width:100%;height:100%;font-family:Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;overflow:hidden}body{position:fixed;inset:0}.app{width:100%;height:100%;position:relative}.app canvas{width:100%;height:100%;display:block}.museum-wall{background:radial-gradient(75% 60% at 50% 12%,#fff5dc17,#0000 62%),linear-gradient(#1c1a17 0%,#131110 55%,#0a0908 100%);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.artwork{flex-direction:column;align-items:center;gap:clamp(12px,2.4vmin,26px);width:min(86vw,82.6667vh,1300px);display:flex;position:relative;top:calc(-1*clamp(6px,2vh,24px))}.art-frame{aspect-ratio:4/3;border:clamp(26px,5vmin,58px) solid #97742f;border-image-source:url(/assets/frame-ornate-C6N7-MJI.svg);border-image-slice:62;border-image-repeat:round;width:100%;box-shadow:0 30px 80px #0009,0 10px 28px #00000073}.art-frame-inner{background-color:#0a0908;border:3px solid #241c12;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:0 0 0 2px #fff0c880}.art-frame-inner:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 8px 20px #0009,inset 0 0 34px #00000073}.canvas-texture{z-index:5;pointer-events:none;mix-blend-mode:overlay;background:repeating-linear-gradient(0deg,#ffffff1f 0 1px,#00000014 1px 2px,#0000 2px 4px),repeating-linear-gradient(90deg,#ffffff1a 0 1px,#00000012 1px 2px,#0000 2px 4px);position:absolute;inset:0}.art-plate{color:#2c2008;background:linear-gradient(#cfb269 0%,#a5873e 50%,#8d7132 100%);border-radius:2px;flex-direction:column;align-items:center;gap:2px;padding:clamp(5px,1vmin,9px) clamp(22px,3.4vmin,38px);display:flex;position:relative;box-shadow:0 6px 16px #00000073,inset 0 1px #fff4d299,inset 0 -1px 2px #3c2a0c66}.art-plate:before,.art-plate:after{content:"";background:radial-gradient(circle at 30% 30%,#f0e2b6,#8d7132 60%,#4b3a14);border-radius:50%;width:6px;height:6px;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 1px #fff4d280}.art-plate:before{left:8px}.art-plate:after{right:8px}.art-plate-title{letter-spacing:.14em;text-align:center;text-shadow:0 1px #fff6d68c,0 -1px #281c0699;padding-left:.14em;font-size:clamp(.8rem,1.5vmin,1rem)}.art-plate-caption{letter-spacing:.18em;color:#4a3a14;text-shadow:0 1px #fff6d666;font-size:clamp(.55rem,1.1vmin,.68rem)}.frame-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.memory-place-button{color:#4a3a14;letter-spacing:.15em;cursor:pointer;background:linear-gradient(#efe6d2 0%,#e2d5b8 100%);border:1px solid #5a421873;border-radius:3px;padding:8px 22px;font-size:.8rem;box-shadow:0 4px 10px #3c2d1440,inset 0 1px #fffaebcc}.memory-place-button:hover{background:linear-gradient(#f6efdf 0%,#e9ddc4 100%)}.frame-quiet-button{color:#b8ad98;box-shadow:none;background:0 0;border-color:#d8c9a366}.frame-quiet-button:hover{background:#d8c9a314}.memory-list-overlay{z-index:30;background-color:#0000008c;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.memory-list-panel{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#110e0af2;border:1px solid #d8c9a359;flex-direction:column;width:min(560px,100%);max-height:min(640px,86%);display:flex}.memory-list-header{border-bottom:1px solid #d8c9a340;justify-content:space-between;align-items:center;padding:14px 18px 10px;display:flex}.memory-list-title{letter-spacing:.15em;color:#d8c9a3;font-size:1rem;font-weight:400}.memory-list-items{overscroll-behavior:contain;flex-direction:column;flex:1;gap:16px;padding:14px 18px;display:flex;overflow-y:auto}.memory-list-form-title{letter-spacing:.08em;color:#a89f92;font-size:.75rem}.memory-list-source{letter-spacing:.08em;color:#8d8272;white-space:nowrap;border:1px solid #d8c9a34d;border-radius:9px;padding:1px 8px;font-size:.68rem}.marker-toggle{cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:4px 6px;display:flex}.marker-toggle-label{letter-spacing:.12em;color:#b8ad98;font-size:.72rem}.marker-toggle-track{background-color:#f5f0e826;border:1px solid #d8c9a359;border-radius:10px;width:36px;height:20px;transition:background-color .15s ease-out;position:relative}.marker-toggle-on{background-color:#a5873e}.marker-toggle-knob{background-color:#faf6ec;border-radius:50%;width:14px;height:14px;transition:transform .15s ease-out;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #3c2d1466}.marker-toggle-on .marker-toggle-knob{transform:translate(16px)}.spot-create-overlay{z-index:30;background-color:#0000008c;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.spot-create-card{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#110e0af2;border:1px solid #d8c9a359;flex-direction:column;gap:12px;width:min(360px,100%);padding:22px 24px;display:flex}.spot-create-form{flex-direction:column;gap:12px;display:flex}.spot-create-title{letter-spacing:.15em;color:#d8c9a3;font-size:1rem;font-weight:400}.spot-create-text{color:#a89f92;font-size:.85rem;line-height:1.7}.spot-create-input{color:#f5f0e8;background-color:#f5f0e814;border:1px solid #d8c9a34d;width:100%;padding:8px 10px;font-size:.85rem}.spot-create-buttons{flex-direction:column;gap:8px;margin-top:4px;display:flex}.spot-create-primary,.spot-create-secondary,.spot-create-cancel{letter-spacing:.1em;cursor:pointer;padding:9px 12px;font-size:.85rem}.spot-create-primary{color:#1c1710;background-color:#d8c9a3;border:none}.spot-create-primary:disabled{opacity:.4;cursor:default}.spot-create-secondary{color:#d8c9a3;background:0 0;border:1px solid #d8c9a366}.spot-create-cancel{color:#a89f92;background:0 0;border:none}.loading-screen{z-index:10;background-color:#111;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;display:flex;position:absolute;inset:0}.loading-title{letter-spacing:.5em;padding-left:.5em;font-size:2.5rem;font-weight:400}.loading-subtitle{letter-spacing:.3em;color:#a89f92;padding-left:.3em;font-size:.9rem}.loading-bar{background-color:#333;width:min(280px,60vw);height:2px;margin-top:1.5rem}.loading-bar-fill{background-color:#d8c9a3;height:100%;transition:width .2s ease-out}.loading-percent{color:#a89f92;font-size:.8rem}.loading-memory{letter-spacing:.06em;text-align:center;color:#8d8272;opacity:0;max-width:min(440px,80vw);min-height:2.6em;margin-top:2rem;font-size:.8rem;line-height:1.8;transition:opacity 1.6s ease-in-out}.loading-memory-visible{opacity:1}.loading-bar-preparing{animation:1.6s ease-in-out infinite loading-preparing-pulse}@keyframes loading-preparing-pulse{0%,to{opacity:1}50%{opacity:.4}}.touch-controls{left:0;right:0;bottom:max(20px, env(safe-area-inset-bottom));z-index:20;pointer-events:none;justify-content:center;gap:clamp(48px,16vw,140px);display:flex;position:absolute}.touch-stick{pointer-events:auto;flex-direction:column;align-items:center;gap:8px;display:flex}.touch-stick-base{touch-action:none;background-color:#f5f0e80f;border:1px solid #d8c9a34d;border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;display:flex;box-shadow:inset 0 2px 8px #0006}.touch-stick-knob{pointer-events:none;background:linear-gradient(#cfb269 0%,#a5873e 55%,#8d7132 100%);border-radius:50%;width:52px;height:52px;box-shadow:0 3px 8px #3c2d1466,inset 0 1px #fff4d299}.touch-stick-label{letter-spacing:.25em;color:#b8ad98;-webkit-user-select:none;user-select:none;padding-left:.25em;font-size:.72rem}@media (orientation:landscape){.touch-controls{padding:0 max(18px, env(safe-area-inset-left), env(safe-area-inset-right));justify-content:space-between}}@media (pointer:coarse) and (orientation:portrait){.museum-wall{padding-bottom:176px}.artwork{width:min(86vw,133.333svh - 453.333px);top:0}.memory-place-button{padding:7px 14px;font-size:.72rem}}@media (pointer:coarse) and (orientation:portrait) and (height<=700px){.museum-wall{padding-bottom:140px}.artwork{gap:8px}.art-plate{gap:0;padding:4px 16px}.art-plate-title{font-size:.74rem}.art-plate-caption{font-size:.55rem}.frame-actions{gap:6px 8px}.memory-place-button{padding:5px 9px;font-size:.66rem}.marker-toggle-label{font-size:.64rem}.touch-controls{transform-origin:bottom;bottom:10px;transform:scale(.8)}}.controls-guide{z-index:30;background-color:#0000008c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.controls-guide-card{background-color:#1c1a17;border:1px solid #3a362f;flex-direction:column;align-items:center;gap:1.25rem;max-width:min(320px,85vw);padding:2rem 2.5rem;display:flex}.controls-guide-title{letter-spacing:.2em;padding-left:.2em;font-size:1.1rem;font-weight:400}.controls-guide-list{color:#cfc8bc;flex-direction:column;gap:.5rem;font-size:.9rem;line-height:1.6;list-style:none;display:flex}.controls-guide-button{color:#d8c9a3;letter-spacing:.15em;cursor:pointer;background:0 0;border:1px solid #d8c9a3;padding:.6rem 2.5rem;font-size:.9rem}.controls-guide-button:hover{background-color:#d8c9a326}.viewer-root{width:100%;height:100%;position:relative;overflow:hidden}.spot-marker-layer{z-index:15;pointer-events:none;position:absolute;inset:0;overflow:hidden}.spot-marker-anchor{pointer-events:auto;will-change:transform;position:absolute;top:0;left:0}.spot-marker{cursor:pointer;color:#f5f0e8;background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;display:flex}.spot-marker-icon{background-color:#14100aa6;border:2px solid #d8c9a3;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;transition:transform .15s ease-out;display:flex;box-shadow:0 2px 10px #00000080}.spot-marker:hover .spot-marker-icon,.spot-marker-selected .spot-marker-icon{background-color:#d8c9a3e6;transform:scale(1.15)}.spot-marker-label{letter-spacing:.1em;text-shadow:0 1px 4px #000000e6;white-space:nowrap;font-size:12px}.comment-panel-overlay{z-index:30;background-color:#0000008c;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.comment-panel{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#110e0af2;border:1px solid #d8c9a359;flex-direction:column;width:min(420px,100%);max-height:min(600px,86%);display:flex}.comment-panel-header{border-bottom:1px solid #d8c9a340;justify-content:space-between;align-items:flex-start;gap:8px;padding:16px 18px 12px;display:flex}.comment-panel-title{letter-spacing:.15em;color:#d8c9a3;font-size:1rem;font-weight:400}.comment-panel-description{color:#a89f92;margin-top:4px;font-size:.75rem}.comment-panel-close{color:#a89f92;cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:1.4rem;line-height:1}.comment-panel-close:hover{color:#f5f0e8}.comment-list{overscroll-behavior:contain;flex-direction:column;flex:1;gap:14px;padding:12px 18px;display:flex;overflow-y:auto}.comment-list-status{color:#a89f92;padding:8px 18px;font-size:.85rem;line-height:1.7}.comment-list .comment-list-status{padding:8px 0}.comment-item-meta{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.comment-item-nickname{color:#d8c9a3;font-size:.85rem}.comment-item-date{color:#7d766b;font-size:.7rem}.comment-item-body{white-space:pre-wrap;overflow-wrap:break-word;margin-top:4px;font-size:.85rem;line-height:1.7}.comment-posted{border-top:1px solid #d8c9a340;flex-direction:column;align-items:center;gap:10px;padding:14px 18px 16px;display:flex}.comment-posted-message{letter-spacing:.05em;color:#d8c9a3;font-size:.85rem}.comment-form{border-top:1px solid #d8c9a340;flex-direction:column;gap:8px;padding:12px 18px 16px;display:flex}.comment-form-nickname,.comment-form-body{color:#f5f0e8;background-color:#f5f0e814;border:1px solid #d8c9a34d;width:100%;padding:8px 10px;font-family:inherit;font-size:.85rem}.comment-form-nickname::placeholder,.comment-form-body::placeholder{color:#7d766b}.comment-form-body{resize:vertical;min-height:60px}.comment-form-footer{justify-content:space-between;align-items:center;display:flex}.comment-form-counter{color:#7d766b;font-size:.7rem}.comment-form-submit{color:#d8c9a3;letter-spacing:.1em;cursor:pointer;background:0 0;border:1px solid #d8c9a3;padding:6px 20px;font-size:.85rem}.comment-form-submit:hover:not(:disabled){background-color:#d8c9a326}.comment-form-submit:disabled{opacity:.4;cursor:default}.comment-form-notice{color:#e0b18a;font-size:.75rem}.post-policy{color:#7d766b;font-size:.68rem;line-height:1.6}.report-note{letter-spacing:.04em;color:#6f685d;border-top:1px solid #d8c9a326;padding:8px 18px 12px;font-size:.66rem}.report-note a{color:#8d8272}.camera-debug{z-index:100;color:#9f9;white-space:pre;pointer-events:none;background-color:#0009;padding:6px 10px;font-family:ui-monospace,monospace;font-size:12px;position:fixed;bottom:8px;left:8px}.fallback{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;height:100%;padding:2rem;display:flex}.fallback-title{letter-spacing:.5em;padding-left:.5em;font-size:2.5rem;font-weight:400}.fallback-subtitle{letter-spacing:.3em;color:#a89f92;padding-left:.3em;font-size:.9rem}.fallback-message{color:#cfc8bc;max-width:32em;margin-top:1.5rem;font-size:.95rem;line-height:1.8}