/* Standalone and embedded H5 overrides. Host insets can be passed as URL parameters. */
:root { --host-nav-offset: 0px; }
html, body { width: 100%; min-height: 0; }
body, #app { height: var(--app-height, 100%); }
@supports (height: 100dvh) { body { height: var(--app-height, 100dvh); } }
.home { padding-top: calc(var(--safe-top) + var(--host-nav-offset) + 24px); }
.player-hud { padding-top: calc(var(--safe-top) + var(--host-nav-offset) + 18px); }
.home-panel-hero p, .preset-line, .painting-name, .instrument-line { font-size: 12px; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid #b28a4c; outline-offset: 3px; }
.btn-icon, .close-sheet, .sound-notice-close { min-width: 44px; min-height: 44px; }
input[type=text], input:not([type]), textarea { font-size: 16px; }
.share-card-wrap img { width: min(100%, 360px); display: block; margin: 0 auto; border-radius: 12px; -webkit-touch-callout: default; user-select: auto; }
.share-note { padding: 12px 8px; text-align: center; font-size: 12px; line-height: 1.8; color: #6b756e; }
.source-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.source-actions button, .source-actions a { padding: 10px 14px; border-radius: 20px; background: #e7dfcf; color: #295e53; font-size: 12px; text-decoration: none; }
.original-sheet { height: calc(100% - var(--safe-top) - 20px); max-height: none; display: flex; flex-direction: column; }
.original-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px; background: #252c26; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.original-scroll img { display: block; height: 100%; width: auto; max-width: none; object-fit: contain; margin: auto; -webkit-touch-callout: default; }
.original-scroll.is-portrait img { width: 100%; height: auto; }
.original-meta { padding: 12px 16px; font-size: 12px; line-height: 1.8; color: #68746c; }
.original-meta a { color: #295e53; }
.art-thumb-image { object-position: var(--art-x, 50%) var(--art-y, 50%); }
.art-status { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; color: #f6f0e4; background: rgba(15,25,22,.5); font-size: 13px; pointer-events: none; }
.art-status button { pointer-events: auto; margin-left: 12px; padding: 12px; border-radius: 8px; }
.player-hud.is-hidden { pointer-events: none; }
.player:focus-within .player-hud { opacity: 1; pointer-events: auto; }
.dream-visual.is-paused .dream-motion-layers { display: none; }
@media (max-width: 360px) { .home { padding-left: 10px; padding-right: 10px; } .player-controls { gap: 5px; } .player-tool, .share-video { padding: 10px 7px; font-size: 11px; } .hero h1 { font-size: 32px; } }
@media (orientation: landscape) and (max-height: 540px) { .player-center { display: none; } .player-bottom { margin-top: auto; } .home { padding-top: calc(var(--safe-top) + 12px); } .sheet { max-height: 95%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }