export declare const viewerRootStyles = "\n.comimi-root {\n  --comimi-bg: #fff;\n  --comimi-surface: #f7f7f7;\n  --comimi-surface-2: #eeeeee;\n  --comimi-fg: #333;\n  --comimi-muted: #666;\n  --comimi-soft: #999;\n  --comimi-line: #e0e0e0;\n  --comimi-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n  --comimi-shadow-soft: 0 0 16px 0 rgba(0, 0, 0, 0.06);\n  --comimi-shadow-focus: 0 0 24px 0 rgba(0, 0, 0, 0.14);\n  --comimi-shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.18);\n  --comimi-glass: rgba(255, 255, 255, 0.8);\n  --comimi-glass-strong: rgba(255, 255, 255, 0.8);\n  --comimi-glass-mute: rgba(255, 255, 255, 0.7);\n  --comimi-glass-soft: rgba(255, 255, 255, 0.5);\n  --comimi-overlay-weak: rgba(0, 0, 0, 0.06);\n  --comimi-white: #fff;\n  --comimi-panel: #fff;\n  --comimi-ink: #111;\n  --comimi-surface-3: #f1f1f1;\n  --comimi-faint: #aaa;\n  --comimi-placeholder: #ccc;\n  --comimi-handle: #bbb;\n  --comimi-handle-strong: #888;\n  --comimi-mascot: #fff;\n  --comimi-mascot-shade: #e0e0e0;\n  --comimi-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n  background: var(--comimi-bg);\n  color: var(--comimi-fg);\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  position: relative;\n  width: calc(100% - 24px * 2);\n  max-width: 900px;\n  aspect-ratio: 900 / 636;\n  margin: 0 auto;\n  border-radius: 16px;\n  box-shadow: var(--comimi-shadow-soft);\n  overflow: hidden;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  touch-action: none;\n  transition:\n    box-shadow 0.24s ease-out,\n    background-color 0.16s linear;\n}\n\n.comimi-root *:not(.comimi-html-page):not(.comimi-html-page *) {\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.comimi-root:focus {\n  outline: none;\n  box-shadow: var(--comimi-shadow-focus);\n}\n\n@media (max-width: 767px) {\n  .comimi-root {\n    max-width: 500px;\n    aspect-ratio: 390 / 490;\n  }\n}\n\n.comimi-root[data-bg=\"black\"] {\n  --comimi-bg: #000;\n}\n\n.comimi-root[data-theme=\"dark\"] {\n  --comimi-bg: #1c1c1e;\n  --comimi-surface: #2c2c2e;\n  --comimi-surface-2: #3a3a3c;\n  --comimi-surface-3: #323234;\n  --comimi-fg: #ededed;\n  --comimi-muted: #9a9a9a;\n  --comimi-soft: #7e7e82;\n  --comimi-faint: #6a6a6e;\n  --comimi-placeholder: #555558;\n  --comimi-line: #3f3f43;\n  --comimi-panel: #2c2c2e;\n  --comimi-glass: rgba(40, 40, 43, 0.82);\n  --comimi-glass-strong: rgba(30, 30, 33, 0.92);\n  --comimi-glass-mute: rgba(40, 40, 43, 0.72);\n  --comimi-glass-soft: rgba(45, 45, 48, 0.78);\n  --comimi-overlay-weak: rgba(255, 255, 255, 0.08);\n  --comimi-handle: #555558;\n  --comimi-handle-strong: #76767a;\n  --comimi-mascot: #4a4a4e;\n  --comimi-mascot-shade: #666;\n  --comimi-shadow: 0 0 8px rgba(0, 0, 0, 0.5);\n  --comimi-shadow-soft: 0 0 16px 0 rgba(0, 0, 0, 0.45);\n  --comimi-shadow-focus: 0 0 24px 0 rgba(0, 0, 0, 0.6);\n  --comimi-shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.6);\n}\n\n.comimi-root[data-bg=\"black\"][data-theme=\"dark\"] {\n  --comimi-bg: #000;\n}\n\n.comimi-root[data-layout=\"wide\"] {\n  width: 100%;\n  max-width: none;\n  aspect-ratio: auto;\n  min-height: 450px;\n  max-height: 85vh;\n  margin: 0;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.comimi-root[data-layout=\"browserFullscreen\"],\n.comimi-root[data-layout=\"nativeFullscreen\"] {\n  position: fixed;\n  inset: 0;\n  z-index: 999;\n  width: 100vw;\n  height: 100dvh;\n  max-width: none;\n  aspect-ratio: auto;\n  margin: 0;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.comimi-resize-handle {\n  position: relative;\n  width: 100%;\n  height: 20px;\n  background: var(--comimi-panel, #fff);\n  cursor: ns-resize;\n  touch-action: none;\n}\n\n.comimi-resize-handle::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 40px;\n  height: 3px;\n  border-radius: 999px;\n  background: var(--comimi-handle, #bbb);\n  transition:\n    width 0.36s cubic-bezier(0.34, 1.56, 0.64, 1),\n    height 0.36s cubic-bezier(0.34, 1.56, 0.64, 1),\n    background-color 0.2s linear;\n}\n\n@media (hover: hover) {\n  .comimi-resize-handle:hover::after {\n    width: 52px;\n    height: 5px;\n    background: var(--comimi-handle-strong, #888);\n  }\n}\n\n";
//# sourceMappingURL=viewer-root.styles.d.ts.map