.ob{flex-direction:column;min-height:100dvh;display:flex;position:relative;overflow:hidden}.ob-bg{pointer-events:none;position:absolute;inset:0;overflow:hidden}.ob-top{z-index:20;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--color-line);background:#fffbf4d9;position:sticky;top:0}.ob-top-inner{align-items:center;gap:1rem;height:4.25rem;padding-inline:clamp(1rem,4vw,2.5rem);display:flex}.ob-progress{background:#0e122614;border-radius:99px;flex:1;height:6px;overflow:hidden}.ob-progress i{transform-origin:0;width:100%;height:100%;transition:transform .7s var(--ease-out-expo);background:linear-gradient(90deg,#3155e7,#ee5253,#feca57);border-radius:99px;display:block;transform:scaleX(0)}.ob-counter{color:var(--color-ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:700}.ob-help{color:var(--color-ink-soft);align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;display:inline-flex}.ob-help:hover{color:var(--color-brand-blue)}@media (width<=640px){.ob-help span{display:none}}.ob-main{z-index:1;flex:1;justify-content:center;align-items:flex-start;padding:clamp(2rem,6vh,5rem) clamp(1rem,4vw,2.5rem) 8rem;display:flex;position:relative}.ob-stage{width:100%;max-width:46rem;position:relative}.ob-step{opacity:0;width:100%;transition:opacity .45s var(--ease-out-expo), transform .6s var(--ease-out-expo)}.ob-step.from-down{transform:translateY(48px)}.ob-step.from-up{transform:translateY(-48px)}.ob-step.is-active{opacity:1;transform:none}.ob-step.is-leaving{opacity:0;pointer-events:none;position:absolute;inset:0 0 auto}.ob-step.is-leaving.to-up{transform:translateY(-48px)}.ob-step.is-leaving.to-down{transform:translateY(48px)}.ob-body.is-shaking{animation:.45s ob-shake}@keyframes ob-shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.ob-q{align-items:flex-start;gap:1rem;display:flex}.ob-num{color:var(--color-brand-blue);white-space:nowrap;font-variant-numeric:tabular-nums;align-items:center;gap:.2rem;margin-top:.55rem;font-size:.9rem;font-weight:800;display:inline-flex}.ob-emoji{width:3rem;height:3rem;box-shadow:var(--shadow-soft);animation:ob-pop .7s var(--ease-spring) both;background:#fff;border-radius:1rem;place-items:center;margin-bottom:1rem;font-size:1.5rem;display:inline-grid}@keyframes ob-pop{0%{opacity:0;transform:scale(.4)rotate(-12deg)}to{opacity:1;transform:none}}.ob-title{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:600;line-height:1.1}.ob-desc{color:var(--color-ink-soft);max-width:40rem;margin-top:.9rem;font-size:1.05rem;line-height:1.55}.ob-control{margin-top:1.75rem}.ob-q-main{flex:1}.ob-input{width:100%;color:var(--color-ink);background:0 0;border:0;border-bottom:2px solid #0e12262e;border-radius:0;outline:none;padding:.6rem 0;font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:500;transition:border-color .25s}.ob-input::placeholder{color:var(--color-ink-mute);font-weight:400}.ob-input:focus{border-color:var(--color-brand-blue)}.ob-input:focus-visible{outline:none}.ob-input-sm{font-size:1.05rem}.ob-fields{gap:1.4rem;display:grid}.ob-field{display:block}.ob-label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-soft);font-size:.8rem;font-weight:800;display:block}.ob-label em{text-transform:none;letter-spacing:0;color:var(--color-ink-mute);font-style:normal;font-weight:500}.ob-textarea{border:1.5px solid var(--color-line);width:100%;color:var(--color-ink);resize:vertical;background:#fff;border-radius:1.25rem;outline:none;padding:1rem 1.1rem;font-family:inherit;font-size:1.1rem;line-height:1.5;transition:border-color .25s,box-shadow .25s}.ob-textarea:focus{border-color:var(--color-brand-blue);box-shadow:0 0 0 4px var(--color-brand-blue-soft)}.ob-hint-sm{color:var(--color-ink-mute);margin-top:.5rem;font-size:.8rem}.ob-error{background:var(--color-brand-coral-soft);color:#b3282a;border-radius:.75rem;align-items:center;gap:.5rem;margin-top:1rem;padding:.55rem .9rem;font-size:.95rem;font-weight:600;display:inline-flex}.ob-error:before{content:"!";background:var(--color-brand-coral);color:#fff;border-radius:99px;place-items:center;width:1.2rem;height:1.2rem;font-size:.75rem;font-weight:900;display:inline-grid}.ob-actions{flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.75rem;display:flex}.ob-hint{color:var(--color-ink-mute);font-size:.85rem}.ob-hint kbd{color:var(--color-ink-soft);font-family:inherit;font-weight:700}.ob-skip{color:var(--color-ink-soft);text-underline-offset:4px;background:0 0;border:0;margin-left:auto;font-size:.9rem;font-weight:600;text-decoration:underline}.ob-skip:hover{color:var(--color-ink)}.ob-ok.is-busy{opacity:.6;pointer-events:none}@media (width<=640px){.ob-hint{display:none}}.ob-perks{gap:.6rem;display:grid}.ob-perks li{border:1px solid var(--color-line);background:#fff;border-radius:1rem;align-items:center;gap:.75rem;padding:.85rem 1rem;font-weight:500;display:flex}.ob-perks li span{font-size:1.25rem}.ob-resume{background:var(--color-brand-yellow-soft);border-radius:1rem;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-top:1.25rem;padding:.9rem 1rem;display:flex}.ob-link{text-underline-offset:4px;color:var(--color-ink-soft);background:0 0;border:0;font-weight:600;text-decoration:underline}.ob-choices{gap:.6rem;display:grid}@media (width>=640px){.ob-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}.ob-choice{text-align:left;border:1.5px solid var(--color-line);transition:transform .35s var(--ease-out-expo), border-color .2s, box-shadow .35s, background-color .2s;background:#fff;border-radius:1.1rem;align-items:center;gap:.85rem;padding:.9rem 1rem;display:flex}.ob-choice:hover{box-shadow:var(--shadow-soft);border-color:#0e12264d;transform:translateY(-2px)}.ob-choice.is-selected{border-color:var(--color-brand-blue);background:var(--color-brand-blue-soft);box-shadow:0 0 0 3px var(--color-brand-blue-soft)}.ob-key{border:1.5px solid var(--color-line);width:1.7rem;height:1.7rem;color:var(--color-ink-soft);background:#fff;border-radius:.5rem;flex:none;place-items:center;font-size:.75rem;font-weight:800;display:inline-grid}.ob-choice.is-selected .ob-key,.ob-style.is-selected .ob-key{background:var(--color-brand-blue);border-color:var(--color-brand-blue);color:#fff}.ob-choice-emoji{font-size:1.35rem}.ob-choice-text{flex-direction:column;line-height:1.25;display:flex}.ob-choice-text strong{font-weight:700}.ob-choice-text small{color:var(--color-ink-mute);margin-top:.15rem;font-size:.8rem}.ob-other{margin-top:1rem}.ob-hours{gap:.45rem;display:grid}.ob-hours-tools{flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem;display:flex}.ob-hours-tools .chip{cursor:pointer}.ob-hours-tools .chip:hover{border-color:var(--color-ink)}.ob-day{border:1px solid var(--color-line);background:#fff;border-radius:.9rem;grid-template-columns:3rem auto 1fr auto 1fr;align-items:center;gap:.6rem;padding:.55rem .8rem;display:grid}.ob-day.is-closed{opacity:.6}.ob-day-name{letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;font-weight:800}.ob-time{border:1px solid var(--color-line);background:var(--color-cream);font:inherit;border-radius:.6rem;min-width:0;padding:.35rem .5rem;font-size:.95rem}.ob-time:disabled{opacity:.4}.ob-dash{color:var(--color-ink-mute)}.ob-switch{cursor:pointer;color:var(--color-ink-soft);align-items:center;gap:.45rem;font-size:.8rem;font-weight:700;display:inline-flex}.ob-switch input{opacity:0;width:0;height:0;position:absolute}.ob-switch span{background:#0e12262e;border-radius:99px;flex:none;width:2.2rem;height:1.25rem;transition:background-color .25s;position:relative}.ob-switch span:after{content:"";width:calc(1.25rem - 4px);height:calc(1.25rem - 4px);transition:transform .3s var(--ease-spring);background:#fff;border-radius:99px;position:absolute;top:2px;left:2px}.ob-switch input:checked+span{background:var(--color-brand-blue)}.ob-switch input:checked+span:after{transform:translate(.95rem)}.ob-switch b{width:3.2rem}@media (width<=560px){.ob-day{grid-template-columns:2.6rem auto}.ob-day .ob-time{grid-column:span 1}.ob-switch b{width:auto}}.ob-styles{gap:.9rem;display:grid}@media (width>=640px){.ob-styles{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=900px){.ob-styles{grid-template-columns:repeat(3,minmax(0,1fr))}}.ob-style{text-align:left;border:1.5px solid var(--color-line);transition:transform .35s var(--ease-out-expo), border-color .2s, box-shadow .35s;background:#fff;border-radius:1.25rem;flex-direction:column;gap:.7rem;padding:.7rem;display:flex;position:relative}.ob-style:hover{box-shadow:var(--shadow-soft);transform:translateY(-3px)}.ob-style.is-selected{border-color:var(--color-brand-blue);box-shadow:0 0 0 3px var(--color-brand-blue-soft)}.ob-style-preview{background:var(--bg);color:var(--fg);aspect-ratio:16/10;border-radius:.8rem;flex-direction:column;gap:.35rem;padding:.7rem;display:flex}.ob-sp-nav{gap:.25rem;display:flex}.ob-sp-nav i{opacity:.35;background:currentColor;border-radius:99px;width:.9rem;height:.2rem;display:block}.ob-sp-title{font-family:var(--font-display);margin-top:.25rem;font-size:1rem;font-weight:700}.ob-sp-line{opacity:.25;background:currentColor;border-radius:99px;width:80%;height:.25rem;display:block}.ob-sp-line.short{width:50%}.ob-sp-btn{background:var(--ac);border-radius:99px;width:2.6rem;height:.8rem;margin-top:auto;display:block}.ob-style-meta{align-items:flex-start;gap:.6rem;display:flex}.ob-style-meta strong{font-weight:700;display:block}.ob-style-meta small{color:var(--color-ink-mute);margin-top:.15rem;font-size:.78rem;line-height:1.35;display:block}.ob-swatches{gap:.3rem;display:flex}.ob-swatches i{border:1px solid #0e12261f;border-radius:99px;width:1rem;height:1rem;display:block}.ob-style-demo{color:var(--color-brand-blue);align-self:flex-start;font-size:.78rem;font-weight:700}.ob-style-demo:hover{text-decoration:underline}.ob-colors{gap:1.1rem;display:grid}.ob-swatch-grid{grid-template-columns:repeat(6,1fr);gap:.6rem;max-width:26rem;display:grid}.ob-swatch{aspect-ratio:1;background:var(--c);box-shadow:0 0 0 1.5px var(--color-line);transition:transform .35s var(--ease-spring), box-shadow .25s;border:3px solid #fff;border-radius:.9rem}.ob-swatch:hover{transform:scale(1.08)rotate(-3deg)}.ob-swatch.is-selected{box-shadow:0 0 0 3px var(--color-ink);transform:scale(1.06)}.ob-hex{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.ob-hex .ob-input{width:9rem}.ob-hex-pick{border:1.5px solid var(--color-line);cursor:pointer;background:#fff;border-radius:99px;align-items:center;gap:.4rem;padding:.45rem .7rem .45rem .45rem;font-size:.85rem;font-weight:700;display:inline-flex;position:relative}.ob-hex-pick input{cursor:pointer;background:0 0;border:0;border-radius:99px;width:1.6rem;height:1.6rem;padding:0;overflow:hidden}.ob-palette{flex-wrap:wrap;align-items:center;gap:.5rem;min-height:2.4rem;display:flex}.ob-palette-label{color:var(--color-ink-soft);font-size:.9rem}.ob-palette-chip{border:1px solid var(--color-line);font-variant-numeric:tabular-nums;background:#fff;border-radius:99px;align-items:center;gap:.4rem;padding:.3rem .5rem .3rem .35rem;font-size:.85rem;font-weight:700;display:inline-flex}.ob-palette-chip i{border-radius:99px;width:1.25rem;height:1.25rem;display:block}.ob-palette-chip button{color:var(--color-ink-mute);background:0 0;border:0;padding:0 .2rem;font-size:1rem;line-height:1}.ob-preview{border:1px solid var(--color-line);background:#fff;border-radius:.9rem;align-items:center;gap:.5rem;margin-left:auto;padding:.5rem .7rem;display:inline-flex}.ob-preview b{font-family:var(--font-display);color:var(--a);font-size:1.2rem}.ob-preview i{background:var(--b);opacity:.5;border-radius:99px;width:2.5rem;height:.35rem;display:block}.ob-preview em{color:#fff;background:var(--a);border-radius:99px;padding:.25rem .55rem;font-size:.7rem;font-style:normal;font-weight:700}.ob-check{cursor:pointer;align-items:center;gap:.6rem;margin-top:.25rem;font-weight:600;display:inline-flex}.ob-check em{color:var(--color-ink-mute);font-style:normal;font-weight:500}.ob-check input{opacity:0;width:0;height:0;position:absolute}.ob-check span{background:#fff;border:1.5px solid #0e12264d;border-radius:.4rem;flex:none;place-items:center;width:1.35rem;height:1.35rem;transition:background-color .2s,border-color .2s;display:grid}.ob-check span:after{content:"";opacity:0;border:2.5px solid #fff;border-width:0 2.5px 2.5px 0;width:.4rem;height:.7rem;transform:rotate(45deg)translateY(-1px)}.ob-check input:checked+span{background:var(--color-brand-blue);border-color:var(--color-brand-blue)}.ob-check input:checked+span:after{opacity:1}.ob-drop{text-align:center;cursor:pointer;transition:border-color .25s, background-color .25s, transform .35s var(--ease-out-expo);background:#ffffffb3;border:2px dashed #0e122633;border-radius:1.5rem;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;padding:2.2rem 1.5rem;display:flex}.ob-drop:hover,.ob-drop.is-over{border-color:var(--color-brand-blue);background:var(--color-brand-blue-soft);transform:translateY(-2px)}.ob-drop-icon{font-size:1.6rem}.ob-drop small{color:var(--color-ink-mute)}.ob-files{gap:.4rem;margin-top:.75rem;display:grid}.ob-file{border:1px solid var(--color-line);background:#fff;border-radius:.8rem;align-items:center;gap:.6rem;padding:.55rem .8rem;font-size:.9rem;display:flex}.ob-file-name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:600;overflow:hidden}.ob-file-status{color:var(--color-ink-mute);font-size:.75rem;font-weight:700}.ob-file.is-done .ob-file-status{color:#15803d}.ob-file.is-error .ob-file-status{color:#b3282a}.ob-file.is-uploading .ob-file-status{color:var(--color-brand-blue)}.ob-tabs{background:#0e12260f;border-radius:99px;gap:.25rem;margin-bottom:1rem;padding:.25rem;display:inline-flex}.ob-tabs [role=tab]{color:var(--color-ink-soft);background:0 0;border:0;border-radius:99px;padding:.5rem .95rem;font-size:.9rem;font-weight:700}.ob-tabs [role=tab].is-active{background:var(--color-ink);color:#fff}.ob-next{gap:.6rem;margin-top:1.5rem;display:grid}.ob-next li{border:1px solid var(--color-line);background:#fff;border-radius:1rem;align-items:flex-start;gap:.8rem;padding:.85rem 1rem;display:flex}.ob-next li span{background:var(--color-brand-yellow);border-radius:99px;flex:none;place-items:center;width:1.75rem;height:1.75rem;font-size:.85rem;font-weight:800;display:grid}.ob-next strong{display:block}.ob-note{background:var(--color-brand-yellow-soft);color:var(--color-ink-soft);border-radius:1rem;margin-top:1.25rem;padding:.85rem 1rem;font-size:.95rem}.ob-note a{color:var(--color-ink);font-weight:700}.ob-confetti{pointer-events:none;height:0;position:absolute;inset:-6rem 0 auto}.ob-confetti i{left:var(--x);background:var(--c);width:.6rem;height:.9rem;transform:scale(var(--s)) rotate(var(--r));animation:ob-confetti 2.6s var(--d) ease-in both;opacity:0;border-radius:2px;position:absolute;top:0}@keyframes ob-confetti{0%{transform:translateY(0) scale(var(--s)) rotate(var(--r));opacity:1}to{transform:translateY(80vh) scale(var(--s)) rotate(calc(var(--r) + 540deg));opacity:0}}.ob-bottom{bottom:0;z-index:20;pointer-events:none;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem clamp(1rem,4vw,2.5rem);display:flex;position:fixed;inset-inline:0}.ob-savenote{color:var(--color-ink-mute);font-size:.8rem;font-weight:600}.ob-navs{pointer-events:auto;gap:.35rem;display:inline-flex}.ob-nav{background:var(--color-ink);color:#fff;width:2.75rem;height:2.75rem;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease-out-expo), background-color .2s, opacity .2s;border:0;border-radius:.9rem;place-items:center;display:grid}.ob-nav:hover{background:var(--color-brand-blue);transform:translateY(-2px)}.ob-nav:disabled{opacity:.35;pointer-events:none}@media (prefers-reduced-motion:reduce){.ob-step,.ob-progress i{transition:none}.ob-confetti{display:none}}html.ob-preview-open,html.ob-preview-open body{overflow:hidden}.ob-preview{z-index:90;opacity:0;place-items:center;padding:clamp(.75rem,2.5vw,2rem);transition:opacity .3s;display:grid;position:fixed;inset:0}.ob-preview.is-open{opacity:1}.ob-preview-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0e12268c;position:absolute;inset:0}.ob-preview-card{background:var(--color-cream);width:min(72rem,100%);height:min(85dvh,60rem);box-shadow:var(--shadow-pop);transition:transform .45s var(--ease-out-expo);border-radius:1.5rem;flex-direction:column;display:flex;position:relative;overflow:hidden;transform:translateY(24px)scale(.98)}.ob-preview.is-open .ob-preview-card{transform:none}.ob-preview-top{border-bottom:1px solid var(--color-line);background:#fff;align-items:center;gap:1rem;padding:.85rem 1.1rem;display:flex}.ob-preview-title{min-width:0;margin-right:auto}.ob-preview-title strong{font-family:var(--font-display);font-size:1.1rem;line-height:1.1;display:block}.ob-preview-title small{color:var(--color-ink-mute);font-size:.78rem}.ob-preview-device{background:#0e12260f;border-radius:999px;gap:.25rem;padding:.25rem;display:inline-flex}.ob-preview-device button{color:var(--color-ink-soft);background:0 0;border:0;border-radius:999px;padding:.45rem .9rem;font-size:.85rem;font-weight:700}.ob-preview-device button.is-active{background:var(--color-ink);color:#fff}.ob-preview-actions{align-items:center;gap:.6rem;display:flex}.ob-preview-open{color:var(--color-brand-blue);white-space:nowrap;font-size:.85rem;font-weight:700}.ob-preview-open:hover{text-underline-offset:3px;text-decoration:underline}.ob-preview-x{background:var(--color-ink);color:#fff;width:2.4rem;height:2.4rem;transition:background-color .2s, transform .4s var(--ease-out-expo);border:0;border-radius:999px;font-size:1rem}.ob-preview-x:hover{background:var(--color-brand-coral);transform:rotate(90deg)}.ob-preview-body{background:var(--color-cream-deep);flex:1;min-height:0;padding:1rem}.ob-preview-stage{place-items:center;height:100%;display:grid}.ob-preview-frame{border:1px solid var(--color-line);width:100%;height:100%;box-shadow:var(--shadow-soft);transition:width .5s var(--ease-out-expo), border-radius .5s;background:#fff;border-radius:1rem;overflow:hidden}.ob-preview-frame iframe{border:0;width:100%;height:100%;display:block}.ob-preview-body.is-mobile .ob-preview-frame{border:6px solid var(--color-ink);border-radius:2rem;width:24.375rem;max-width:100%}.ob-preview-foot{border-top:1px solid var(--color-line);background:#fff;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.1rem;display:flex}.ob-preview-hint{color:var(--color-ink-soft);font-size:.85rem}@media (width<=720px){.ob-preview{padding:.5rem}.ob-preview-card{height:94dvh}.ob-preview-top{flex-wrap:wrap;gap:.5rem;padding:.7rem .8rem}.ob-preview-title small,.ob-preview-open,.ob-preview-hint{display:none}.ob-preview-foot .btn{width:100%}}
