#ffon-root { --accent:#f8aa5b; --accent-ink:#a96729; --soft:#fff2e1; --card:#fff; --text:#302c27; --muted:#77716a; --line:#eee6dc; --button-ink:#fff; position:fixed; inset:0; z-index:2147483000; pointer-events:none; font-family:inherit; color:var(--text); }
#ffon-root.ffon-dark { --accent:#ffd75b; --accent-ink:#ffdc68; --soft:#2b281b; --card:#202126; --text:#f7f7f8; --muted:#c1c3ca; --line:#3b3b3d; --button-ink:#211b08; }
#ffon-root * { box-sizing:border-box; }
#ffon-root .ffon-scrim { position:absolute; inset:0; width:100%; height:100%; }
#ffon-root .ffon-frame { fill:none; stroke:var(--accent); stroke-width:2; }
#ffon-root .ffon-leader { fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; }
#ffon-root .ffon-card { position:absolute; width:384px; border:1px solid var(--line); border-radius:20px; background:var(--card); box-shadow:0 24px 70px #0003,0 4px 18px #0001; padding:22px; pointer-events:auto; text-align:left; }
#ffon-root .ffon-meta { display:flex; align-items:center; gap:8px; color:var(--accent-ink); font-size:12px; font-weight:700; letter-spacing:.01em; line-height:20px; }
#ffon-root .ffon-meta .ffon-count { margin-left:auto; font-variant-numeric:tabular-nums; font-size:12px; }
#ffon-root .ffon-close { border:0; padding:0; background:transparent; width:24px; height:24px; color:var(--muted); display:grid; place-items:center; margin-left:5px; cursor:pointer; }
#ffon-root .ffon-close svg { width:15px; height:15px; }
#ffon-root .ffon-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
#ffon-root h2 { font-size:22px; font-weight:700; line-height:1.45; letter-spacing:-.05em; padding:0; margin:12px 0 9px; color:var(--text); word-break:keep-all; }
#ffon-root p { padding:0; margin:0; font-size:14px; line-height:1.75; letter-spacing:-.025em; color:var(--muted); word-break:keep-all; }
#ffon-root .ffon-demo { position:relative; overflow:hidden; height:148px; margin-top:18px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
#ffon-root .ffon-demo-label { position:absolute; top:10px; left:12px; color:var(--accent-ink); font-size:10px; letter-spacing:.04em; font-weight:600; }
#ffon-root .ffon-photo { position:absolute; width:75px; height:84px; padding:5px 5px 17px; border-radius:5px; background:white; box-shadow:0 6px 16px #60451d1b; }
#ffon-root .ffon-photo img { display:block; width:100%; height:100%; object-fit:cover; border-radius:2px; }
#ffon-root .ffon-photo::after { content:''; position:absolute; left:20px; right:20px; bottom:8px; height:2px; border-radius:1px; background:#e2d5c8; }
#ffon-root .ffon-demo-upload .ffon-photo { left:34px; top:34px; transform:rotate(-7deg); }
#ffon-root .ffon-demo-upload .ffon-photo.ffon-photo-back { left:25px; top:36px; transform:rotate(-15deg); opacity:.6; }
#ffon-root .ffon-drop { position:absolute; right:22px; top:31px; width:120px; height:90px; border:1.5px dashed var(--accent); border-radius:9px; background:#fff9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--accent-ink); font-size:11px; }
#ffon-root .ffon-drop svg { width:25px; height:25px; stroke:var(--accent-ink); }
#ffon-root .ffon-original-tag { position:absolute; top:37px; left:19px; padding:3px 6px; border-radius:4px; background:#0009; color:#fff; font-size:10px; }
#ffon-root .ffon-demo-hold { position:absolute; right:17px; top:47px; width:136px; height:38px; background:var(--accent); color:var(--button-ink); border-radius:8px; display:flex; gap:6px; align-items:center; justify-content:center; font-size:12px; font-weight:700; box-shadow:0 0 0 5px #ffd75b16; }
#ffon-root .ffon-demo-hold svg { width:17px; height:17px; }
#ffon-root .ffon-demo-hint { position:absolute; right:15px; top:102px; width:140px; color:#c8c8ce; font-size:11px; line-height:1.4; text-align:center; }
#ffon-root .ffon-mini-paper { position:absolute; left:22px; top:29px; width:95px; height:104px; background:#fffdfa; border:1px solid #eadbc6; box-shadow:0 3px 7px #b3936b15; }
#ffon-root .ffon-mini-photo { position:absolute; left:10px; right:10px; top:30px; bottom:10px; background:#f5e9d9; overflow:hidden; }
#ffon-root .ffon-mini-photo img { width:100%; height:100%; object-fit:cover; }
#ffon-root .ffon-mini-title { position:absolute; top:10px; left:6px; right:6px; border:1px dashed var(--accent); font-size:7px; padding:3px 0; text-align:center; color:#69431d; background:#fff; }
#ffon-root .ffon-mini-form { position:absolute; right:17px; top:38px; width:153px; border:1px solid #ebdccb; padding:10px; background:#fff; border-radius:7px; }
#ffon-root .ffon-mini-form span { font-size:9px; color:#877967; display:block; margin-bottom:7px; }
#ffon-root .ffon-mini-form strong { display:block; font-size:10px; font-weight:400; padding:8px 6px; border:1px solid var(--accent); border-radius:4px; color:#483420; letter-spacing:-.03em; }
#ffon-root .ffon-progress { display:flex; gap:5px; margin:18px 0 17px; }
#ffon-root .ffon-progress i { display:block; height:3px; flex:1; border-radius:2px; background:var(--line); }
#ffon-root .ffon-progress i.on { background:var(--accent); }
#ffon-root .ffon-footer { display:flex; gap:8px; align-items:center; }
#ffon-root .ffon-footer button { font:inherit; font-size:13px; line-height:20px; border:0; cursor:pointer; border-radius:9px; padding:10px 12px; height:40px; }
#ffon-root .ffon-skip { background:transparent; color:var(--muted); padding-left:0!important; margin-right:auto; }
#ffon-root .ffon-prev { color:var(--muted); background:transparent; }
#ffon-root .ffon-next { background:var(--accent); color:var(--button-ink); font-weight:700!important; min-width:92px; display:flex; align-items:center; justify-content:center; gap:12px; }
#ffon-root .ffon-next svg { width:15px; height:15px; }
#ffon-root.ffon-mobile .ffon-card { width:calc(100% - 28px); padding:20px; border-radius:20px; }
#ffon-root.ffon-mobile h2 { font-size:21px; margin-top:11px; }
#ffon-root.ffon-mobile p { font-size:13px; line-height:1.65; }
#ffon-root.ffon-mobile .ffon-demo { height:126px; margin-top:14px; }
#ffon-root.ffon-mobile .ffon-demo-upload .ffon-photo { top:27px; height:76px; }
#ffon-root.ffon-mobile .ffon-demo-upload .ffon-photo.ffon-photo-back { top:29px; }
#ffon-root.ffon-mobile .ffon-drop { height:78px; top:28px; right:15px; width:116px; }
#ffon-root.ffon-mobile .ffon-demo-hold { width:128px; top:38px; right:16px; }
#ffon-root.ffon-mobile .ffon-demo-hint { top:89px; right:11px; font-size:10px; }
#ffon-root.ffon-mobile .ffon-mini-paper { top:25px; left:15px; width:86px; height:87px; }
#ffon-root.ffon-mobile .ffon-mini-photo { top:29px; }
#ffon-root.ffon-mobile .ffon-mini-form { top:33px; right:13px; width:149px; }
#ffon-root.ffon-mobile .ffon-progress { margin:15px 0; }
#ffon-root .ffon-card{padding:22px}
#ffon-root.ffon-mobile .ffon-card{padding:20px}
#ffon-root .ffon-crop-photo{position:absolute;left:16px;top:30px;width:145px;height:107px;overflow:hidden;border-radius:5px}
#ffon-root .ffon-crop-photo img{width:100%;height:100%;object-fit:cover}
#ffon-root .ffon-crop-window{position:absolute;inset:7px 36px;border:2px solid #fff;box-shadow:0 0 0 70px #0007;z-index:1}
#ffon-root .ffon-crop-window::before,#ffon-root .ffon-crop-window::after{content:'';position:absolute;top:0;bottom:0;width:1px;background:#fff7;left:33%}
#ffon-root .ffon-crop-window::after{left:66%}
#ffon-root .ffon-crop-drag{position:absolute;left:51px;top:38px;z-index:2;color:#fff;font-size:27px;font-weight:700;text-shadow:0 1px 4px #0008}
#ffon-root .ffon-crop-copy{position:absolute;left:178px;right:10px;top:42px;color:var(--accent-ink);font-size:12px;line-height:1.6}
#ffon-root .ffon-demo-slider{position:absolute;left:178px;right:17px;top:113px;height:3px;background:#dcc4a8;border-radius:8px}
#ffon-root .ffon-demo-slider i{display:block;width:12px;height:12px;border-radius:50%;background:var(--accent);position:absolute;top:-4px;left:36%}
#ffon-root .ffon-region-photo{position:absolute;top:31px;left:15px;width:164px;height:106px;overflow:hidden;border-radius:7px}
#ffon-root .ffon-region-photo img{width:100%;height:100%;object-fit:cover}
#ffon-root .ffon-region-photo svg{position:absolute;inset:0;width:100%;height:100%}
#ffon-root .ffon-region-text{position:absolute;left:195px;right:12px;top:40px;font-size:12px;color:var(--accent);line-height:1.65}
#ffon-root .ffon-region-text small{display:block;color:var(--muted);font-size:10px;margin-top:9px}
#ffon-root .ffon-cost-row{position:absolute;top:35px;left:16px;right:16px;padding:14px 14px;border:1px solid #5f5428;border-radius:10px;background:#242218;display:flex;align-items:center;justify-content:space-between;color:#fff7d8;font-size:13px}
#ffon-root .ffon-cost-row b{font-size:19px;color:var(--accent)}
#ffon-root .ffon-cost-row b small{font-size:11px;margin-left:3px}
#ffon-root .ffon-cost-foot{position:absolute;top:111px;left:16px;right:16px;text-align:center;font-size:11px;color:var(--muted)}
#ffon-root .ffon-safe-page{position:absolute;left:21px;top:29px;width:91px;height:111px;border:1px solid #dfd3c2;background:#fffefa;padding:13px 9px}
#ffon-root .ffon-safe-page img{position:absolute;left:12px;right:12px;top:43px;width:65px;height:55px;object-fit:cover}
#ffon-root .ffon-safe-page i{position:absolute;inset:8px;border:1px dashed #588f7d}
#ffon-root .ffon-safe-page b{font-weight:400;position:absolute;left:10px;right:10px;top:22px;font-size:8px;text-align:center;color:#454039;white-space:nowrap}
#ffon-root .ffon-safe-result{left:auto;right:24px}
#ffon-root .ffon-safe-arrow{position:absolute;left:141px;top:61px;color:var(--accent);font-size:26px}
#ffon-root .ffon-help-list{margin-top:16px;display:grid;gap:8px}
#ffon-root .ffon-help-full{width:100%;border:0;border-radius:9px;background:var(--accent);color:#fff;font-family:inherit;font-size:13px;font-weight:700;padding:12px;margin-top:16px}

/* Production guide controls: scoped styles only, no editor/header resets. */
#ffon-root { pointer-events:auto; overscroll-behavior:contain; }
#ffon-root .ffon-scrim { pointer-events:none; }
#ffon-root .ffon-card { overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
#ffon-root button { font-family:inherit; letter-spacing:inherit; cursor:pointer; }
#ffon-root .ffon-close { margin-left:auto; min-width:32px; height:32px; font-size:24px; font-weight:400; }
#ffon-root :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
#ffon-root .ffon-card:focus { outline:none; }
#ffon-root .ffon-preference { display:flex; align-items:center; gap:9px; cursor:pointer; margin:16px 0; font-size:12px; line-height:1.6; color:var(--muted); }
#ffon-root .ffon-preference input { display:block!important; appearance:auto!important; -webkit-appearance:checkbox!important; position:static!important; opacity:1!important; margin:0; width:18px; height:18px; flex:0 0 18px; accent-color:var(--accent); clip:auto!important; }
#ffon-root .ffon-preference input::before,#ffon-root .ffon-preference input::after,#ffon-root .ffon-preference span::before,#ffon-root .ffon-preference span::after { content:none!important; }
#ffon-root .ffon-store-status { font-size:11px; color:var(--muted); margin:0 0 8px; }
#ffon-root .ffon-store-status:empty { display:none; }
#ffon-root .ffon-help-list { margin:18px 0; display:grid; gap:8px; }
#ffon-root .ffon-help-list button { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:15px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--text); font-size:13px; text-align:left; line-height:1.5; }
#ffon-root .ffon-help-list button b { color:var(--accent-ink); font-size:20px; }
#ffon-root .ffon-help-full { width:100%; border:1px solid var(--accent); background:var(--soft); color:var(--accent-ink); border-radius:10px; padding:13px 10px; font-size:13px; font-weight:700; }
#ffon-root .ffon-help-note { margin-top:12px; font-size:11px; }
#ffon-root .ffon-demo-arrow { position:absolute; left:40%; top:54px; font-size:24px; color:var(--accent-ink); }
#ffon-root .ffon-upload-symbol { font-size:27px; }
#ffon-root .ffon-diagram { display:flex; gap:8px; padding:40px 12px 12px; height:100%; }
#ffon-root .ffon-diagram>div { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; border:1px solid var(--line); border-radius:8px; background:var(--card); }
#ffon-root .ffon-diagram span { color:var(--accent-ink); font-size:18px; font-weight:700; }
#ffon-root .ffon-diagram b { color:var(--text); font-size:11px; font-weight:500; }
#ffon-root .ffon-demo-compare { background:#17181c; }
#ffon-root .ffon-demo-compare>img { position:absolute; left:13px; top:31px; width:38%; height:calc(100% - 44px); object-fit:cover; border-radius:7px; }
#ffon-root .ffon-demo-compare .ffon-demo-hold { width:43%; right:12px; }
#ffon-root .ffon-demo-compare .ffon-demo-hint { width:46%; right:7px; font-size:10px; }
#ffon-root .ffon-mini-collage { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; position:absolute; top:32px; left:16px; width:44%; height:calc(100% - 46px); padding:4px; background:var(--card); }
#ffon-root .ffon-mini-collage img { width:100%; height:100%; min-height:0; object-fit:cover; }
#ffon-root .ffon-region-photo i { position:absolute; left:41%; top:25%; width:23%; height:41%; border:2px dashed var(--accent); background:#ffd75b33; border-radius:40%; }
#ffon-root .ffon-compact .ffon-demo { height:90px; margin-top:10px; }
#ffon-root .ffon-compact h2 { font-size:19px; margin-top:8px; }
#ffon-root .ffon-compact { padding:16px; }
#ffon-root .ffon-compact .ffon-progress { margin:12px 0; }
#ffon-root .ffon-compact .ffon-preference { margin:10px 0; }
#ffon-root .ffon-demo-upload .ffon-photo { animation:ffon-nudge 3s ease-in-out 2; }
@keyframes ffon-nudge { 0%,100%{translate:0 0;} 50%{translate:12px -3px;} }
.ffon-launcher { position:fixed; z-index:2000; right:18px; bottom:22px; display:flex; align-items:center; gap:7px; padding:9px 13px; border:1px solid #ebd6bf; border-radius:24px; background:#fffaf3; color:#a96729; box-shadow:0 3px 14px #33200b12; font:600 12px/20px sans-serif; cursor:pointer; }
.ffon-launcher span { display:grid; place-items:center; width:19px; height:19px; border:1px solid currentColor; border-radius:50%; }
.ffon-launcher:focus-visible { outline:3px solid #f8aa5b; outline-offset:3px; }
.ffon-launcher.ffon-retouch { background:#202126; border-color:#514a30; color:#ffd75b; bottom:60px; }
.ffon-launcher.ffon-upload { bottom:88px; }
@media(max-width:760px) {
 .ffon-launcher { right:12px; bottom:calc(86px + env(safe-area-inset-bottom,0px)); font-size:11px; padding:6px 9px; }
 .ffon-launcher.ffon-retouch { top:calc(73px + env(safe-area-inset-top,0px)); bottom:auto; color:#ffdc68; }
 .ffon-launcher.ffon-upload { bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
 #ffon-root.ffon-dark { --accent:#ffdc68; }
 #ffon-root .ffon-footer button { min-height:44px; height:auto; }
 #ffon-root .ffon-card { width:calc(100% - 28px); }
 #ffon-root .ffon-demo-text .ffon-mini-form { width:49%; }
 #ffon-root .ffon-crop-copy { right:8px; font-size:12px; }
}
@media(max-width:350px) {
 #ffon-root .ffon-card { padding:16px; }
 #ffon-root .ffon-drop { width:42%; right:12px; }
 #ffon-root .ffon-photo { width:62px; }
 #ffon-root .ffon-mini-form { width:47%; right:8px; }
 #ffon-root .ffon-mini-paper { left:10px; width:78px; }
 #ffon-root .ffon-demo { height:118px; }
 #ffon-root .ffon-footer button { padding:10px 9px; }
}
@media(prefers-reduced-motion:reduce) { #ffon-root *,#ffon-root *::before,#ffon-root *::after { animation:none!important; transition:none!important; } }

#ffon-root .ffon-count { white-space:nowrap; }
#ffon-root .ffon-meta { flex-shrink:0; }
#ffon-root .ffon-crop-photo,#ffon-root .ffon-region-photo { width:44%; height:calc(100% - 43px); }
#ffon-root .ffon-crop-copy,#ffon-root .ffon-region-text { left:53%; font-size:12px; }
#ffon-root .ffon-demo-slider { left:53%; top:auto; bottom:19px; }
#ffon-root .ffon-safe-page { height:calc(100% - 39px); }
#ffon-root .ffon-safe-page img { top:39px; height:calc(100% - 47px); }
#ffon-root .ffon-safe-arrow { left:46%; }
#ffon-root.ffon-dark .ffon-drop { background:#202126; }
#ffon-root .ffon-compact .ffon-demo-upload .ffon-photo { top:28px; left:28px; width:49px; height:53px; padding:3px 3px 10px; }
#ffon-root .ffon-compact .ffon-demo-upload .ffon-photo-back { left:20px; }
#ffon-root .ffon-compact .ffon-drop { top:28px; height:54px; gap:1px; font-size:10px; }
#ffon-root .ffon-compact .ffon-upload-symbol { font-size:20px; line-height:23px; }
#ffon-root .ffon-compact .ffon-demo-arrow { top:40px; }
#ffon-root .ffon-compact .ffon-mini-paper { top:26px; height:57px; }
#ffon-root .ffon-compact .ffon-mini-title { top:5px; font-size:6px; }
#ffon-root .ffon-compact .ffon-mini-photo { top:25px; bottom:5px; }
#ffon-root .ffon-compact .ffon-mini-form { top:27px; padding:5px; }
#ffon-root .ffon-compact .ffon-mini-form span { margin-bottom:3px; }
#ffon-root .ffon-compact .ffon-mini-form strong { padding:5px 2px; font-size:8px; }
#ffon-root .ffon-compact .ffon-region-text { top:28px; font-size:10px; }
#ffon-root .ffon-compact .ffon-region-text small { font-size:8px; margin-top:2px; }
#ffon-root .ffon-compact .ffon-crop-copy { top:30px; font-size:10px; }
#ffon-root .ffon-compact .ffon-crop-window { inset:3px 22px; }
#ffon-root .ffon-compact .ffon-crop-drag { top:9px; left:40%; font-size:20px; }
#ffon-root .ffon-compact .ffon-cost-row { top:27px; padding:8px; font-size:11px; }
#ffon-root .ffon-compact .ffon-cost-row b { font-size:14px; }
#ffon-root .ffon-compact .ffon-cost-foot { top:69px; font-size:9px; }
#ffon-root .ffon-compact .ffon-safe-page b { top:8px; }
#ffon-root .ffon-compact .ffon-safe-page img { top:22px; height:calc(100% - 28px); }
#ffon-root .ffon-compact .ffon-safe-arrow { top:40px; }
#ffon-root .ffon-compact .ffon-demo-hold { top:29px; height:28px; font-size:10px; }
#ffon-root .ffon-compact .ffon-demo-hint { top:66px; font-size:8px; }

#ffon-root .ffon-preference input { appearance:none!important; -webkit-appearance:none!important; border:1.5px solid var(--muted)!important; border-radius:4px!important; background:var(--card)!important; }
#ffon-root .ffon-preference input:checked { border-color:var(--accent)!important; background-color:var(--accent)!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m4 9 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; }
#ffon-root.ffon-dark .ffon-preference input:checked { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m4 9 3 3 7-7' fill='none' stroke='%23211b08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; }