@font-face{font-family:NotoSerifJPLocal;src:url(./NotoSerifJP-Regular-CmE2Ds-Z.ttf) format("truetype");font-display:swap}*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{font-family:Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;font-size:13px;background:#2b2b2b;color:#e8e8e8;overflow:hidden}.app{display:flex;flex-direction:column;height:100%}.loading{display:grid;place-items:center;height:100%}.toolbar{display:flex;align-items:center;gap:16px;padding:8px 16px;background:#1e1e1e;border-bottom:1px solid #444}.toolbar h1{font-size:15px;font-weight:600;margin-right:8px}.toolbar-spacer{flex:1}.toolbar .busy{color:#ffca7a}button{background:#3d3d3d;color:#e8e8e8;border:1px solid #555;border-radius:4px;padding:5px 12px;cursor:pointer;font-size:12px}button:hover{background:#4a4a4a}button.primary{background:#2f6fd6;border-color:#2f6fd6}button.primary:hover{background:#3a7ce2}button.danger{border-color:#a04545;color:#e8a0a0}button.danger:hover{background:#5a2e2e}button:disabled{opacity:.5;cursor:default}select{background:#3d3d3d;color:#e8e8e8;border:1px solid #555;border-radius:4px;padding:4px 6px}.main{display:flex;flex:1;min-height:0}.spread-list{width:240px;overflow-y:auto;padding:12px;background:#262626;border-right:1px solid #444;flex-shrink:0}.thumb{margin-bottom:14px;cursor:pointer;border-radius:4px;padding:6px;border:2px solid transparent}.thumb.selected{border-color:#2f6fd6;background:#2e3644}.thumb-pages{display:flex;gap:3px;pointer-events:none}.thumb-pages .page{box-shadow:0 1px 3px #00000080}.thumb-label{display:flex;align-items:center;justify-content:space-between;margin-top:5px;color:#aaa;font-size:11px}.thumb-actions{display:flex;gap:3px}.thumb-move,.thumb-delete{padding:0 6px;line-height:1.5}.add-spread{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:12px;border-top:1px solid #444}.add-title{font-size:11px;color:#aaa}.editor{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative}.editor-head{position:absolute;top:12px;left:16px;color:#ccc}.spread-canvas{display:flex;align-items:flex-start}.page-wrap{text-align:center}.page{box-shadow:0 2px 12px #0009}.page.blank{background:repeating-linear-gradient(45deg,#3a3a3a,#3a3a3a 8px,#333 8px,#333 16px);border:1px dashed #555;box-shadow:none;display:grid;place-items:center;color:#888;font-size:12px}.page-label{margin-top:8px;color:#aaa}.photo-slot.empty{display:grid;place-items:center;border:1px dashed #bbb}.photo-slot.dropping{outline:3px solid #2f6fd6;outline-offset:-3px;background:#eaf1fc}.photo-slot.empty.mini{border-width:1px}.empty-label{color:#888;font-size:12px;padding:4px}.slot-controls{position:absolute;left:50%;bottom:6px;transform:translate(-50%);display:flex;gap:6px;align-items:center;background:#141414bf;border-radius:4px;padding:4px 8px}.slot-controls input[type=range]{width:110px}.slot-controls button{padding:2px 8px;font-size:11px}.text-frame{overflow:hidden}.text-frame:not(.mini):hover{outline:1px dashed #9ab}.text-placeholder{color:#bbb}.text-frame-edit{border:1px solid #2f6fd6;background:#f0f6ffe6;outline:none;padding:0;overflow:hidden;text-align:center}