*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #141414;--bg-card: #1a1a1f;--bg-card-hover: #22222a;--text-primary: #e5e5e5;--text-heading: #f4f4f0;--text-muted: #8a8a86;--ocean: #0a1628;--land: #2d5a3d;--tissot: #e8c478;--border: rgba(255, 255, 255, .1);--font: "Noto Sans JP", sans-serif;--ease-out: cubic-bezier(.23, 1, .32, 1)}html,body{min-height:100%;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font)}body{overflow-x:hidden;overflow-y:auto;padding-top:48px}#app{width:100%;min-height:calc(100vh - 48px);display:flex;align-items:stretch;justify-content:center}.view{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:48px 24px 64px}.view-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;color:var(--text-heading);margin-bottom:12px;text-align:center;letter-spacing:0}.view-subtitle{font-size:1rem;color:var(--text-muted);margin-bottom:40px;text-align:center;max-width:36rem;line-height:1.7}.heading-label{color:var(--text-heading)}.heading-subtitle{color:var(--text-muted);font-weight:400;font-size:.7em}.card-grid{display:grid;gap:24px;width:100%;justify-content:center}.category-grid{grid-template-columns:repeat(4,minmax(0,240px));margin-bottom:32px}.projection-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-bottom:32px}.card{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;font-family:inherit;color:inherit;text-align:left;display:flex;flex-direction:column;align-items:stretch;animation:cardFadeIn .24s var(--ease-out) both;transition:transform .16s var(--ease-out),border-color .16s ease,background .16s ease}.card:focus-visible{outline:2px solid var(--tissot);outline-offset:3px}@media(hover:hover)and (pointer:fine){.card:hover{background:var(--bg-card-hover);border-color:#ffffff47}}.card:active{transform:scale(.97)}.card-canvas{border-radius:8px;margin-bottom:12px;width:100%;height:auto;background:var(--ocean);pointer-events:none}.card-label{font-size:1.35rem;font-weight:900;color:var(--text-heading);margin-bottom:2px}.card-label-small{font-size:1.05rem;font-weight:700}.card-subtitle{font-size:.85rem;color:var(--text-muted);margin-bottom:8px}.card-description{font-size:.8rem;color:var(--text-primary);line-height:1.6;margin-top:8px}.card-examples{list-style:none;padding:0;margin:10px 0 0}.card-examples li{padding:2px 0;font-size:.78rem;line-height:1.5;color:var(--text-muted)}.card-examples li:before{content:"· ";color:#ffffff59}.property-badges{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:8px 0 0;padding:0}.property-badge{font-size:.72rem;line-height:1;padding:5px 8px;border-radius:999px;border:1px solid var(--border);color:var(--text-primary);background:#ffffff0a}.property-mark{margin-right:4px}.property-preserved .property-mark{color:#8fce9a}.property-partial .property-mark{color:var(--tissot)}.property-distorted .property-mark{color:#d98989}.back-button{position:sticky;top:16px;align-self:flex-start;background:var(--bg-primary);border:1px solid rgba(255,255,255,.15);color:var(--text-primary);font-family:var(--font);font-size:.95rem;padding:10px 16px;min-height:44px;border-radius:10px;cursor:pointer;margin-bottom:24px;z-index:2;transition:background .16s ease,border-color .16s ease,transform .16s var(--ease-out)}.back-button:hover{background:#ffffff14;border-color:#ffffff4d}.back-button:active{transform:scale(.97)}.back-button:focus-visible{outline:2px solid var(--tissot);outline-offset:2px}.text-action{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--text-muted);font-family:inherit;font-size:.95rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:8px}.text-action:hover{color:var(--text-heading)}.text-action:focus-visible{outline:2px solid var(--tissot);outline-offset:2px}.preview-view,.compare-view{max-width:1280px;align-items:stretch}.observe-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr);gap:32px;width:100%;align-items:start}.observe-map{position:sticky;top:16px;min-width:0}.preview-canvas,.compare-canvas{display:block;width:100%;height:auto;border-radius:12px;background:var(--ocean);cursor:grab;touch-action:none}.preview-canvas.is-dragging,.compare-canvas.is-dragging{cursor:grabbing}.map-hint{font-size:.8rem;color:var(--text-muted);margin-top:8px}.map-toggles{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}.map-toggle{display:flex;align-items:center;gap:8px;font-size:.85rem;cursor:pointer;min-height:44px}.map-toggle input{width:16px;height:16px;accent-color:var(--tissot)}.observe-info{min-width:0}.preview-kicker{font-size:.8rem;color:var(--text-muted);margin-bottom:6px}.preview-title{font-size:1.8rem;font-weight:900;color:var(--text-heading);margin-bottom:4px}.preview-subtitle{font-size:1rem;color:var(--text-muted);margin-bottom:12px}.preview-description,.preview-legend{font-size:.95rem;line-height:1.7;margin-top:16px}.preview-legend{color:var(--tissot);font-size:.85rem}.observe-heading{font-size:.8rem;font-weight:700;color:var(--text-muted);margin:24px 0 8px}.info-examples li{color:var(--text-primary);font-size:.9rem}.code-block{margin-top:20px;padding:12px 14px;background:#0e0e12;border:1px solid var(--border);border-radius:10px;overflow-x:auto;font-size:.8rem;line-height:1.5;color:#d7d2c3}.observe-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:.9rem;min-height:44px;padding:10px 16px;border-radius:10px;border:1px solid transparent;background:var(--tissot);color:#1a1408;cursor:pointer;transition:transform .16s var(--ease-out),filter .16s ease}.action-button:hover{filter:brightness(1.08)}.action-button:active{transform:scale(.97)}.action-button:focus-visible{outline:2px solid var(--text-heading);outline-offset:2px}.action-secondary{background:transparent;border-color:var(--border);color:var(--text-primary)}.action-secondary:hover{filter:none;background:#ffffff0f}.compare-heading{margin-top:8px}.compare-toggles{justify-content:center;margin:-16px 0 24px}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%}.compare-pane{min-width:0}.compare-select{width:100%;min-height:44px;margin-bottom:12px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-family:inherit;font-size:.9rem}.compare-title{font-size:1.1rem;margin-top:12px}.compare-pane .action-button{margin-top:12px}.compare-subtitle{font-size:.85rem;color:var(--text-muted)}.error-view{justify-content:center;min-height:80vh}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.fade-in{animation:viewFadeIn .24s var(--ease-out) both}@keyframes viewFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1100px){.category-grid{grid-template-columns:repeat(2,minmax(0,280px))}}@media(max-width:800px){.observe-panel,.compare-grid{grid-template-columns:1fr}.observe-map{position:static}.view{padding:24px 16px 48px}}@media(max-width:560px){.category-grid,.projection-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.card,.fade-in{animation:none}.card,.back-button,.action-button{transition:none}}