@import url(https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Fraunces:wght@500;700&family=Space+Grotesk:wght@400;500;600&display=swap);:root{--bg:#f6f1ff;--ink:#1d1630;--muted:#7c6b9c;--purple:#6c38d6;--purple-dark:#5327ac;--panel:#ffffff;--line:#d6c9f1}*,::after,::before{box-sizing:border-box}body,html{height:100%;margin:0;overflow:hidden}body{font-family:"Space Grotesk",system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(circle at top left,#fff 0,var(--bg) 45%,#efe7ff 100%)}.app{min-height:100dvh;height:100dvh;--mobile-action-offset:0px;display:grid;grid-template-rows:auto 1fr;padding:clamp(12px,3vw,32px) clamp(12px,4vw,40px) clamp(12px,4vh,48px);gap:clamp(12px,2vh,24px)}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}.topbar-spacer{justify-self:end;position:relative}.settings-button{border:none;border-radius:999px;width:40px;height:40px;background:rgba(255,255,255,.9);border:1px solid var(--line);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;cursor:pointer;padding:0;box-shadow:0 6px 14px rgba(59,30,120,.12);transition:background .2s ease,color .2s ease,transform .2s ease}.settings-button-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1;margin-top:-4px}.settings-button:focus-visible,.settings-button:hover,.settings-item:focus-visible,.settings-item:hover{background:#f4ecff}.settings-button:focus-visible,.settings-item:focus-visible{outline:2px solid var(--purple-dark);outline-offset:2px}.settings-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 30px rgba(32,22,57,.2);padding:6px;z-index:12}.settings-item{width:100%;border:none;background:0 0;text-align:left;padding:10px 12px;border-radius:8px;color:var(--ink);cursor:pointer;font:inherit;font-size:14px;display:flex;align-items:center;gap:8px;justify-content:flex-start}.settings-check{visibility:hidden;width:1em;flex:0 0 1em;text-align:center}.settings-item.is-selected .settings-check{visibility:visible}.settings-divider{height:1px;margin:6px 6px;background:var(--line)}.settings-item.is-selected{color:var(--purple-dark);background:rgba(108,56,214,.12);font-weight:600}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.brand-title{font-family:Fraunces,serif;font-size:32px;letter-spacing:-.02em}.brand-subtitle{color:var(--muted);font-size:14px;margin-top:4px}.segment{background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:999px;display:inline-flex;padding:6px;gap:6px;backdrop-filter:blur(12px);justify-self:center}.segment-btn{border:none;background:0 0;color:var(--muted);padding:10px 18px;border-radius:999px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:12px;cursor:pointer;transition:background .2s ease,color .2s ease}.segment-btn.is-active{background:var(--purple);color:#fff;box-shadow:0 8px 16px rgba(108,56,214,.25)}@media (min-width:901px){.segment-btn[data-step=nail]{display:none}}.content{display:grid;grid-template-rows:1fr auto;gap:clamp(12px,2vh,24px);align-items:center;min-height:0}.actions{display:grid;grid-template-columns:1fr 1fr;align-items:end}.wall{position:relative;background:linear-gradient(135deg,#fff 0,#f4edff 100%);border:1px solid var(--line);border-radius:0;overflow:visible;box-shadow:0 20px 40px rgba(59,30,120,.12);width:100%;max-width:100%;justify-self:center;z-index:1}.frame{position:absolute;background:#efe7ff;border:2px solid #6c38d6;display:none}.hanger{position:absolute;width:12px;height:12px;border-radius:50%;background:#6c38d6;transform:translate(-50%,-50%);display:none}.guide{position:absolute;border-color:#8b7db1;border-style:dashed;border-width:0;display:none}.guide-h{border-top-width:1px}.guide-v{border-left-width:1px}.app[data-step=hanging] #guideNailFloor,.app[data-step=hanging] #guideNailHeight,.app[data-step=nail] #guideNailFloor,.app[data-step=nail] #guideNailHeight{z-index:6}#guideFrameHeight::after,#guideFrameHeight::before,#guideFrameWidth::after,#guideFrameWidth::before,#guideWallHeight::before,#guideWallWidth::after{content:"";position:absolute;width:0;height:0}#guideWallWidth::after{right:-1px;top:-5.5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:10px solid #8b7db1}#guideWallHeight::before{left:-5.5px;top:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid #8b7db1}#guideFrameWidth::before{left:-1px;top:-5.5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:10px solid #8b7db1}#guideFrameWidth::after{right:-1px;top:-5.5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:10px solid #8b7db1}#guideFrameHeight::before{left:-5.5px;top:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid #8b7db1}#guideFrameHeight::after{left:-5.5px;bottom:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid #8b7db1}.overlay{position:absolute;inset:0;pointer-events:none;display:none;z-index:2;visibility:hidden}.overlay-picture,.overlay-wall{z-index:3}.overlay-wall .dim-input{width:136px}.overlay-wall .dim-height{left:25px}.overlay-dimensions{z-index:3}.overlay-readout{z-index:6}.overlay-hanging{z-index:4}.overlay-dimensions,.overlay-hanging,.overlay-picture,.overlay-readout,.overlay-wall{opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}.app[data-step=hanging] .overlay-dimensions,.app[data-step=hanging] .overlay-hanging,.app[data-step=hanging] .overlay-readout,.app[data-step=nail] .overlay-readout,.app[data-step=picture] .overlay-dimensions,.app[data-step=picture] .overlay-picture,.app[data-step=wall] .overlay-wall{opacity:1;transform:translateY(0);visibility:visible;display:block}.app[data-step=picture] .overlay-picture .dim-label{opacity:.5}.app[data-step=picture] .overlay-dimensions .dim-wall-height,.app[data-step=picture] .overlay-dimensions .dim-wall-width{opacity:.5}.app[data-step=hanging] .overlay-dimensions,.app[data-step=picture] .overlay-dimensions{pointer-events:none}.app[data-step=hanging] .overlay-hanging .hanging-center-control,.app[data-step=hanging] .overlay-hanging .hanging-controls,.app[data-step=hanging] .overlay-hanging input,.app[data-step=hanging] .overlay-hanging label,.app[data-step=hanging] .overlay-hanging select,.app[data-step=picture] .overlay-picture .dim-input,.app[data-step=wall] .overlay-wall .dim-input{pointer-events:auto}.dim-input{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px 14px;box-shadow:0 10px 20px rgba(24,16,52,.08);width:180px;pointer-events:auto}.overlay-picture .dim-input{position:absolute;width:130px}.dim-label{position:absolute;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.7);padding:6px 10px;border-radius:999px;border:1px solid rgba(214,201,241,.7)}.dim-wall-width{bottom:5px;left:50%;transform:translateX(-50%)}.dim-wall-height{left:20px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center}.dim-frame-height,.dim-frame-width,.dim-hanger-offset{display:none}.frame-labels{position:absolute;pointer-events:none}.dim-frame-height{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);transform-origin:center}.dim-frame-height,.dim-frame-width,.dim-hanger-offset{color:#4f2e99;background:0 0;border:none;padding:0}.app[data-step=hanging] .frame-labels .dim-frame-height,.app[data-step=hanging] .frame-labels .dim-frame-width,.app[data-step=hanging] .frame-labels .dim-hanger-offset,.app[data-step=nail] .frame-labels .dim-frame-height,.app[data-step=nail] .frame-labels .dim-frame-width,.app[data-step=nail] .frame-labels .dim-hanger-offset{display:block}.app[data-step=hanging] .frame-labels,.app[data-step=nail] .frame-labels{display:block}.dim-input label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.dim-input input,.inline-group select,.inline-input input{width:100%;border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:15px;font-weight:600;color:var(--ink);background:#fff}.dim-input input.is-error,.inline-input input.is-error{border-color:#d64545;box-shadow:0 0 0 3px rgba(214,69,69,.2)}.dim-input input:focus,.inline-group select:focus,.inline-input input:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 3px rgba(108,56,214,.15)}.dim-height{position:absolute;left:32px;top:50%;transform:translateY(-50%)}.dim-width{position:absolute;left:50%;bottom:36px;transform:translateX(-50%)}.dim-offset{position:absolute;right:36px;top:32px}.hanging-controls{position:absolute;right:24px;bottom:24px;width:200px;background:rgba(255,255,255,.95);border-radius:18px;border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 24px rgba(24,16,52,.12);pointer-events:auto}.hanging-center-control{position:absolute;width:146px;max-width:100%;background:rgba(255,255,255,.95);border-radius:18px;border:1px solid var(--line);padding:12px 14px;box-shadow:0 12px 24px rgba(24,16,52,.12);pointer-events:auto}.toggle{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px}.toggle input{width:18px;height:18px}.inline-input label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}.inch-hint{margin-top:5px;font-size:9px;color:#8a8a97;text-align:right;min-height:11px}.input-error{margin-top:4px;min-height:13px;font-size:11px;line-height:1.2;color:#c13333}.inline-group{display:grid;grid-template-columns:1fr 80px;gap:8px;align-items:center}.overlay-readout{inset:0;pointer-events:none}.readout{position:absolute;left:24px;bottom:24px;background-color:#f9fbff;background-image:radial-gradient(rgba(31,53,85,.045) .7px,transparent .9px),linear-gradient(to right,rgba(83,120,174,.2) 1px,transparent 1px),linear-gradient(to bottom,rgba(83,120,174,.2) 1px,transparent 1px);background-size:4px 4px,16px 16px,16px 16px;background-position:0 0,0 0,0 0;border:1px solid rgba(129,146,177,.6);border-radius:0;padding:16px 18px 22px;min-width:220px;overflow:visible;z-index:1;pointer-events:auto;user-select:text;box-shadow:0 10px 22px rgba(28,37,57,.22),0 2px 0 rgba(255,255,255,.9) inset}.readout::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.42) 0,rgba(255,255,255,0) 26%)}.readout-title{font-family:Caveat,"Segoe Print",cursive;text-transform:none;font-size:24px;letter-spacing:.02em;color:#325b8f;line-height:1;margin-bottom:25px;text-decoration:underline;transform:rotate(-3deg);text-shadow:0 1px 0 rgba(255,255,255,.5)}.readout-values{font-weight:100;color:#1f3555;display:grid;gap:6px;line-height:1.35}.readout-values strong{font-weight:800}.cta{align-self:end;justify-self:end;border:none;background:var(--purple);color:#fff;padding:14px 28px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 12px 24px rgba(108,56,214,.3);cursor:pointer;transition:transform .2s ease,background .2s ease}.cta-back{justify-self:start;background:#fff;color:var(--purple-dark);border:1px solid var(--line);box-shadow:0 8px 16px rgba(29,22,48,.12)}.cta-back:hover:not(:disabled){background:#f7f4ff;transform:translateY(-2px)}.cta:disabled{opacity:.5;cursor:default;box-shadow:none}.cta:hover:not(:disabled){background:var(--purple-dark);transform:translateY(-2px)}@media (max-width:900px){.app{padding:16px;--mobile-action-offset:0px;--mobile-action-bottom-gap:36px;--mobile-action-browser-gap:16px}.topbar{grid-template-columns:1fr;justify-items:start;gap:12px}.app.mobile-step-flow .content{grid-template-rows:auto auto;align-items:start;gap:8px;padding-bottom:calc(112px + var(--mobile-action-bottom-gap) + var(--mobile-action-browser-gap) + var(--mobile-action-offset));min-height:0}.app.mobile-step-flow .actions{position:fixed;left:16px;right:16px;bottom:calc(max(env(safe-area-inset-bottom),var(--mobile-action-browser-gap)) + var(--mobile-action-bottom-gap) + var(--mobile-action-offset));z-index:20;align-items:end;background:linear-gradient(to top,rgba(246,241,255,.95),rgba(246,241,255,0));padding-top:16px;margin:0}.app.mobile-step-flow .wall{height:auto;min-height:0;width:100%;background:0 0;border:none;box-shadow:none}.app.mobile-step-flow[data-step=nail] .wall{background:linear-gradient(135deg,#fff 0,#f4edff 100%);border:1px solid var(--line);box-shadow:0 20px 40px rgba(59,30,120,.12)}.app.mobile-step-flow .overlay{position:static;inset:auto;display:none;opacity:1;transform:none;visibility:hidden}.app.mobile-step-flow[data-step=hanging] .overlay-hanging,.app.mobile-step-flow[data-step=picture] .overlay-picture,.app.mobile-step-flow[data-step=wall] .overlay-wall{display:block;visibility:visible;position:static;margin:0 auto;width:100%}.app.mobile-step-flow:not([data-step=nail]) .overlay-readout,.app.mobile-step-flow[data-step=hanging] .overlay-dimensions,.app.mobile-step-flow[data-step=picture] .overlay-dimensions{display:none}.app.mobile-step-flow[data-step=picture] .overlay-picture,.app.mobile-step-flow[data-step=wall] .overlay-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px;pointer-events:none}.app.mobile-step-flow .overlay-hanging .hanging-center-control,.app.mobile-step-flow .overlay-hanging .hanging-controls,.app.mobile-step-flow .overlay-picture .dim-input,.app.mobile-step-flow .overlay-wall .dim-input{max-width:none}.app.mobile-step-flow[data-step=hanging] .overlay-hanging .hanging-center-control,.app.mobile-step-flow[data-step=hanging] .overlay-hanging .hanging-controls,.app.mobile-step-flow[data-step=hanging] .overlay-hanging .inline-group,.app.mobile-step-flow[data-step=hanging] .overlay-hanging .inline-input,.app.mobile-step-flow[data-step=hanging] .overlay-hanging .toggle,.app.mobile-step-flow[data-step=picture] .overlay-picture .dim-input,.app.mobile-step-flow[data-step=wall] .overlay-wall .dim-input{position:static;inset:auto;width:100%;max-width:100%;margin:0;left:auto;right:auto;top:auto;bottom:auto;transform:none}.app.mobile-step-flow[data-step=hanging] .overlay-hanging .hanging-center-control,.app.mobile-step-flow[data-step=picture] .overlay-picture .dim-height,.app.mobile-step-flow[data-step=picture] .overlay-picture .dim-offset,.app.mobile-step-flow[data-step=picture] .overlay-picture .dim-width,.app.mobile-step-flow[data-step=wall] .overlay-wall .dim-height,.app.mobile-step-flow[data-step=wall] .overlay-wall .dim-offset,.app.mobile-step-flow[data-step=wall] .overlay-wall .dim-width{position:relative;width:100%}.app.mobile-step-flow[data-step=picture] .overlay-picture .dim-height,.app.mobile-step-flow[data-step=wall] .overlay-wall .dim-height{grid-column:1}.app.mobile-step-flow[data-step=picture] .overlay-picture .dim-width,.app.mobile-step-flow[data-step=wall] .overlay-wall .dim-width{grid-column:2}.app.mobile-step-flow[data-step=picture] .overlay-picture .dim-offset{grid-column:1/-1}.hanging-controls{position:static;width:100%;gap:10px;box-shadow:none;border:none;background:0 0;padding:0;margin-top:8px}.hanging-center-control{width:100%;max-width:100%}.app.mobile-step-flow[data-step=nail] .overlay-readout{position:absolute;inset:auto;margin-top:0;padding:0;display:block;visibility:visible}}@media (max-width:680px){.segment{width:100%;justify-content:space-between}.dim-input{width:100%}.hanging-controls{width:100%}.actions{gap:10px}}