@font-face{font-family:Noto Sans TC;src:url(/fonts/noto-ui.woff2) format("woff2");font-weight:900;font-display:swap}@font-face{font-family:Noto Sans TC;src:url(/fonts/noto-body.woff2) format("woff2");font-weight:100 800;font-display:swap}:root{font-family:Noto Sans TC,sans-serif;color:#006579;background:#f8f8f3;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#f8f8f3}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #ee4186;outline-offset:3px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}button{border:0;background:transparent}a{color:inherit;text-underline-offset:3px}.app{width:min(100%,480px);margin:0 auto;position:relative;min-height:100svh;background:#fcfcf8;box-shadow:0 0 40px #00657910}.entry{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:calc(24px + env(safe-area-inset-top)) 24px calc(16px + env(safe-area-inset-bottom));text-align:center;background:#fafbf8 url(/ui/v2/hero-street.png) center bottom 62px/100% auto no-repeat}.hero-copy{padding-top:14px}h1{margin:0;line-height:1.12;font-weight:950;letter-spacing:-.055em}h1 span{display:block;font-size:clamp(61px,18vw,84px)}h1 strong{display:block;color:#edbf00;font-size:clamp(35px,10.4vw,49px);letter-spacing:-.05em}h1 strong:before,h1 strong:after{content:"╲";display:inline-block;font-size:.65em;transform:rotate(-6deg);margin:0 2px;color:#f2c600}.english{font-family:Noto Sans TC,sans-serif;font-size:clamp(13px,3.6vw,17px);font-weight:950;margin:10px 0 3px;letter-spacing:.015em}.english:before{content:"╲";color:#ef4a87;margin-right:8px}.english:after{content:"╱";color:#ef4a87;margin-left:8px}.tagline{font-size:14px;letter-spacing:.04em;font-weight:850;margin:4px 0}.entry-actions{padding:12px 6px 0;background:linear-gradient(transparent,#fafbf8 35%)}.primary{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:52px;padding:9px 18px;border-radius:40px;background:#ffd200;color:#006579;font-size:22px;font-weight:950;letter-spacing:.04em}.primary>span{font-size:36px;line-height:.8}.features{font-size:13px;font-weight:850;margin:10px 0}.entry-links{display:flex;gap:12px;justify-content:center;align-items:center}.text-button{min-height:36px;padding:4px 8px;font-weight:750;text-decoration:underline;text-underline-offset:4px;font-size:13px}.entry-links>span{font-size:12px}.page-header{height:48px;display:flex;align-items:center;justify-content:center;padding-top:env(safe-area-inset-top);position:relative}.mini-brand{font-size:18px;font-weight:950;letter-spacing:-.04em}.mini-brand:before{content:"╲";color:#ef4a87;margin-right:5px}.mini-brand em{font-style:normal;color:#e6ad00}.icon-button{min-width:44px;min-height:44px}.back{position:absolute;left:8px;top:4px;font-size:30px;line-height:1}.studio{text-align:center;padding:0 8px;display:flex;align-items:center;flex-direction:column}.view{position:relative;overflow:hidden;width:100%;border-radius:12px;background:#eef2ef}.camera-view{max-width:min(100%,calc((100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*.5625));aspect-ratio:9/16}canvas,.view img,.view video{width:100%;height:auto;display:block}.hint{font-size:12px;font-weight:800;margin:7px 0 5px;line-height:1.35}.hint:before,.hint:after{content:"╲";color:#ef4a87;margin:0 7px}.mode-selector{display:flex;justify-content:center;width:172px;border-radius:24px;background:#f0f0ef;border:1px solid #dedfdd;height:29px;margin:0 auto 4px}.mode-selector button{width:50%;font-size:12px;font-weight:800;border-radius:24px;padding:2px}.mode-selector [aria-pressed=true]{background:#f33d85;color:#fff}.capture-controls{display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;width:min(100%,270px);height:66px;margin:auto}.shutter{position:relative;display:flex;align-items:center;justify-content:center;width:58px;height:58px;background:#fb3781;border-radius:50%;color:#fff;margin:auto;box-shadow:0 0 0 2px #fff,0 0 0 4px #fb3781}.shutter svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linejoin:round}.record-symbol{display:none;width:25px;height:25px;border-radius:50%;background:#fff}.shutter[data-mode=video]{background:#f21452;box-shadow:0 0 0 2px #fff,0 0 0 4px #f21452}.shutter[data-mode=video] .camera-symbol,.shutter[data-mode=recording] .camera-symbol{display:none}.shutter[data-mode=video] .record-symbol,.shutter[data-mode=recording] .record-symbol{display:block}.shutter[data-mode=recording]{background:#f21452;box-shadow:0 0 0 2px #fff,0 0 0 4px #f21452}.shutter[data-mode=recording] .record-symbol{border-radius:5px}.change-hat{display:flex;flex-direction:column;align-items:center;font-weight:750;justify-self:start;line-height:1.1}.change-hat svg{width:29px;height:29px;stroke:#007a91;stroke-width:1.8;fill:#d6eff3}.change-hat span{font-size:10px;margin-top:3px}.people-count{position:absolute;top:9px;left:9px;border-radius:20px;background:#fffffff0;padding:4px 8px;font-size:10px;font-weight:750}.people-count:empty{display:none}#record-time{position:absolute;top:8px;left:50%;transform:translate(-50%);background:#fffef6ed;border-radius:20px;padding:4px 9px;font-size:12px;color:#006579;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap}#record-time:before{content:"●";color:#ed2c59;margin-right:5px}.status-area{text-align:center;padding:0 12px calc(6px + env(safe-area-inset-bottom))}#status{font-size:11px;line-height:1.45;margin:6px 0 0;white-space:pre-line}#status:empty{display:none}.app:has(.entry:not([hidden])) .status-area{position:absolute;bottom:0;left:0;width:100%;background:#fafbf8}.app:has(.entry:not([hidden])) #status:not(:empty){padding:8px 4px}.small-action{background:#fff4bd;border:1px solid #006579;border-radius:20px;min-height:36px;font-size:12px;margin:6px 3px;padding:5px 14px}.preview{padding:0 18px;text-align:center}.preview h2{font-size:22px;margin:8px 0 13px;font-weight:950}.preview .view{max-width:min(100%,calc((100dvh - 310px)*var(--preview-aspect,.5625)));margin:auto}.preview-actions{width:100%;max-width:360px;margin:10px auto;display:flex;flex-direction:column;gap:7px}.secondary{border:1.5px solid #006579;border-radius:30px;min-height:42px;font-size:17px;font-weight:850;background:#fff}.small{font-size:11px;line-height:1.6}.preview-note{margin:7px 0}.preview .primary{min-height:46px;font-size:20px}.preview-actions .text-button{min-height:28px}.preview-actions #download{font-size:11px;color:#587a80}dialog{border:1px solid #9fb8b9;border-radius:22px;padding:28px 22px;max-width:calc(100% - 38px);width:370px;color:#006579;background:#fffef7;line-height:1.9;max-height:80dvh;overflow:auto}dialog::backdrop{background:#003b4e66}.close-dialog{position:absolute;right:10px;top:6px;width:36px;height:36px;font-size:26px}dialog h2{font-size:21px}dialog p,dialog li{font-size:14px}@media(min-width:481px){.entry{min-height:850px;height:100svh;max-height:1100px}.app{border-left:1px solid #d9e6e6;border-right:1px solid #d9e6e6}}@media(max-height:700px){.entry{padding-top:12px}.hero-copy{padding-top:0}h1 span{font-size:58px}h1 strong{font-size:34px}.english{font-size:12px;margin:5px 0}.tagline{font-size:11px}.primary{min-height:44px;font-size:20px}.features{margin:6px 0;font-size:11px}.entry{background-position:center bottom 48px}.page-header{height:40px}.mini-brand{font-size:16px}.camera-view{max-width:min(100%,calc((100dvh - 180px)*.5625))}.hint{font-size:11px;margin:5px 0}.preview h2{font-size:18px;margin:3px 0 8px}.preview .view{max-width:min(100%,calc((100dvh - 285px)*var(--preview-aspect,.5625)))}.preview-actions{gap:3px}.preview .small{margin:4px 0}.shutter{width:54px;height:54px}}.app:has(.studio:not([hidden])){width:100%;max-width:none;height:100dvh;min-height:100dvh;background:#12242a;overflow:hidden}.app:has(.studio:not([hidden])) .page-header{position:absolute;top:env(safe-area-inset-top);left:0;width:100%;z-index:3;padding:0;background:transparent}.app:has(.studio:not([hidden])) .mini-brand{display:none}.app:has(.studio:not([hidden])) .back{top:8px;border-radius:50%;background:#fffffff0}.app:has(.studio:not([hidden])) .studio{position:absolute;inset:0;padding:0;display:block}.app:has(.studio:not([hidden])) .camera-view{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;background:#12242a}.app:has(.studio:not([hidden])) #output{width:100%;height:100%;object-fit:cover}.app:has(.studio:not([hidden])) .people-count{left:auto;right:12px;top:calc(16px + env(safe-area-inset-top))}.app:has(.studio:not([hidden])) #record-time{top:calc(16px + env(safe-area-inset-top))}.app:has(.studio:not([hidden])) .hint{position:absolute;bottom:calc(207px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);white-space:nowrap;color:#fff;background:#004c5d9c;border-radius:20px;padding:4px 10px;margin:0;z-index:2}.app:has(.studio:not([hidden])) .mode-selector{position:absolute;bottom:calc(169px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);margin:0;z-index:2;background:#fffffff0}.app:has(.studio:not([hidden])) .capture-controls{position:absolute;bottom:calc(95px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);margin:0;z-index:2}.app:has(.studio:not([hidden])) .change-hat{background:#fffffff0;border-radius:50%;width:48px;min-height:48px}.app:has(.studio:not([hidden])) .change-hat svg{height:25px;width:25px}.app:has(.studio:not([hidden])) .change-hat span{font-size:9px}.app:has(.studio:not([hidden])) .status-area{position:absolute;bottom:calc(243px + env(safe-area-inset-bottom));left:0;width:100%;padding:0 15px;z-index:3;color:#fff;pointer-events:none;text-shadow:0 1px 4px #002b35}.app:has(.studio:not([hidden])) .status-area button{pointer-events:auto}.app:has(.studio:not([hidden])) .capture-controls{bottom:calc(30.33333vw + 8px + env(safe-area-inset-bottom));width:calc(100% - 32px);max-width:360px;grid-template-columns:1fr 64px 1fr;height:64px}.app:has(.studio:not([hidden])) .capture-controls .mode-selector{position:static;transform:none;justify-self:end;width:112px;height:44px;margin:0;border:0;align-items:center;padding:3px;box-shadow:0 1px 5px #002b3525}.app:has(.studio:not([hidden])) .mode-selector button{height:38px;font-size:11px}.app:has(.studio:not([hidden])) .hint{bottom:calc(30.33333vw + 80px + env(safe-area-inset-bottom));font-size:11px;padding:3px 8px}.app:has(.studio[data-phase=recording]) .mode-selector,.app:has(.studio[data-phase=recording]) .change-hat,.app:has(.studio[data-phase=recording]) .people-count,.app:has(.studio[data-phase=recording]) .page-header{visibility:hidden}.app:has(.studio[data-phase=saving]) .capture-controls,.app:has(.studio[data-phase=resuming]) .capture-controls{visibility:hidden}@media(max-height:700px){.app:has(.studio:not([hidden])) .hint[data-tracked=true]{display:none}}