*{box-sizing:border-box}body,html{height:100%;margin:0}body{background:#fff;color:#333;font-family:Arial,Helvetica,sans-serif}.app-shell{height:100vh;min-height:560px;display:grid;grid-template-columns:300px 1fr;grid-template-rows:1fr auto;overflow:hidden}.sidebar{grid-row:1/3;min-height:0;overflow-y:auto;background:#333;color:#fff;padding:18px 0;display:flex;flex-direction:column}.brand{font-size:14px;padding:0 20px 22px}.sidebar nav{display:flex;flex-direction:column}.sidebar nav button{background:none;border:0;color:#fff;cursor:pointer;font-size:15px;text-align:left;padding:10px 50px;line-height:22px}.sidebar nav button:focus-visible:not(:disabled),.sidebar nav button:hover:not(:disabled){background:#4b4b4b}.sidebar nav button:disabled{opacity:.42;cursor:not-allowed}.sidebar nav .info-nav-button[aria-expanded=true],.sidebar nav .settings-nav-button[aria-expanded=true],.sidebar nav .share-nav-button[aria-expanded=true],.sidebar nav .webcam-nav-button[aria-expanded=true],.webcam-panel{background:#4d4d4d}.webcam-panel{min-width:0;color:#ccc;padding:12px 20px;font-size:11px;line-height:1.4;overflow:hidden}.webcam-privacy{margin:0 0 10px}.webcam-video{display:block;width:100%;max-width:260px;aspect-ratio:4/3;height:auto;object-fit:cover;background:#222;transform:scaleX(-1);margin:0 auto 10px}.sidebar nav .webcam-panel .webcam-capture{display:block;width:100%;padding:7px 8px;border:1px solid #aaa;background:#333;color:#fff;cursor:pointer;font-size:11px}.sidebar nav .webcam-panel .webcam-capture:focus-visible,.sidebar nav .webcam-panel .webcam-capture:hover{border-color:#fff}.sidebar nav .webcam-panel .webcam-capture:disabled{opacity:.45;cursor:not-allowed}.webcam-error{margin:0 0 10px;background:#c0392b;color:#fff;padding:5px 7px}.settings-panel{background:#4d4d4d;color:#ccc;padding:15px 20px}.setting-row{display:flex;align-items:flex-start;font-size:14px;line-height:21px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.setting-row+.setting-row{margin-top:15px}.setting-row span{flex:1 1;min-width:0;padding-right:30px}.setting-row input{flex:none;width:13px;height:13px;margin:3px 0 0}.setting-row input:focus-visible{outline:2px solid #fff;outline-offset:4px}.info-panel{min-width:0;max-height:min(42vh,360px);overflow-y:auto;background:#4d4d4d;color:#ccc;padding:14px 20px;line-height:1.5}.info-content{min-width:0;overflow-wrap:anywhere;font-size:11px}.info-content h2,.info-content h3{color:#fff;font-weight:400;line-height:1.3}.info-content h2{font-size:14px;margin:0 0 10px}.info-content h3{font-size:12px;margin:14px 0 4px}.info-content p{margin:0 0 10px}.info-content a{color:#fff;text-decoration:underline;text-underline-offset:2px}.info-content a:focus-visible,.info-content a:hover{color:#fff;text-decoration-thickness:2px}.sidebar-note{margin:auto 20px 20px;color:#999;font-size:11px;line-height:1.7}.workspace{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:42px 1fr 48px;background:#fff}.workspace-topline{display:flex;align-items:center;gap:14px;padding:7px 15px;color:#777;font-size:11px}.controls-button,.small-button{background:#fff;border:1px solid #d0d0d0;color:#444;font-size:11px;padding:7px 12px;cursor:pointer}.controls-button:focus-visible,.controls-button:hover,.small-button:focus-visible,.small-button:hover{border-color:#777}.image-stage{position:relative;margin:0;width:100%;height:100%;background:#fff;overflow:hidden}.panzoom-viewport{position:absolute;inset:0;overflow:hidden;cursor:-webkit-grab;cursor:grab;touch-action:none}.panzoom-viewport:active{cursor:-webkit-grabbing;cursor:grabbing}.panzoom-content{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.result-canvas{display:block;image-rendering:auto}.image-stage.is-empty .panzoom-content{display:none}.drop-hint{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#aaa;font-size:13px;line-height:2;pointer-events:none}.drop-hint small{font-size:11px}.workspace-actions{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;color:#555;font-size:11px}.workspace-actions input{flex:1 1;min-width:0;accent-color:#333}.control-bar{grid-column:2;min-height:100px;background:#333;color:#ccc;display:flex;align-items:center;gap:20px;padding:12px 14px;position:relative}.control{flex:1 1;min-width:135px;display:grid;grid-template-columns:auto 36px;grid-template-rows:18px 20px;grid-column-gap:9px;column-gap:9px;font-size:11px}.control input{grid-column:1/3;width:100%;height:20px;accent-color:#aaa}.control output{grid-column:2;grid-row:1;text-align:right}.download-button,.random-button,.reset-button{font-size:11px;letter-spacing:.02em;padding:8px 11px;border:1px solid #666;background:#333;color:#fff;cursor:pointer;white-space:nowrap}.download-button:focus-visible,.download-button:hover,.random-button:focus-visible,.random-button:hover,.reset-button:focus-visible,.reset-button:hover{border-color:#fff}.download-button{background:#555}.download-button:disabled{opacity:.4;cursor:not-allowed}.error{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);margin:0;background:#c0392b;color:#fff;padding:6px 10px;font-size:11px}@media(max-width:800px){.app-shell{grid-template-columns:190px 1fr;grid-template-rows:1fr auto}.sidebar{grid-row:1/3}.sidebar nav button{padding-left:24px}.info-panel{padding-left:12px;padding-right:12px}.webcam-panel{padding-left:8px;padding-right:8px}.control-bar{grid-column:2;flex-wrap:wrap;height:auto;gap:10px}.control{min-width:calc(50% - 10px)}.image-stage{width:100%}}@media(max-width:560px){.app-shell{display:flex;flex-direction:column;height:auto;min-height:100vh;overflow:auto}.sidebar{height:auto;flex:none;padding-bottom:8px}.sidebar-note{display:none}.sidebar nav{display:grid;grid-template-columns:repeat(3,1fr)}.settings-panel{grid-column:1/-1;grid-row:3}.info-panel{grid-column:1/-1;grid-row:auto;max-height:42vh;padding:12px 20px}.webcam-panel{grid-column:1/-1;padding-left:20px;padding-right:20px}.sidebar nav button{padding:7px 12px;font-size:12px}.brand{padding-bottom:10px}.workspace{min-height:58vh}.control-bar{grid-column:auto;min-height:0;padding:14px;display:grid;grid-template-columns:1fr 1fr}.control{min-width:0}.download-button,.random-button,.reset-button{width:100%}.workspace-topline{font-size:10px}.image-stage{height:calc(58vh - 90px)}}.share-panel{background:#4d4d4d;color:#ccc;padding:12px 20px;font-size:11px;line-height:1.5}.share-panel p{margin:0 0 10px}.share-upload{width:100%;padding:7px 8px;border:1px solid #aaa;background:#333;color:#fff;cursor:pointer;font-size:11px}.share-upload:focus-visible,.share-upload:hover{border-color:#fff}.share-upload:disabled{opacity:.45;cursor:not-allowed}.share-status{color:#ddd}.share-error{background:#c0392b;color:#fff;padding:5px 7px}.share-result{display:flex;flex-direction:column;gap:7px;margin-top:10px;overflow-wrap:anywhere}.share-result a{color:#fff;text-decoration:underline}.share-links{display:flex;flex-direction:column;gap:6px}.share-destination{display:block;background:#333;border:1px solid #aaa;color:#fff!important;text-decoration:none!important;padding:7px 8px;text-align:center}.share-destination:focus-visible,.share-destination:hover{border-color:#fff;background:#555}.sidebar nav .share-upload{padding:7px 8px}.share-history{margin-top:14px;border-top:1px solid #666;padding-top:10px}.share-history h3{font-size:11px;font-weight:400;margin:0 0 8px;color:#fff}.share-history-row{display:grid;grid-template-columns:44px minmax(0,1fr) 84px;grid-gap:8px;gap:8px;align-items:center;margin:0 0 10px;min-width:0}.share-history-placeholder,.share-history-row img{display:block;width:44px;height:44px;object-fit:cover;background:#333}.share-history-placeholder{border:1px solid #777}.share-history-meta{min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}.share-history-meta strong,.share-history-meta time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.share-history-meta strong{font-size:11px;color:#fff}.share-history-meta time{font-size:10px;color:#aaa}.share-history-actions{grid-column:3;min-width:0;display:flex;flex-direction:column;gap:4px}.share-history-open,.sidebar nav .share-history-actions button{display:block;width:100%;min-width:0;background:#333;border:1px solid #888;color:#fff;font-size:9px;line-height:1.2;padding:5px 2px;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}.share-history-open:focus-visible,.share-history-open:hover,.sidebar nav .share-history-actions button:focus-visible,.sidebar nav .share-history-actions button:hover:not(:disabled){border-color:#fff}.sidebar nav .share-history-actions button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:800px){.share-panel{padding-left:8px;padding-right:8px}.share-history-row{grid-template-columns:36px minmax(0,1fr) 72px;gap:4px}.share-history-placeholder,.share-history-row img{width:36px;height:36px}.share-history-open,.sidebar nav .share-history-actions button{font-size:8px;padding:5px 1px}}@media(max-width:560px){.share-panel{grid-column:1/-1;padding-left:20px;padding-right:20px}.share-history-row{grid-template-columns:44px minmax(0,1fr) 84px;gap:8px}.share-history-placeholder,.share-history-row img{width:44px;height:44px}.share-history-open,.sidebar nav .share-history-actions button{font-size:9px;padding:5px 2px}}