:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;color:#f3f5ef;background:#0c0e0d;--accent:#d8ef9a;--muted:#8d9690}
*{box-sizing:border-box}
body{margin:0;overscroll-behavior:none}
button,input{font:inherit}
button{border:0;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button:disabled{opacity:.35;cursor:default}
button,video,img{-webkit-user-select:none;user-select:none}
svg{width:23px;height:23px;display:block;flex-shrink:0}
[hidden]{display:none!important}
.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
.camera-app{width:100%;max-width:480px;height:100dvh;min-height:0;margin:auto;background:#151716;display:flex;flex-direction:column;position:relative;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}
.toolbar{height:52px;flex-shrink:0;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.wordmark{font-size:23px;font-weight:800;letter-spacing:-1.5px;display:flex;gap:4px;align-items:center;width:62px;flex-shrink:0}
.wordmark i{width:5px;height:5px;background:#d8ef9a;border-radius:50%;margin-top:-15px}
#mode-label{font-size:11px;color:#a8b2aa;letter-spacing:1px}
.icon-button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:none;color:#a3ada5}
.icon-button[aria-pressed=true]{color:var(--accent);background:#d8ef9a10}
.viewfinder-wrap{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;background:#101512;overflow:hidden}
#viewfinder{position:relative;overflow:hidden;max-width:100%;max-height:100%;width:100%;height:100%;background:#141c17}
#video,#reference{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#reference{opacity:.5;pointer-events:none}
#camera-status{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#26372b,#131a16 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;z-index:3}
.status-camera{display:grid;place-items:center;width:68px;height:68px;background:#c4dfb00a;border:1px solid #8aa78930;border-radius:24px;color:#d8ef9a;margin-bottom:25px}
.status-camera svg{width:29px;height:29px;stroke-width:1.3}
h1{font-size:21px;font-weight:600;letter-spacing:-.8px;margin:0 0 11px}
#status-copy{font-size:12px;color:#899e8e;line-height:1.8;margin:0;max-width:250px}
#connect{margin-top:28px;border-radius:30px;background:var(--accent);color:#26361f;min-height:46px;padding:0 21px;display:flex;gap:14px;align-items:center;font-weight:650;font-size:13px}
#connect svg{width:16px;height:16px}
#grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33.1%,#fff4 33.2%,#fff4 33.4%,transparent 33.5%,transparent 66.4%,#fff4 66.5%,#fff4 66.7%,transparent 66.8%),linear-gradient(to bottom,transparent 33.1%,#fff4 33.2%,#fff4 33.4%,transparent 33.5%,transparent 66.4%,#fff4 66.5%,#fff4 66.7%,transparent 66.8%)}
#reference-chip{position:absolute;top:14px;left:14px;border:1px solid #ffffff20;background:#151c18aa;backdrop-filter:blur(10px);border-radius:24px;display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;font-size:10px;z-index:4}
#reference-chip img{width:27px;height:27px;border-radius:50%;object-fit:cover}
#reference-chip svg{width:12px;height:12px}
.camera-bottom{padding:6px 22px 10px;flex-shrink:0;background:#151716}
#opacity-controls{position:absolute;bottom:12px;left:16px;right:16px;height:44px;padding:0 12px 0 4px;border-radius:24px;display:flex;gap:8px;align-items:center;background:#151716bd;backdrop-filter:blur(12px);z-index:4;border:1px solid #ffffff1a}
#opacity-controls .icon-button{width:44px;flex-shrink:0;color:#eef2e8}
.opacity-track{flex:1;display:flex;align-items:center}
input[type=range]{width:100%;height:32px;accent-color:var(--accent);cursor:pointer}
#opacity-value{font-size:12px;color:var(--accent);width:34px;text-align:right;font-variant-numeric:tabular-nums}
.modes{display:flex;justify-content:center;gap:24px;height:38px}
.mode{background:none;color:#7e8980;font-weight:600;font-size:14px;position:relative;padding:0 12px 8px;min-width:55px}
.mode.active{color:var(--accent)}
.mode.active:after{content:'';position:absolute;bottom:2px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--accent)}
.shutter-row{display:grid;grid-template-columns:1fr 100px 1fr;align-items:center;justify-items:center;margin:4px 0 0}
#shutter{width:76px;height:76px;border:3px solid #e7ede4;border-radius:50%;background:none;padding:5px}
#shutter>span{display:block;background:#f3f5ef;width:100%;height:100%;border-radius:50%;transition:transform .12s}
#shutter:active>span{transform:scale(.9)}
#shutter:disabled{opacity:.25}
.side-action{min-width:64px;min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:none;font-size:11px;color:#8d998f}
#library-thumb{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;border:1px solid #53614f;background:#242e24;overflow:hidden;color:#bac8b5}
#library-thumb img{width:100%;height:100%;object-fit:cover}
.choose-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#d2ddcc;background:#282e29}
.choose-icon svg{width:21px;height:21px}
#capture-flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none;z-index:6}
#capture-flash.animate{animation:flash .22s}
@keyframes flash{0%{opacity:.8}
100%{opacity:0}
}
#toast{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;transition:.2s;background:#eef3e7;color:#263b27;border:1px solid #e0e8d6;border-radius:15px;padding:12px 20px;max-width:min(90%,430px);width:max-content;font-size:12px;line-height:1.7;z-index:100;text-align:center;box-shadow:0 4px 20px #0004}
#toast.show{opacity:1;transform:translate(-50%,0)}
dialog{width:min(100%,480px);max-width:100%;height:92dvh;max-height:92dvh;inset:auto 0 0;margin:0 auto;border:1px solid #373e35;border-bottom:0;border-radius:25px 25px 0 0;background:#1b211d;color:#eaf0e5;padding:0;box-shadow:0 -12px 90px #0004;overflow:hidden}
dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}
#sheet-body{height:100%;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.sheet-handle{width:32px;height:4px;border-radius:3px;background:#485449;margin:11px auto 0;flex-shrink:0}
.sheet-header{height:66px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sheet-header h2{font-size:19px;font-weight:600;letter-spacing:-.7px;margin:0}
.sheet-header .icon-button{background:#2b342c;color:#b9c5b8;width:34px;height:34px}
.sheet-header svg{width:18px;height:18px}
.sheet-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 20px 20px}
.sheet-footer{padding:17px 20px 24px;background:#1b211d;flex-shrink:0;border-top:1px solid #ffffff09}
.primary,.secondary{border-radius:14px;min-height:50px;width:100%;font-weight:650;font-size:14px;display:flex;gap:8px;align-items:center;justify-content:center;background:var(--accent);color:#26361f}
.secondary{background:#2a342b;color:#d0ddcb;border:1px solid #3a483b}
.secondary+.primary,.primary+.secondary{margin-top:10px}
.primary svg,.secondary svg{width:19px;height:19px}
.sheet-note{font-size:11px;line-height:1.8;color:#8e9d8c;text-align:center;margin:12px 8px 0}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.photo-tile{position:relative;background:#283529;border-radius:13px;border:1px solid #ffffff0a;overflow:hidden;padding:0;text-align:left}
.photo-tile img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.tile-meta{padding:10px;font-size:10px;color:#a9b7a5;display:flex;justify-content:space-between;gap:6px}
.tile-meta span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tile-tag{position:absolute;top:9px;left:9px;font-size:9px;color:#f1f5eb;background:#18221bc9;padding:5px 7px;border-radius:6px}
.photo-tile.selected{border:2px solid var(--accent)}
.import-button{margin-bottom:22px}
.empty{height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#8d9c8e;gap:16px;font-size:13px;line-height:1.8}
.empty svg{width:35px;height:35px;color:#5e775f}
.empty p{margin:0}
.photo-view{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#101512;margin:0 12px;border-radius:12px;overflow:hidden}
.photo-view img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.photo-view.pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pair-cell{height:100%;min-height:0;position:relative;display:flex;align-items:center}
.pair-cell>span{position:absolute;top:12px;left:10px;background:#17201cc9;padding:5px 8px;font-size:10px;border-radius:6px}
.review-tabs{display:flex;gap:5px;justify-content:center;margin:15px 20px;flex-shrink:0}
.review-tabs button{padding:10px 17px;background:none;border-radius:20px;color:#899b89;font-size:12px}
.review-tabs button.active{color:#d8ef9a;background:#303b2b}
.footer-row{display:flex;gap:10px}
.footer-row>*{flex:1}
.footer-row .secondary+.primary{margin-top:0}
.quiet-button{display:block;margin:14px auto 0;background:none;font-size:12px;color:#94a88f;padding:5px 12px;min-height:32px}
.result-label{color:var(--accent);font-size:11px;display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 0}
.result-label svg{width:14px;height:14px}
.error-note{color:#e5bc85}
#update-button{position:absolute;top:64px;left:50%;transform:translateX(-50%);background:var(--accent);color:#26361f;font-size:11px;padding:10px 15px;border-radius:22px;z-index:10;white-space:nowrap}
.export-actions{padding:26px 20px}
.export-actions p{font-size:12px;color:#9eaf98;line-height:1.9;margin:0 0 20px}
.export-actions .secondary{margin-top:10px}
.compact-dialog{height:auto;max-height:65dvh}
.compact-dialog p{font-size:13px;line-height:1.8;color:#acbba5}
.resume{width:100%;padding:14px;border-radius:12px;background:#d8ef9a1a;color:var(--accent);text-align:left;font-size:12px;margin-bottom:16px}

@media(min-width:600px){body{display:grid;place-items:center;min-height:100dvh;background:radial-gradient(ellipse at center,#263329,#0e120f 70%)}
.camera-app{height:min(900px,calc(100dvh - 32px));min-height:0;border:1px solid #354034;border-radius:26px;box-shadow:0 20px 100px #0006}
dialog{inset:0;margin:auto;height:min(850px,90dvh);border-radius:24px;border-bottom:1px solid #373e35}
.compact-dialog{height:fit-content}
}

@media(max-height:700px) and (orientation:portrait){.toolbar{height:48px}
.camera-bottom{padding-top:3px;padding-bottom:5px}
.shutter-row{margin:2px 0}
#shutter{width:67px;height:67px}
.modes{height:33px}
.status-camera{width:48px;height:48px;margin-bottom:16px;border-radius:17px}
#connect{margin-top:18px}
.sheet-footer{padding-top:12px;padding-bottom:15px}
.primary,.secondary{min-height:45px}
}

@media(orientation:landscape) and (max-height:600px){body{display:block}
.camera-app{max-width:none;min-height:0;height:100dvh;border:0;border-radius:0;display:grid;grid-template-columns:minmax(0,1fr) 152px;grid-template-rows:48px minmax(0,1fr);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.toolbar{height:48px;grid-column:1/3;padding:0 18px}
.viewfinder-wrap{height:100%;grid-column:1}
.camera-bottom{grid-column:2;grid-row:2;align-self:center;padding:5px 10px}
.shutter-row{grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
#shutter{grid-column:1/3;grid-row:1;width:65px;height:65px}
.side-action{min-height:54px}
#opacity-controls{height:44px;gap:6px;bottom:8px;left:12px;right:12px}
.modes{gap:10px}
dialog{max-height:100dvh;height:100dvh;width:min(100%,600px)}
.sheet-header{height:45px}
.sheet-footer{padding:8px 20px}
.sheet-note{margin-top:6px}
.review-tabs{margin:7px 20px}
.review-tabs button{padding:6px 14px}
}


/* Bake camera: small controls, unobstructed frame, original green palette. */
#ratio-controls{display:flex;align-items:center;justify-content:center;gap:2px;position:relative}

#ratio-controls button{height:44px;min-width:44px;padding:0 8px;background:none;color:#a8b2aa;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;border-radius:12px}

#ratio-controls button[aria-pressed=true]{color:#d8ef9a;background:#d8ef9a16}

#ratio-controls.locked button{opacity:.55}

#ratio-controls.locked button[aria-pressed=true]{opacity:1}

#original-ratio{position:absolute;inset:0;display:grid;place-items:center;background:#151716;color:#d8ef9a;font-size:12px;pointer-events:none}

#connect,.primary{background:#d8ef9a;color:#26361f}

#connect{min-height:48px;font-size:14px}

#status-copy{font-size:13px}

#reference-chip{font-size:11px;min-height:40px}

.mode.active:after{background:#d8ef9a}

@media(max-width:350px){.toolbar{padding:0 10px;gap:2px}
.wordmark{width:54px;font-size:21px}
#ratio-controls button{padding:0 5px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* The portrait 16:9 frame extends behind the camera controls. */
.camera-app.immersive-camera{isolation:isolate}
.immersive-camera .viewfinder-wrap{position:absolute;inset:0;z-index:0;align-items:flex-end}
.immersive-camera #viewfinder{flex:none}
.immersive-camera .toolbar{position:relative;z-index:9;background:linear-gradient(to bottom,#151716c9,#15171655)}
.immersive-camera .camera-bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:8;
  padding-top:16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,transparent,#00000035 35%,#00000085);
}
.immersive-camera .mode{color:#eef2e8;text-shadow:0 1px 4px #000b}
.immersive-camera .mode.active{color:var(--accent)}
.immersive-camera .side-action{color:#eef2e8;text-shadow:0 1px 4px #000b}
.immersive-camera #shutter{background:#0002;box-shadow:0 2px 12px #0005}
.immersive-camera #library-thumb{background:#151716a6;border-color:#ffffff55}
.immersive-camera .choose-icon{background:#151716a6;color:#eef2e8}
.immersive-camera #opacity-controls{bottom:calc(var(--camera-controls-height,150px) + 12px)}
.immersive-camera #reference-chip{top:var(--camera-overlay-top,14px)}
.immersive-camera #camera-status{padding-top:max(24px,var(--camera-overlay-top,14px));padding-bottom:calc(var(--camera-controls-height,150px) + 64px)}