.preview-panel { padding: 16px; border: 1px solid #ffffff27; border-radius: 17px; background: linear-gradient(150deg,#23242c,#1b2028); box-shadow: 0 25px 90px #0004; display: flex; flex-direction: column; }
.preview-topline, .preview-bottomline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; color: #aeb2b7; font-size: 10px; letter-spacing: .12em; }
.preview-topline { margin-bottom: 15px; }
.preview-bottomline { margin-top: 15px; letter-spacing: .035em; }
.preview-bottomline>span:first-child { display: flex; align-items: center; gap: 7px; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #dabbaa; margin-right: 8px; box-shadow: 0 0 8px #f2b0a2aa; }
.source-pill { border: 1px solid #ffffff27; border-radius: 100px; padding: 3px 10px; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #d1b5ae; letter-spacing: .015em; }
.canvas-frame { position: relative; display: grid; place-items: center; flex: 1; min-height: 0; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; background: #111019; box-shadow: inset 0 0 0 1px #ffffff1a; }
#kaleidoscope { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#kaleidoscope:active { cursor: grabbing; }
.canvas-ornament { position: absolute; inset: 10px; border: 1px solid #ffffff38; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1px #0002; }
.preview-size { font-family: Georgia,serif; font-style: italic; white-space: nowrap; color: #83838b; }
.control-panel { padding: 24px 26px 19px; border: 1px solid #ffffff23; border-radius: 17px; background: #191f26e9; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 19px; }
.panel-kicker { font-size: 9px; letter-spacing: .20em; }
h2 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 26px; font-weight: 500; letter-spacing: .06em; line-height: 1.4; margin: 7px 0 0; }
.tiny-flower { color: #c994a0; font-size: 33px; line-height: 1; }
.panel-section { border-top: 1px solid #ffffff20; padding: 18px 0 20px; }
.section-label { display: flex; align-items: center; gap: 10px; color: #f4ece7; font-size: 12px; font-weight: 600; letter-spacing: .08em; margin-bottom: 16px; }
.step-num { display: grid; place-items: center; width: 23px; height: 23px; color: #c9a29b; border: 1px solid #c9a29b73; border-radius: 50%; font: 11px Georgia,serif; }
.upload-button { display: flex; align-items: center; gap: 13px; padding: 14px 16px; min-height: 68px; background: #e5c8bd; color: #2a2830; border-radius: 9px; cursor: pointer; transition: background .15s,transform .15s; }
.upload-button:hover { background: #f4d8cd; transform: translateY(-1px); }
.upload-icon { width: 34px; height: 34px; border: 1px solid #58484c66; border-radius: 50%; display: grid; place-items: center; font-size: 23px; line-height: 1; font-weight: 300; }
.upload-button strong { display: block; font-size: 13px; letter-spacing: .04em; }
.upload-button small { display: block; font-size: 10px; font-weight: 500; color: #655960; margin-top: 1px; }
.button-arrow { margin-left: auto; font-size: 17px; }
.text-button { display: block; margin: 12px auto 0; padding: 4px 8px; color: #bdafb0; background: none; border: none; font-size: 11px; letter-spacing: .03em; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: #f7d0c8; }
.setting { margin-bottom: 17px; }
.setting-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.setting-header label { color: #d6d1d0; font-size: 12px; }
.setting-header output { min-width: 48px; color: #e8bcc0; font-family: Georgia,serif; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { display: block; width: 100%; height: 18px; margin: 0; accent-color: #d3a6a7; cursor: pointer; background: transparent; }
.setting-hints { display:flex; justify-content:space-between; margin-top: -1px; color:#777e85; font-size:10px; }
.outline-button { width:100%; min-height: 42px; border:1px solid #ad8f9290; border-radius: 7px; background:#ffffff08; color:#e7c4c4; font-size: 12px; letter-spacing:.04em; }
.outline-button:hover { background:#ffffff14; }
.outline-button span { margin-right:6px; font-size: 17px; }
.motion-section { padding-bottom: 14px; }
.motion-controls { display: flex; align-items: center; gap: 16px; margin-bottom: 17px; }
.play-button { min-height: 45px; min-width: 139px; display:flex; align-items:center; justify-content:center; gap: 10px; border:1px solid #ffffff3b; background: #222b33; border-radius: 8px; color:#f0e4e0; font-size:12px; }
.play-button:hover { background: #303843; }
.play-button #play-symbol { font-size: 12px; color: #e5b8bb; }
.speed-control { flex:1; min-width: 0; }
.speed-control label { display:block; color:#989da3; font-size:10px; margin-bottom:4px; }
.save-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; border: 0; border-radius: 8px; background: #c8a1ad; color: #1c1820; font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.save-button:hover { background: #e3b9c3; }
.save-button>span:first-child { font-size: 22px; font-weight: 400; }
.save-format { padding: 3px 6px; border:1px solid #28202a55; border-radius: 3px; font-size: 9px; letter-spacing: .12em; font-weight:600; }
.privacy-note { display:flex; align-items:baseline; gap:8px; margin: 6px 0 0; color:#899097; font-size:10px; line-height: 1.7; }
.privacy-note span { color:#c0a7a5; font-size:17px; }
#app-loading-overlay { position: fixed; inset:0; z-index:100; display:grid; place-items:center; background:#05080cb8; }
.app-loading-panel { padding: 23px 35px; border: 1px solid #ffffff30; border-radius: 12px; background:#222932; color:#eee6e3; text-align:center; font-size:13px; }
.app-loading-spinner { display:block; margin:0 auto 10px; width:26px; height:26px; border:2px solid #ffffff36; border-top-color:#edc4c5; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to {transform:rotate(360deg)} }
#app-toast-container { position:fixed; z-index:110; left:50%; bottom:20px; transform:translateX(-50%); width:min(400px,calc(100% - 32px)); display:grid; gap:10px; }
.app-toast { padding:12px 17px; border:1px solid #e9c4c475; border-radius:8px; background:#31343c; color:#f7eee9; font-size:12px; box-shadow: 0 10px 40px #0006; }
.app-toast-error { border-color:#d88484; }