:root{color-scheme:dark;--bg:#101216;--bg-elevated:#181b21;--bg-inset:#0b0d11;--border:#2a2e37;--border-soft:#20232a;--text:#e8eaed;--text-dim:#9aa0ac;--accent:#ffe000;--accent-soft:#ffe00026;--header-gradient:linear-gradient(135deg, #fff35c 0%, #ffe000 45%, #f4b400 100%);--header-text:#1a1608;--header-text-dim:#1a1608a6;--radius:10px;--sidebar-width:320px;--header-height:clamp(31px, calc(7.5vw - 17px), 55px);accent-color:var(--accent)}*{box-sizing:border-box}html,body{height:100dvh;margin:0}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.4}#app{height:100%}.app-shell{height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex}.app-header{height:var(--header-height);background:var(--header-gradient);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:.75rem;padding:0 1rem;display:flex}.app-title{align-items:center;height:100%;margin:0;display:flex}.app-title-image{width:auto;height:70%;display:block}.app-status{color:var(--header-text-dim);text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0;font-size:.8rem;overflow:hidden}.app-layout{flex:1;min-height:0;display:flex;position:relative}.canvas-stage{outline-offset:-.5rem;border-radius:var(--radius);outline:2px dashed #0000;flex-direction:column;flex:1;min-width:0;min-height:0;padding:1.25rem;transition:outline-color .1s;display:flex}.canvas-stage.drag-over{outline-color:var(--accent)}.canvas-box{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-inset);touch-action:none;width:100%;height:100%;line-height:0;position:relative;overflow:hidden}.canvas-box canvas{object-fit:contain;width:100%;height:100%;display:block}.source-preview-box{touch-action:pan-y;background-color:#d8d8d8;background-size:10px 10px;height:220px}.source-photo-layer{transform-origin:50%;width:100%;height:100%;position:absolute;inset:0;transform:scale(.85)}canvas.tiling-preview-canvas{object-fit:fill;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.hatch-canvas{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.icon-row{grid-auto-columns:1fr;grid-auto-flow:column;gap:.5rem;display:grid}.icon-btn-wrapper{display:flex}.icon-btn{background:var(--bg-inset);width:100%;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;justify-content:center;align-items:center;padding:.55rem;font-size:1.15rem;line-height:1;display:flex}.icon-btn svg{width:1.1em;height:1.1em}.icon-btn:hover:not(:disabled){border-color:var(--accent)}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.gallery-dialog{background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);max-width:min(90vw,640px);padding:1rem}.gallery-dialog::backdrop{background:#0009}.gallery-dialog-title{margin:0 0 .75rem;font-size:1rem}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;display:grid}.gallery-item{background:var(--bg-inset);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;flex-direction:column;align-items:center;gap:.4rem;padding:.5rem;display:flex}.gallery-item:hover{border-color:var(--accent)}.gallery-item img{aspect-ratio:1;object-fit:cover;border-radius:calc(var(--radius) - 4px);width:100%}.gallery-item span{text-align:center;font-size:.78rem}.gallery-dialog-error{color:#ff6b6b;min-height:1em;margin:.75rem 0 0;font-size:.8rem}.gallery-dialog-close{margin-top:1rem}.hint-text{color:var(--text-dim);margin:0;font-size:.8rem}.camera-overlay{z-index:1000;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.camera-modal{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.75rem;width:min(90vw,640px);padding:1rem;display:flex}.camera-modal video{border-radius:var(--radius);background:var(--bg-inset);width:100%}.camera-modal-actions{justify-content:flex-end;gap:.5rem;display:flex}.sidebar{width:var(--sidebar-width);background:var(--bg-elevated);border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:.5rem;min-height:0;padding:.75rem;display:flex;overflow-y:auto}.section{background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--radius);flex-shrink:0;overflow:hidden}.section-summary{cursor:pointer;user-select:none;align-items:center;gap:.5rem;padding:.65rem .85rem;font-size:.85rem;font-weight:600;list-style:none;display:flex}.section-summary>span:first-child{flex:1}.section-reset{border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);color:var(--text-dim);cursor:pointer;background:0 0;padding:.2rem .5rem;font-size:.72rem;font-weight:500}.section-reset:hover{color:var(--text);border-color:var(--accent)}.section-summary::-webkit-details-marker{display:none}.section-summary:after{content:"▸";color:var(--text-dim);font-size:.7rem;transition:transform .15s}.section[open]>.section-summary:after{transform:rotate(90deg)}.section-summary:hover{background:var(--accent-soft)}.section-body{flex-direction:column;gap:.75rem;padding:.25rem .85rem .85rem;display:flex}.subgroup{flex-direction:column;gap:.75rem;display:flex}.subgroup.hidden{display:none}.control{flex-direction:column;gap:.3rem;display:flex}.control.hidden{display:none}.control-label{color:var(--text-dim);justify-content:space-between;font-size:.78rem;display:flex}.control-slider-row{align-items:center;gap:.5rem;display:flex}.control input[type=range]{flex:1;width:100%}.control-number{background:var(--bg-inset);width:4.2rem;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);flex-shrink:0;padding:.3rem .4rem;font-size:.78rem}.control select,.control input[type=file],.control input[type=color]{background:var(--bg-inset);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);width:100%;padding:.4rem .5rem;font-size:.82rem}.control input[type=color]{cursor:pointer;height:2.2rem;padding:.2rem}.control-checkbox{flex-direction:row;align-items:center;gap:.5rem}.control-checkbox input{cursor:pointer;width:1rem;height:1rem}.control-checkbox span{font-size:.82rem}.quality-slider-ticks{color:var(--text-dim);justify-content:space-between;font-size:.72rem;display:flex}.btn{background:var(--bg-inset);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:.55rem .85rem;font-size:.85rem}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a1608;font-weight:600}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.btn-progress{justify-content:center;align-items:center;display:flex}.btn-spinner{border:2px solid;border-top-color:#0000;border-radius:50%;width:1rem;height:1rem;animation:.7s linear infinite btn-spin}@keyframes btn-spin{to{transform:rotate(360deg)}}.keyframe-list{flex-direction:column;gap:.6rem;display:flex}.keyframe-rows{flex-direction:column;gap:.4rem;display:flex}.keyframe-row{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;align-items:center;gap:.5rem;padding:.5rem;display:flex}.keyframe-row.active{border-color:var(--accent)}.keyframe-row-label{color:var(--text-dim);flex-shrink:0;font-size:.78rem}.keyframe-row .control{flex:1;gap:0}.keyframe-row .control-label{display:none}@media (width<=959px) and (orientation:portrait){.app-layout{flex-direction:column}.canvas-stage{flex:50%}.sidebar{border-left:none;border-top:1px solid var(--border);flex:50%;width:auto}}