*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:#020208;width:100%;height:100%;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}.app{width:100vw;height:100vh;position:relative;overflow:hidden}.canvas-container{width:100%;height:100%;position:absolute;inset:0}.canvas-vignette{pointer-events:none;opacity:.38;background:radial-gradient(100% 100%,#0000 22%,#000000d1 100%);transition:opacity .7s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}.canvas-vignette.active{opacity:.92}.detail-panel-shell{z-index:20;color:#e8eaf0;opacity:0;pointer-events:none;background:linear-gradient(135deg,#0a0a1af7 0%,#12122af7 50%,#0d1525f7 100%);border-left:1px solid #ffffff0f;width:30%;height:100%;transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .55s cubic-bezier(.4,0,.2,1);position:absolute;top:0;right:0;overflow:hidden;transform:translate(100%)}.detail-panel-shell.open{opacity:1;pointer-events:auto;transform:translate(0)}.detail-panel-content{flex-direction:column;width:100%;height:100%;padding:2.5rem 2rem;display:flex;overflow-y:auto}.back-button{color:#c8ccd8;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px;align-items:center;gap:.6rem;width:fit-content;padding:.65rem 1.2rem;font-size:.9rem;transition:background .2s,color .2s,border-color .2s;display:inline-flex}.back-button:hover{color:#fff;background:#ffffff1f;border-color:#ffffff40}.detail-content{max-width:520px;margin-top:3rem}.detail-label{text-transform:uppercase;letter-spacing:.15em;color:#6b7280;margin-bottom:.5rem;font-size:.75rem}.detail-title{letter-spacing:-.02em;background:linear-gradient(135deg,#fff 0%,#a0aec0 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.5rem;font-weight:700;line-height:1.1}.detail-divider{background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:2px;width:60px;height:3px;margin:1.5rem 0 2rem}.detail-text{color:#9ca3af;margin-bottom:1.25rem;font-size:1.05rem;line-height:1.75}.detail-text.lorem{color:#6b7280;font-size:.95rem}.detail-subtitle{color:#b8c0d0;margin-bottom:1.25rem;font-size:1.1rem;line-height:1.5}.location-divider{background:linear-gradient(90deg,#e5252a,#ff6b6b)}.location-card-image{aspect-ratio:16/10;color:#8b93a7;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(135deg,#e5252a1f 0%,#ffffff0a 100%);border:1px dashed #ffffff38;border-radius:12px;justify-content:center;align-items:center;width:100%;max-width:420px;margin:0 0 1.25rem;font-size:.82rem;font-weight:600;display:flex}.planet-name-label{color:#e8ecf8;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:#0a1833;border:2px solid #1a3d6b;border-radius:4px;padding:4px 10px;font-size:14px;font-weight:600;line-height:1.2;box-shadow:0 2px 10px #00000059}.planet-name-label--active{border-color:#3d6eb0;box-shadow:0 4px 20px #00000073}@media (aspect-ratio>=13/20) and (aspect-ratio<=99/100){.detail-panel-shell{width:40%}}@media (aspect-ratio<=13/20){.detail-panel-shell{border-top:1px solid #ffffff0f;border-left:none;width:100%;height:50%;inset:auto 0 0;transform:translateY(100%)}.detail-panel-shell.open{transform:translateY(0)}.detail-panel-content{padding:1.5rem 1.25rem}.detail-content{max-width:none;margin-top:1.5rem}.detail-title{font-size:2rem}}