:root{--blue: #073fbd;--blue-dark: #052e8c;--yellow: #ffd329;--pink: #ff6893;--red: #ef353e;--peach: #f4dfd0;--ink: #17191e;--ink-2: #3c4048;--ink-3: #4a4e57;--line: #e3e5ec;--grey-1: #f1f2f6;--grey-2: #f7f7f9;--grey-photo: #e9e8e4;--chip-blue: #e6ebf7;--chip-peach: #fceee2;--chip-pink: #fce4e8;--ok: #1d6b3a;--warn-bg: #fff4c7;--err: #b3261e;--radius-xl: 36px;--radius-lg: 28px;--radius-md: 20px;--shadow: 0 24px 60px rgba(140, 80, 50, .14);--font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--peach);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}button,input,select{font:inherit;color:inherit}button{cursor:pointer}img{max-width:100%}h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0;font-weight:800}p{margin:0}:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}.shell{min-height:100vh;min-height:100dvh}.app{min-height:100vh;min-height:100dvh;overflow-x:clip;background:#fff;display:flex;flex-direction:column;padding:16px 16px calc(96px + env(safe-area-inset-bottom))}@media (min-width: 1024px){.shell{padding:24px}.app{max-width:1440px;margin:0 auto;min-height:calc(100vh - 48px);min-height:calc(100dvh - 48px);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:24px 40px 110px}}.header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}.header .header-actions{margin-left:auto;flex-wrap:nowrap}.header .logo-btn,.header .help-btn{flex-shrink:0}.header.stacked{flex-wrap:wrap;row-gap:6px}.header.stacked .top-nav{order:1;flex-basis:100%}.save-status{white-space:nowrap}@media (max-width: 699px){.header{display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo help" "actions actions";row-gap:10px}.logo-btn{grid-area:logo;justify-self:start}.help-btn{grid-area:help}.header .header-actions{grid-area:actions;justify-content:space-between;margin-left:0}.zoom-text{display:none}}.logo-btn{border:0;background:none;padding:4px;min-height:48px;display:flex;align-items:center;border-radius:12px}.logo{display:block;height:28px;width:auto}@media (min-width: 700px){.logo{height:36px}}.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.top-nav{display:none}@media (min-width: 1100px){.top-nav{display:flex;gap:4px}}.nav-item{white-space:nowrap;min-height:48px;padding:0 16px;border-radius:999px;border:0;background:transparent;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--ink-3)}.nav-item[aria-current=step]{background:var(--peach);color:var(--ink);font-weight:800}.nav-item:hover{background:var(--grey-1)}.nav-item[aria-current=step]:hover{background:var(--peach)}.nav-item .done-dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid #eeeff3;display:flex;justify-content:space-around;gap:4px;padding:8px 8px calc(10px + env(safe-area-inset-bottom))}.bottom-nav .nav-item{flex:1;max-width:110px;min-height:60px;flex-direction:column;justify-content:center;gap:2px;padding:4px;border-radius:20px;font-size:14px;white-space:normal;text-align:center;line-height:1.15;hyphens:auto;overflow-wrap:break-word}@media (max-width: 420px){.bottom-nav{gap:2px;padding-left:4px;padding-right:4px}.bottom-nav .nav-item{font-size:13px;padding:4px 2px}}@media (min-width: 1100px){.bottom-nav{display:none}.app{padding-bottom:36px}}.save-status{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--ink-3)}.save-status.error{color:var(--err);font-weight:700}.lang-select{appearance:none;-webkit-appearance:none;min-height:44px;border-radius:999px;border:0;background:var(--grey-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2317191E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;padding:0 38px 0 16px;font-weight:700;font-size:15px}.demo-banner{margin-top:12px;display:flex;align-items:center;gap:10px;background:var(--grey-2);border-radius:18px;padding:10px 14px;font-size:15px;color:var(--ink-2)}.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:800;background:var(--yellow);color:var(--ink)}.badge.soft{background:var(--chip-blue)}.notice{border-radius:18px;padding:12px 16px;font-size:16px;display:flex;gap:10px;align-items:flex-start}.notice.warn{background:var(--warn-bg)}.notice.err{background:#fde8e6;color:#5f130f}.notice.info{background:var(--chip-blue)}.btn{min-height:48px;padding:0 20px;border-radius:999px;border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px;line-height:1.15;text-align:center;background:var(--grey-1);color:var(--ink);transition:transform .12s ease,background-color .15s ease,box-shadow .15s ease}.btn:active{transform:scale(.98)}a.btn{text-decoration:none}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover:not(:disabled){background:var(--blue-dark)}.btn-big{min-height:60px;font-size:18px;font-weight:800;padding:0 26px}.btn-outline{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}.btn-chip-blue{background:var(--chip-blue)}.btn-chip-peach{background:var(--chip-peach)}.btn-chip-pink{background:var(--chip-pink)}.btn-white{background:#fff;box-shadow:0 4px 14px #17191e33}.btn[aria-pressed=true]{background:var(--ink);color:#fff}.btn-block{width:100%}.nowrap{white-space:nowrap}.btn-danger{background:#fde8e6;color:#5f130f}.icon-btn{width:48px;height:48px;padding:0;border-radius:50%}.btn-row{display:flex;gap:10px;flex-wrap:wrap}.link-btn{border:0;background:none;padding:10px 4px;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px;min-height:44px}.step{margin-top:20px;display:flex;flex-direction:column;gap:20px;animation:stepIn .28s ease both}@keyframes stepIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.step-head{display:flex;flex-direction:column;gap:6px}.eyebrow{font-size:15px;font-weight:700;color:var(--ink-3)}.title-xl{font-size:clamp(30px,4.2vw,42px)}.title-lg{font-size:clamp(24px,3vw,30px)}.lead{font-size:18px;color:var(--ink-2);max-width:46ch}.work{display:flex;flex-direction:column;gap:16px;--media-h: 40vh;--media-h: 40svh}.stage{display:contents}.side{display:flex;flex-direction:column;gap:16px;min-width:0}.sticky-media{position:sticky;top:0;z-index:6;background:#fff;padding:8px 0}@media (min-width: 1024px){.work{flex-direction:row;align-items:stretch;gap:36px;--media-h: initial}.stage{display:flex;flex-direction:column;gap:14px;min-width:0;flex:1}.side{width:440px;flex-shrink:0;align-self:flex-start;position:sticky;top:16px}.sticky-media{top:8px}}@media (min-width: 700px) and (max-width: 1023px) and (orientation: landscape){.work{flex-direction:row;align-items:stretch;gap:24px;--media-h: initial}.stage{display:flex;flex-direction:column;gap:14px;min-width:0;flex:1}.side{width:360px;flex-shrink:0;align-self:flex-start}}.card{background:#fff;border-radius:var(--radius-lg)}.panel{background:var(--grey-2);border-radius:24px;padding:16px 18px}.choice-grid{display:grid;gap:12px;grid-template-columns:1fr;max-width:560px}.choice{min-height:72px;border-radius:24px;border:0;padding:12px 20px;display:flex;align-items:center;gap:14px;font-weight:800;font-size:18px;text-align:left;background:var(--grey-1)}.choice .ico{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#fff;flex-shrink:0}.choice.primary{background:var(--blue);color:#fff}.choice.primary .ico{background:#ffffff29}.choice small{display:block;font-size:14px;font-weight:500;opacity:.85}.visually-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.viewer{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;background:var(--grey-photo);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.viewer canvas{display:block;width:100%;height:100%}.viewer.zoomed{touch-action:none}.viewer:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.viewer-tools{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}.viewer-badge{position:absolute;left:12px;top:12px}.viewer-status{position:absolute;left:12px;bottom:12px;background:#fffffff0;border-radius:999px;padding:8px 14px;font-size:15px;font-weight:700}.compare-handle{position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1px #00000026;pointer-events:none}.compare-handle:after{content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0000004d}.sq{display:block;border-radius:30%;position:relative;flex-shrink:0}.sq-num{position:absolute;right:-6px;top:-6px;width:26px;height:26px;border-radius:50%;border:3px solid #fff;background:var(--ink);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:14px 10px}.swatch-btn{border:0;background:none;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:16px;font-size:15px;font-weight:700}.swatch-btn .sq{width:68px;height:68px}.swatch-btn.off .sq{opacity:.35}.swatch-btn.off{color:var(--ink-3)}.swatch-btn .state{font-size:13px;font-weight:700;color:var(--ink-3)}.marker{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 2px 6px #00000059;pointer-events:none}.marker.off{background:#9a9da6}.marker.ring{width:64px;height:64px;background:transparent;border:4px solid var(--ink);box-shadow:0 0 0 3px #fff}.marker-drag{pointer-events:auto;width:38px;height:38px;padding:0;font-size:16px;cursor:grab;touch-action:none;transition:transform .1s ease}.marker-drag:before{content:"";position:absolute;inset:-6px;border-radius:50%}.marker-drag:hover{transform:translate(-50%,-50%) scale(1.08)}.marker-drag.dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(1.3);box-shadow:0 6px 16px #00000073;z-index:2}.marker-drag:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:50%}.sample-ring{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #17191eb3;pointer-events:none}.dlg-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width: 420px){.dlg-actions{grid-template-columns:1fr}}.marker.light{background:var(--yellow);color:var(--ink)}.recipe{display:flex;flex-direction:column;gap:16px;animation:pop .24s ease both}@keyframes pop{0%{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}.recipe-row{display:flex;align-items:flex-start;justify-content:center;gap:14px;flex-wrap:wrap}.ingredient{border:0;background:none;padding:4px;border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:84px}.ingredient .sq{width:76px;height:76px}.ingredient .amount{font-size:17px;font-weight:800}.ingredient .dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;max-width:84px}.dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink)}.plus{padding-top:22px;font-size:26px;font-weight:800;color:var(--ink-3)}.divider-dots{margin-top:12px;height:52px;border-left:3px dotted #c9ccd4}.compare-bar{display:flex;gap:8px}.compare-bar span{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:16px;font-size:15px;font-weight:800;padding:4px 8px;text-align:center}.prop-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 1px #00000014}.prop-bar span{display:block;height:100%;border-right:2px solid #fff}.prop-bar span:last-child{border-right:0}.small-note{display:flex;gap:8px;align-items:flex-start;font-size:15px;font-weight:500;color:var(--ink-3)}.empty-recipe{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:22px;border-radius:24px;background:var(--grey-2)}@media (max-width: 699px){.recipe-row{gap:6px}.ingredient{min-width:64px}.ingredient .amount{font-size:15px}.aids-row{display:grid;grid-template-columns:1fr 1fr}.aids-row .btn{padding:0 12px;font-size:15px}.ingredient .sq{width:60px;height:60px}.plus{padding-top:16px}.divider-dots{height:44px;margin-top:8px}}.target-row{display:flex;align-items:center;gap:14px}.guide-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.guide-step{display:grid;grid-template-columns:30px 64px minmax(0,1fr) 58px;gap:12px;align-items:center;padding:10px 12px 10px 10px;border-radius:20px;background:var(--grey-2)}.step-num{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}.guide-step .ingredient{min-width:0;padding:2px}.guide-step .ingredient .sq{width:60px;height:60px}.step-main{font-weight:700;font-size:17px;line-height:1.3}.step-sub{font-size:15px;color:var(--ink-3);margin-top:2px}.after{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--ink-3);text-align:center}.dot-after{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px #0000001f}.quality{align-self:flex-start;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;font-weight:800;font-size:15px}.quality.q-good{background:#dff3e6;color:#14532d}.quality.q-close{background:#fff4c7;color:#5b4200}.quality.q-far{background:#fde8e6;color:#5f130f}@media (max-width: 420px){.guide-step{grid-template-columns:26px 52px minmax(0,1fr) 48px;gap:8px}.step-num{width:26px;height:26px;font-size:14px}.guide-step .ingredient .sq{width:50px;height:50px}.dot-after{width:38px;height:38px}.step-main{font-size:16px}}.slider{display:flex;align-items:flex-end;gap:10px}.slider-mid{flex:1;min-width:0}.slider-labels{display:flex;justify-content:space-between;gap:8px;font-size:15px;font-weight:700;color:var(--ink-2);margin-bottom:4px}.slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0}.slider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:var(--track, #e3e5ec)}.slider input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:var(--track, #e3e5ec)}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--thumb, var(--blue));border:4px solid #fff;box-shadow:0 1px 6px #17191e66}.slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--thumb, var(--blue));border:4px solid #fff;box-shadow:0 1px 6px #17191e66}.slider .icon-btn{background:#fff;box-shadow:0 1px 4px #17191e2e;font-size:24px;font-weight:700;flex-shrink:0}.seg-control{display:flex;flex-wrap:wrap;gap:4px;background:var(--grey-1);border-radius:24px;padding:4px}.seg-control button{flex:1 1 auto;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;font-weight:700;font-size:15px}@media (max-width: 699px){.seg-control button{flex-basis:40%}}.seg-control button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #17191e2e}details.more{border-radius:20px;background:var(--grey-2)}details.more>summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:800;border-radius:20px}details.more>summary::-webkit-details-marker{display:none}details.more[open]>summary svg{transform:rotate(180deg)}details.more>.more-body{padding:4px 18px 18px;display:flex;flex-direction:column;gap:14px}dialog.dlg{border:0;border-radius:28px;padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);color:var(--ink);box-shadow:0 30px 80px #17191e59}dialog.dlg::backdrop{background:#17191e80}dialog.dlg[open]{animation:pop .2s ease both}.dlg-inner{padding:22px;display:flex;flex-direction:column;gap:16px}.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.dlg-head h2{font-size:24px}.help-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:17px}.welcome{display:flex;flex-direction:column;gap:28px;max-width:980px;margin:12px auto 0;width:100%}.welcome-hero{display:grid;gap:24px;align-items:center}@media (min-width: 900px){.welcome-hero{grid-template-columns:1.1fr .9fr}}.lang-buttons{display:flex;gap:8px;flex-wrap:wrap}.spinner{width:20px;height:20px;border-radius:50%;border:3px solid rgba(7,63,189,.25);border-top-color:var(--blue);animation:spin .9s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.print-area{display:none}@media print{body{background:#fff}body.printing .shell,body.printing dialog{display:none!important}body.printing .print-area{display:block}.print-area img{width:100%}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}