:root{
color-scheme:dark;
--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
}
*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}
html,body{
width:100%;
height:100%;
margin:0;
overflow:hidden;
background:#000;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
button{
font:inherit;
}
.app{
position:relative;
width:100%;
height:100%;
min-height:100dvh;
overflow:hidden;
background:#000;
}
.preview-area{
position:absolute;
inset:calc(var(--safe-top) + 8px) 8px calc(var(--safe-bottom) + 112px) 8px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.camera-stage{
position:relative;
overflow:hidden;
border-radius:16px;
background:#050505;
box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
video{
width:100%;
height:100%;
display:block;
object-fit:contain;
background:#000;
}
#overlayCanvas{
position:absolute;
inset:0;
z-index:5;
display:block;
width:100%;
height:100%;
pointer-events:none;
}
#analysisCanvas,#trackingCanvas,#photoCanvas{
display:none;
}
.status{
position:absolute;
top:calc(var(--safe-top) + 18px);
left:50%;
z-index:20;
max-width:calc(100% - 40px);
transform:translateX(-50%);
overflow:hidden;
padding:8px 14px;
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
background:rgba(0,0,0,.58);
color:#fff;
font-size:14px;
font-weight:600;
line-height:1.2;
text-align:center;
text-overflow:ellipsis;
white-space:nowrap;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.status[data-tone="ready"]{
border-color:rgba(69,224,126,.72);
background:rgba(12,82,42,.82);
color:#dffff0;
}
.status[data-tone="search"]{
border-color:rgba(255,196,82,.52);
background:rgba(68,46,6,.76);
color:#fff5d9;
}
.status[data-tone="error"]{
border-color:rgba(255,101,101,.58);
background:rgba(86,13,13,.82);
color:#ffe7e7;
}
.controls{
position:absolute;
left:0;
right:0;
bottom:calc(16px + var(--safe-bottom));
z-index:10;
display:grid;
grid-template-columns:58px 76px 58px;
align-items:center;
justify-content:center;
gap:22px;
min-height:82px;
}
.control-spacer{
width:58px;
height:58px;
}
.shutter{
width:76px;
height:76px;
padding:0;
border:4px solid rgba(255,255,255,.96);
border-radius:50%;
background:transparent;
cursor:pointer;
touch-action:manipulation;
box-shadow:0 4px 16px rgba(0,0,0,.42);
transition:opacity .18s ease,filter .18s ease,box-shadow .18s ease;
}
.shutter::after{
content:"";
display:block;
width:58px;
height:58px;
margin:5px;
border-radius:50%;
background:#fff;
transition:transform .08s ease,opacity .08s ease,background .18s ease;
}
.shutter:not(:disabled){
filter:drop-shadow(0 0 12px rgba(69,224,126,.76));
box-shadow:0 0 0 4px rgba(69,224,126,.25),0 4px 16px rgba(0,0,0,.42);
}
.shutter:not(:disabled)::after{
background:#45e07e;
}
.shutter:active::after{
transform:scale(.9);
opacity:.82;
}
.shutter:disabled{
opacity:.3;
cursor:not-allowed;
}
.icon-button,.start-button{
position:relative;
width:58px;
height:58px;
padding:0;
border:0;
border-radius:50%;
background:rgba(255,255,255,.14);
cursor:pointer;
touch-action:manipulation;
}
.icon-button:active,.start-button:active{
transform:scale(.94);
}
.download{
visibility:hidden;
background:#fff;
}
.download.ready{
visibility:visible;
}
.download::before{
content:"";
position:absolute;
left:27px;
top:12px;
width:4px;
height:24px;
border-radius:3px;
background:#111;
}
.download::after{
content:"";
position:absolute;
left:20px;
top:27px;
width:14px;
height:14px;
border-right:4px solid #111;
border-bottom:4px solid #111;
transform:rotate(45deg);
}
.start-button{
position:absolute;
top:50%;
left:50%;
z-index:8;
display:none;
transform:translate(-50%,-50%);
}
.start-button:active{
transform:translate(-50%,-50%) scale(.94);
}
.start-button::before{
content:"";
position:absolute;
left:14px;
top:19px;
width:28px;
height:20px;
border:3px solid #fff;
border-radius:5px;
}
.start-button::after{
content:"";
position:absolute;
left:23px;
top:24px;
width:10px;
height:10px;
border:3px solid #fff;
border-radius:50%;
}
.flash{
position:fixed;
inset:0;
z-index:100;
pointer-events:none;
background:#fff;
opacity:0;
}
.flash.active{
animation:flash 160ms ease-out;
}
@keyframes flash{
0%{opacity:0}
25%{opacity:.86}
100%{opacity:0}
}