html{padding:0;overflow-y:hidden}body{width:100vw;margin:0;position:relative}@keyframes ink-transition{0%{transform:translate(-1.25%)}99%{opacity:1;transform:translate(-98.75%)}to{opacity:0;transform:translate(-98.75%)}}.ink-effect-container{z-index:1;width:100%;position:absolute;top:0;left:0;overflow:hidden}.ink-effect{background-color:#000;background-image:none;background-size:100% 100%;width:4000%;height:100vh;animation:2s steps(39,end) .5s infinite ink-transition;position:relative;top:0;left:50%;transform:translate(-1.25%)}@keyframes slide{0%{transform:translate(-40.5%)}50%{transform:translate(0)}to{transform:translate(-40.5%)}}.lanting-wrapper{z-index:-1;width:100%;overflow:hidden}.lanting-wrapper img{height:100%;animation:60s infinite slide}img.shadow{filter:drop-shadow(2px 2px 10px #032169b3)}.ink-wrapper{z-index:2;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.ink-wrapper .ink{filter:brightness(0)grayscale();background:url(../images/ink.png) 0 0/100% 100%;width:2500%;height:100%;transition:all .5s;animation:1.5s steps(24,end) forwards fade;position:absolute;top:50%;left:50%;transform:translateY(-50%)translate(-2%)}.ink-wrapper .ink-lanting-wrapper{opacity:0;width:100%;height:100%;animation:.1s 1.5s forwards fade3;position:absolute}#font-container img{opacity:0;animation:.5s forwards opacity}#loading img{animation:2s ease-in-out infinite zoom}.loading-panel{flex-direction:column;align-items:center;gap:18px;width:min(380px,100vw - 48px);display:flex}#loading-progress{box-sizing:border-box;color:#1c140e;background:linear-gradient(#fffcf58c,#f3e8d033),#f4ead7;border-radius:2px;width:100%;padding:16px 16px 14px;font-family:DFKai-SB,KaiTi,BiauKai,STKaiti,Kaiti TC,PMingLiU,Songti TC,serif;box-shadow:inset 0 0 0 1px #2c2118,inset 0 0 0 5px #f4ead7,inset 0 0 0 6px #2c2118,0 10px 28px #24160a38}#loading-progress[hidden]{display:none}.loading-caption{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}#loading-track{background:#1c140e14;border-radius:0;width:100%;height:9px;overflow:hidden;box-shadow:inset 0 -1px #1c140e47}#loading-bar{background:linear-gradient(90deg,#ffffff2e,#0000 18%),linear-gradient(#3a3128,#16110e 42%,#0c0908);border-radius:0 1px 2px 0;width:0;height:100%;transition:width .2s linear}#loading-label{text-align:left;letter-spacing:.12em;color:#1c140e;flex:1;margin:0;font-size:20px;line-height:1.45}@media (width<=600px){#loading-label{letter-spacing:.08em;font-size:17px}}.paper{opacity:0;width:100%;height:100%;animation:1.5s ease-out forwards fade3;position:absolute;top:0;left:0}.font-container img{mix-blend-mode:multiply}@keyframes zoom{0%{transform:scale(.95)}50%{transform:scale(1.05)}to{transform:scale(.95)}}@keyframes opacity{0%{opacity:0}to{opacity:1}}@keyframes fade{0%{opacity:1;transform:translateY(-50%)translate(-2%)}to{opacity:0;transform:translateY(-50%)translate(-98%)}}@keyframes fade2{0%{transform:translateY(-50%)translate(-2%)}to{transform:translateY(-50%)translate(-98%)}}@keyframes fade3{0%{opacity:0}to{opacity:1}}body,html{overflow:hidden}body{height:100svh}.lanting-wrapper{height:100%}.stage1,.stage2{transform-origin:50%;flex-shrink:0}.stage1{box-sizing:border-box;background:linear-gradient(#fffcf52e,#f4ead714),url(../images/bg.jpeg) 50%/cover no-repeat;flex-direction:column;justify-content:center;align-items:center;gap:20px;min-width:40%;min-height:50%;padding:60px;display:flex;box-shadow:inset 0 0 0 1px #2c2118,inset 0 0 0 6px #0000,0 14px 36px #24160a3d}#start{cursor:pointer;-o-object-fit:contain;object-fit:contain;transform-origin:50%;filter:drop-shadow(0 0 #0000);height:30%;animation:2.4s ease-in-out infinite start-attract}#start:focus-visible,#start:hover{filter:drop-shadow(0 6px 12px #2c211847);animation-play-state:paused;transform:scale(1.04)}@keyframes start-attract{0%,to{filter:drop-shadow(0 2px 4px #2c21181f);transform:scale(1)translateY(0)}50%{filter:drop-shadow(0 10px 16px #2c211847);transform:scale(1.06)translateY(-4px)}}.stage1-title{-o-object-fit:contain;object-fit:contain;width:auto;max-width:min(70vw,420px);height:min(36vh,320px)}.capture-panel{box-sizing:border-box;color:#1c140e;background:linear-gradient(#fffcf5b8,#f3e8d047),#f4ead7eb;flex-direction:column;justify-content:center;align-items:center;min-width:min(92vw,980px);min-height:0;padding:22px;font-family:DFKai-SB,KaiTi,BiauKai,STKaiti,Kaiti TC,PMingLiU,Songti TC,serif;display:flex;box-shadow:inset 0 0 0 1px #2c2118,inset 0 0 0 6px #f4ead7,inset 0 0 0 7px #2c2118,0 14px 36px #24160a3d}.capture-layout{align-items:stretch;gap:22px;width:100%;min-width:0;display:flex}.capture-instructions{flex-direction:column;flex:1;gap:14px;min-width:0;display:flex}.capture-steps{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.capture-steps li{letter-spacing:.08em;background:#fffcf58c;border:1px solid #2c21182e;margin:0;padding:8px 12px 8px 44px;font-size:18px;line-height:1.45;position:relative}.capture-steps li:before{content:attr(data-step);letter-spacing:0;background:#f7f1e5;border:1px solid #2c2118;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;display:flex;position:absolute;top:50%;left:10px;transform:translateY(-50%)}#test-region{letter-spacing:.06em;color:#5a4634;contain:inline-size;background:#fffcf566;border-left:3px solid #a33b32;flex:1;min-height:42px;padding:10px 12px;font-size:15px;line-height:1.55}.capture-buttons{align-items:stretch;gap:10px;display:flex}#generate,.capture-buttons button{appearance:none;color:#1c140e;font:inherit;letter-spacing:.12em;cursor:pointer;touch-action:manipulation;background:#f7f1e5;border:1px solid #2c2118;border-radius:0;margin:0}.capture-buttons button{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;min-width:0;min-height:58px;padding:8px 6px;display:flex}#generate .btn-label,.capture-buttons .btn-label{font-size:20px;line-height:1.2}#generate{color:#f7f1e5;background:#332d25;border-color:#332d25;width:100%;min-height:56px;padding:12px 16px}#capture[hidden],#flip[hidden],#generate[hidden],#recapture[hidden]{display:none!important}.capture-buttons:not(.has-photo) #capture{flex:1}#generate .btn-label{font-size:22px}#generate:disabled{opacity:.45;cursor:not-allowed;filter:none}#generate:disabled:hover{filter:none}#generate:not(:disabled):hover,.capture-buttons button:hover{filter:brightness(1.05)}#generate:focus-visible,#start:focus-visible,.capture-buttons button:focus-visible{outline-offset:3px;outline:3px solid #946426}#capture{color:#f7f1e5;z-index:1;background:#332d25;border-color:#332d25;animation:1.8s ease-in-out infinite capture-attract;box-shadow:0 0 #332d2559}#capture .btn-label{letter-spacing:.16em;font-size:22px}#capture:focus-visible,#capture:hover{filter:brightness(1.08);animation-play-state:paused}@keyframes capture-attract{0%,to{transform:scale(1);box-shadow:0 0 #332d2547}50%{transform:scale(1.04);box-shadow:0 0 0 8px #332d2500}}.camera-frame{background:#111;border:1px solid #2c2118;flex:none;width:min(42vw,480px);height:min(42vw,480px);position:relative;overflow:hidden;box-shadow:inset 0 0 0 5px #f4ead7}.camera-frame #camera{touch-action:none;width:100%;height:100%;display:block}#temp-region,#temp-regions{pointer-events:none}#temp-regions{z-index:1;width:100%;height:100%;position:absolute;inset:0}#image-container{direction:rtl;overflow:auto hidden;justify-content:flex-start!important}#font-container{box-sizing:border-box;direction:ltr;flex-shrink:0;margin-left:auto;margin-right:auto;overflow:visible}.paper img{-o-object-fit:cover;object-fit:cover;min-width:100%}.ink-wrapper .ink-lanting-wrapper{height:calc(100% - var(--result-actions-height,0px))}#result-actions[hidden]{display:none}#result-actions{z-index:3;padding:10px 16px max(10px,env(safe-area-inset-bottom));box-sizing:border-box;color:#292319;background:#ffffffe0;border-top:1px solid #50412a40;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;display:flex;position:absolute;bottom:0;left:0;right:0}#result-feedback{text-align:center;flex-basis:100%;margin:0;font-size:14px;line-height:1.4}#result-actions button{min-width:124px;min-height:44px;font:inherit;color:#292319;cursor:pointer;touch-action:manipulation;background:#f7f1e5;border:1px solid #72644e;border-radius:3px;padding:10px 18px;font-size:16px}#result-actions #download-result{color:#fff;background:#332d25;border-color:#332d25}#result-actions button:disabled{opacity:.55;cursor:wait}@media (width<=600px){body{height:100dvh}.stage-shell{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overscroll-behavior-y:contain;overflow:hidden auto;align-items:flex-start!important}.stage-shell,.stage1{box-sizing:border-box}.stage1{width:100%;margin-top:auto;margin-bottom:auto;gap:24px!important;min-width:0!important;min-height:0!important;padding:28px 20px!important}.stage1-title{width:min(70%,240px);max-height:42svh}#start,.stage1-title{-o-object-fit:contain;object-fit:contain;height:auto!important}#start{width:min(70%,220px);min-height:44px}.capture-panel{width:100%;margin-top:auto;margin-bottom:auto;min-width:0!important;padding:14px!important}.capture-layout{flex-direction:column;gap:12px!important}.capture-instructions{display:contents}.capture-steps{order:0;gap:6px}.capture-steps li{letter-spacing:.05em;padding:8px 10px 8px 40px;font-size:15px}.camera-frame{aspect-ratio:1;box-sizing:border-box;order:1;width:100%!important;height:var(--camera-size,auto)!important}.camera-frame #camera{position:absolute;inset:0}#test-region{order:2;min-height:38px;font-size:14px;flex:none!important}.capture-buttons{order:3;gap:8px}.capture-buttons button{min-height:52px}.capture-buttons .btn-label{font-size:18px}#generate{order:4;min-height:54px}#generate .btn-label{font-size:20px}.lanting-wrapper>div{max-width:calc(100vw - 10px);font-size:10px!important}#font-container{padding:12px!important;padding-top:max(12px,env(safe-area-inset-top))!important}#result-actions{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));gap:8px}#result-actions button{flex:1;min-width:0;max-width:220px}#result-feedback{font-size:13px}}@media (prefers-reduced-motion:reduce){#capture,#font-container img,#loading img,#start,.ink-wrapper .ink,.ink-wrapper .ink-lanting-wrapper,.lanting-wrapper img,.paper{animation:none!important}#font-container img,.ink-wrapper .ink-lanting-wrapper,.paper{opacity:1}.ink-wrapper .ink{display:none}#capture:focus-visible,#capture:hover,#start:focus-visible,#start:hover{filter:none;transform:none}}#__nuxt,.app-root{height:100%}.app-root{position:relative}