/* Compact local walkthrough. The phone UI remains live HTML at its native size. */
.howto-phone{
  --hp-ink:#223348;--hp-copy:#647184;--hp-red:#983844;--hp-line:#dce1e7;
  position:relative;isolation:isolate;background:#f7f8fa;color:var(--hp-ink);
  padding:30px 0 24px;border-block:1px solid #dce1e7;overflow:hidden;scroll-margin-top:82px;
}
.howto-phone *{box-sizing:border-box}
.howto-phone [hidden]{display:none!important}
.howto-phone button,.howto-phone a{font-family:inherit;-webkit-tap-highlight-color:transparent}
.howto-phone button{cursor:pointer}
.howto-phone button:focus-visible,.howto-phone a:focus-visible{outline:3px solid var(--hp-red);outline-offset:4px}
.howto-phone .hp-icon{width:24px;height:24px;flex-shrink:0}
.hp-anchor{position:absolute;top:0;scroll-margin-top:82px}
.hp-container{width:min(1120px,calc(100% - 72px));margin:auto}
.hp-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:35px;align-items:center;text-align:left;margin:0 auto 18px}
.hp-eyebrow{color:#7c5260;font-size:11px;font-weight:750;letter-spacing:.11em;line-height:1.3;margin:0 0 5px}
.hp-heading .hp-eyebrow{grid-column:1;grid-row:1}
.hp-heading h2{grid-column:1;grid-row:2;font-family:Fraunces,Georgia,serif;font-size:42px;font-weight:450;letter-spacing:-.05em;line-height:1;margin:0;color:var(--hp-ink)}
.hp-heading h2 em,.hp-personalization-heading h3 em{font-weight:450;color:var(--hp-red)}
.hp-heading>p:last-child{grid-column:2;grid-row:1/span 2;justify-self:end;align-self:center;max-width:420px;text-align:right;font-size:14px;line-height:1.5;color:var(--hp-copy);margin:0}
.hp-mobile-break{display:none}
.hp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:0;padding:0;list-style:none}
.hp-steps li{min-width:0}
.hp-steps button{display:flex;align-items:center;text-align:left;width:100%;height:100%;min-height:70px;gap:13px;padding:12px 17px;color:var(--hp-copy);border:1px solid #dce1e7;border-radius:12px;background:#ffffffb3;transition:background .2s,box-shadow .2s,border-color .2s}
.hp-step-number{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;font-family:Fraunces,Georgia,serif;font-size:18px;color:#68778a;border:1px solid #dce1e7;background:#f0f3f6}
.hp-steps strong{display:block;font-size:15px;font-weight:750;line-height:1.35;color:var(--hp-ink)}
.hp-steps small{display:block;font-size:11px;line-height:1.4;margin-top:3px;color:var(--hp-copy)}
.hp-steps small b{font-weight:750;color:var(--hp-red)}
.hp-steps button>.hp-icon{width:17px;height:17px;margin-left:auto;color:#8792a1}
.hp-steps button:hover{background:#fff;border-color:#b7a0a8}
.hp-steps button.is-active{background:#fff;border-color:#a24b58;box-shadow:0 4px 12px #283c5506,inset 0 -2px #983844}
.hp-steps button.is-active .hp-step-number{background:var(--hp-red);border-color:var(--hp-red);color:#fff7f2}
.hp-steps button.is-active>.hp-icon{color:var(--hp-red)}
.hp-stage{display:grid;grid-template-columns:minmax(210px,1fr) 270px minmax(210px,1fr);column-gap:72px;position:relative;margin:18px auto 0;align-items:start}
.hp-stage:before{content:"";position:absolute;z-index:-1;left:50%;top:115px;transform:translateX(-50%);width:470px;height:370px;border-radius:50%;background:radial-gradient(ellipse,#d9e0e768,transparent 72%);pointer-events:none}
.hp-phone-column{position:relative;z-index:2;min-width:0}
.hp-device{position:relative;width:270px;padding:7px;border-radius:38px;background:linear-gradient(105deg,#a77c52 0%,#f8ebcf 1%,#b28b63 2%,#ebd9b7 3%,#94704b 4%,#e8d4af 95%,#fff5d9 97%,#a07c57 99%,#f5e6c7);box-shadow:0 20px 28px -15px #2b3c475c,0 8px 13px -7px #4437284d,inset 0 0 0 1px #fff3d2,0 0 0 1px #9c785562;transform:rotate(-.8deg)}
.hp-device:before{content:"";position:absolute;inset:3px;border-radius:35px;border:1px solid #fff8dfb0;pointer-events:none}
.hp-device:after{content:"";position:absolute;inset:7px;border-radius:31px;pointer-events:none;box-shadow:inset 1px 1px 1px #fff9e5aa,inset -1px -1px 1px #5d432d40}
.hp-device-button{position:absolute;width:3px;background:linear-gradient(90deg,#a17c54,#ead6b2,#96704b);border-radius:3px;box-shadow:inset 0 1px #fff7db}
.hp-device-button-left{height:42px;left:-2px;top:107px}
.hp-device-button-right{height:55px;right:-2px;top:126px}
.hp-device-screen{position:relative;border:3px solid #392d28;border-radius:32px;overflow:hidden;background:#fffaf0;height:478px;box-shadow:0 0 0 1px #2e251f,inset 0 0 0 1px #fff7e8;transform:translateZ(0)}
.hp-status-bar{height:29px;position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 15px;font-size:10px;font-weight:750;color:#fff6e7;background:linear-gradient(#4b292843,transparent)}
.hp-status-bar>span:first-child{padding-top:1px}
.hp-status-bar>svg{width:42px;height:12px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-width:1.7}
.hp-status-bar .hp-battery-fill{fill:currentColor;stroke:none}
.hp-island{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:67px;height:18px;background:#282421;border-radius:20px;box-shadow:inset 0 1px 1px #ffffff17}
.hp-island:after{content:"";position:absolute;width:5px;height:5px;border:1px solid #3c4142;background:radial-gradient(circle at 65% 30%,#465662,#10161c 50%);border-radius:50%;right:9px;top:6px}
.hp-home-indicator{position:absolute;bottom:6px;width:76px;height:3px;border-radius:4px;left:50%;transform:translateX(-50%);background:#4b302f;opacity:.6;z-index:5}
.hp-screen-panel{height:100%;background:#fffaf1;animation:hp-panel-in .25s ease both}
.hp-art-header{height:128px;position:relative;overflow:hidden;background:#7f4137}
.hp-art-header:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#51252b13 10%,#51252b00 32%,#3e1c29ad 100%)}
.hp-art-header>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 43%}
.hp-art-header>div{position:absolute;z-index:1;left:15px;bottom:12px;color:#fff6e4;text-shadow:0 2px 8px #331b2b33}
.hp-art-header>div>span{display:block;font-size:10px;font-weight:750;letter-spacing:.025em;line-height:1.3;margin:0 0 5px;color:#fce4bd}
.hp-art-header>div>strong{font-family:Fraunces,Georgia,serif;font-size:21px;font-weight:450;line-height:1.07;letter-spacing:-.035em}
.hp-creator-content{padding:10px 12px 17px}
.hp-child{display:flex;gap:8px;align-items:center;padding:0 0 8px;border-bottom:1px solid #c8a78545}
.hp-child-avatar{width:28px;height:28px;display:grid;place-items:center;flex-shrink:0;border:1px solid #dab28d;border-radius:50%;color:#913b43;background:linear-gradient(145deg,#f4dfbd,#fff5df);font:500 18px Fraunces,Georgia,serif}
.hp-child>span:nth-child(2)>strong{font-size:13px;color:#5a3431;line-height:1.3}
.hp-child strong i{font-style:normal;margin:0 3px;color:#bc916a}
.hp-child small{display:none}
.hp-child-check{margin-left:auto;display:grid;place-items:center;width:19px;height:19px;border:1px solid #c9ad8890;border-radius:50%;color:#9b5b43;background:#f9edda}
.hp-child-check .hp-icon{width:12px;height:12px}
.hp-fields-heading{margin:9px 0 8px}
.hp-fields-heading h3{font-family:Fraunces,Georgia,serif;font-size:18px;font-weight:500;line-height:1.1;letter-spacing:-.035em;max-width:210px;margin:0;color:#552f2e}
.hp-fields-heading>span{display:none}
.hp-fields{display:grid;gap:6px}
.hp-field{position:relative;display:block;width:100%;min-height:51px;padding:7px 23px 7px 9px;text-align:left;border:1px solid #ceb39488;background:#fffdf8;border-radius:7px;color:#5a3431;transition:border-color .2s,box-shadow .2s,background .2s}
.hp-field:hover{background:#fff7e8;border-color:#ac765d}
.hp-field.is-active{border-color:#a24a50;box-shadow:0 0 0 2px #a24a5010;background:#fff9ed}
.hp-field-label{display:flex;gap:5px;align-items:center;font-size:11px;font-weight:550;color:#846452;line-height:1.3;margin-bottom:3px}
.hp-field-label .hp-icon{width:12px;height:12px;color:#a06c50}
.hp-field>strong{font-size:12px;font-weight:650;display:block;line-height:1.35;min-height:17px;letter-spacing:-.01em}
.hp-field>strong:empty:before{content:"Twój wpis pojawi się tutaj";font-size:11px;font-weight:400;color:#a28b78}
.hp-field-edit{position:absolute;top:50%;right:7px;transform:translateY(-50%);color:#bb9b7d}
.hp-field-edit .hp-icon{width:12px;height:12px}
.hp-field.is-active .hp-field-edit{color:#a13e48}
.howto-phone[data-howto-running="true"] .hp-field.is-active>strong:after{content:"";display:inline-block;vertical-align:-2px;width:1px;height:12px;background:#9c3643;margin-left:2px;animation:hp-caret .85s step-end infinite}
.hp-next-note{display:flex;gap:7px;align-items:center;margin:8px 0 0;padding:8px 0 0;color:#8b654c;border-top:1px solid #c8a78545}
.hp-next-note>span:first-child{display:flex;gap:2px}
.hp-next-note>span .hp-icon{width:15px;height:15px}
.hp-next-copy{font-size:10px;line-height:1.3;margin:0;color:#8f7160}
.hp-next-copy strong{font-size:11px;color:#69463a;font-weight:650}
.hp-next-note>.hp-icon{width:15px;margin-left:auto;color:#9f6a4c}
.hp-aside{position:relative;z-index:3;min-width:0;padding-top:16px}
.hp-aside p{font-size:13px;line-height:1.65;color:var(--hp-copy);margin:13px 0 0}
.hp-aside h3{font-family:Fraunces,Georgia,serif;font-size:27px;line-height:1.15;font-weight:450;letter-spacing:-.035em;margin:9px 0 0;color:var(--hp-ink)}
.hp-aside h3 em{font-weight:450;color:var(--hp-red)}
.hp-aside .hp-side-eyebrow{font-size:10px;letter-spacing:.1em;font-weight:750;color:#7d5664;line-height:1.4;margin:0}
.hp-aside .hp-side-footnote{font-size:11px;line-height:1.65;padding-top:13px;border-top:1px solid #dce1e7;margin-top:16px}
.hp-side-seal{display:flex;align-items:center;gap:10px;margin-top:18px;color:#98545f}
.hp-side-seal>.hp-icon{width:27px;height:27px}
.hp-side-seal>span{font-size:11px;line-height:1.6;color:var(--hp-copy)}
.hp-side-seal strong{color:#34455b;font-weight:650}
.hp-time-note{display:flex;gap:10px;align-items:center;color:#9a5360;margin:0}
.hp-time-note>.hp-icon{width:25px;height:25px}
.hp-time-note>span{font-size:11px;line-height:1.35;color:var(--hp-copy)}
.hp-time-note strong{display:block;font-family:Fraunces,Georgia,serif;font-size:32px;font-weight:450;letter-spacing:-.04em;line-height:1.1;color:var(--hp-red);margin-top:3px}
.hp-time-note small{font-size:11px;line-height:1.45;display:block;margin-top:5px;color:#738092}
.hp-story-note{position:relative;width:100%;display:block;background:none;border:0;padding:0;text-align:left;color:var(--hp-ink);transition:opacity .2s}
.hp-note-kicker{display:flex;gap:7px;align-items:center;font-size:11px;line-height:1.4;color:#7a6570}
.hp-note-kicker>.hp-icon{width:20px;height:20px;color:#a06671}
.hp-story-note>strong{font-family:Fraunces,Georgia,serif;font-size:23px;line-height:1.17;font-weight:450;letter-spacing:-.035em;display:block;margin-top:7px;max-width:280px;color:var(--hp-ink)}
.hp-note-description{font-size:12px;line-height:1.65;color:var(--hp-copy);display:block;margin-top:8px;max-width:280px}
.hp-note-hint{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11px;font-weight:650;color:#8b6671;line-height:1.4}
.hp-note-hint>.hp-icon{width:14px;height:14px}
.hp-story-note.is-active>strong,.hp-story-note.is-active .hp-note-kicker,.hp-story-note.is-active .hp-note-hint{color:var(--hp-red)}
.hp-story-note:hover>strong{color:var(--hp-red)}
.hp-aside-left [data-howto-side-panel="1"]>.hp-story-note{margin-top:83px}
.hp-aside-right [data-howto-side-panel="1"]{padding-top:99px}
.hp-aside-right .hp-story-note+.hp-story-note{margin-top:28px}
/* Compact notes use matching icons and focus colors instead of long crossing arrows. */
.hp-annotation-line{display:none}
.hp-mobile-hobby-note{display:none!important}
.hp-demo-controls{text-align:center;margin:10px -30px 0;min-height:36px}
.hp-play-demo{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--hp-red);border:1px solid var(--hp-red);color:#fff7f2;border-radius:999px;padding:9px 17px;font-size:12px;font-weight:650;line-height:1.3;min-height:36px;box-shadow:0 4px 10px #81354b14;transition:background .2s,transform .2s}
.hp-play-demo:hover{background:#ad4550;transform:translateY(-1px)}
.hp-play-symbol{display:grid;place-items:center;width:15px;height:15px}
.hp-play-symbol>.hp-icon{width:15px;height:15px;fill:currentColor;stroke-width:0}
.howto-phone[data-howto-running="true"] .hp-play-symbol:before,.howto-phone[data-howto-running="true"] .hp-play-symbol:after{content:"";width:3px;height:11px;background:currentColor;display:block;grid-area:1/1}
.howto-phone[data-howto-running="true"] .hp-play-symbol:before{transform:translateX(-3px)}
.howto-phone[data-howto-running="true"] .hp-play-symbol:after{transform:translateX(3px)}
.howto-phone[data-howto-running="true"] .hp-play-symbol>.hp-icon{visibility:hidden}
.hp-demo-controls p{display:none;margin:6px 0 0;font-size:11px;line-height:1.4;color:#738092}
.hp-demo-caption{text-align:center;font-size:10px;line-height:1.3;color:#7c8797;margin:5px -30px 0}
.hp-purchase-panel .hp-art-header{height:90px}
.hp-purchase-panel .hp-art-header>div>span{display:none}
.hp-purchase-panel .hp-art-header>div>strong{font-size:19px}
.hp-purchase-content{padding:12px 12px 16px}
.hp-screen-kicker{display:block;color:#986346;font-size:10px;font-weight:750;letter-spacing:.05em;line-height:1.4}
.hp-purchase-content>.hp-screen-kicker,.hp-purchase-content>h3{display:none}
.hp-small-cover{margin:0;overflow:hidden;border-radius:7px;box-shadow:0 4px 10px #64392320}
.hp-small-cover>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hp-purchase-summary{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:7px 0}
.hp-purchase-summary>span{font-size:12px;font-weight:650;line-height:1.3;color:#5a3431}
.hp-purchase-summary small{display:block;font-size:10.5px;font-weight:400;line-height:1.35;color:#906f5b;margin-top:2px}
.hp-purchase-summary>.hp-icon{width:20px;height:20px;color:#a26a4b}
.hp-purchase-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:7px;background:#9b3b45;color:#fff4e4;text-decoration:none;font-size:11px;font-weight:650;line-height:1.4}
.hp-purchase-link>.hp-icon{width:16px;height:16px}
.hp-purchase-link:hover{background:#ac4850}
.hp-screen-note{font-size:11px;line-height:1.3;color:#8e6e59;text-align:center;margin:8px 0 0}
.hp-result-top{padding:42px 16px 13px;background:#efd8b9}
.hp-result-top h3{font-family:Fraunces,Georgia,serif;font-size:25px;font-weight:450;line-height:1.08;letter-spacing:-.04em;margin:7px 0 0;color:#512d2c}
.hp-result-top h3 em{color:#973a43;font-weight:450}
.hp-result-cover{margin:0;position:relative;box-shadow:0 6px 15px #5f37231a;z-index:1}
.hp-result-cover>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hp-result-content{padding:14px 12px 18px;text-align:center}
.hp-result-check{display:none}
.hp-result-content h3{font-family:Fraunces,Georgia,serif;font-size:21px;font-weight:450;line-height:1.12;letter-spacing:-.035em;margin:0;color:#512d2c}
.hp-result-content>p{display:none}
.hp-result-formats{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:13px 0 10px;border-block:1px solid #c8a78550;padding:10px 0}
.hp-result-formats>span{font-size:11px;font-weight:650;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;color:#754c3a;line-height:1.3}
.hp-result-formats>span+span{border-left:1px solid #c8a78550}
.hp-result-formats .hp-icon{width:16px;height:16px}
.hp-result-formats small{width:100%;font-size:10px;color:#9b7a63;font-weight:400;line-height:1.35}
.hp-result-keepsake{font-size:10px;color:#956d51;line-height:1.4}
.howto-phone[data-howto-step="2"] .hp-status-bar{color:#694737;background:none}
/* The full personalization list is retained; the builder can replace this block. */
.hp-personalization{margin-top:35px;padding-top:35px;border-top:1px solid #dce1e7}
.hp-personalization-heading{text-align:center}
.hp-personalization-heading .hp-eyebrow{font-size:11px;margin-bottom:10px}
.hp-personalization-heading h3{font-family:Fraunces,Georgia,serif;font-size:35px;font-weight:450;letter-spacing:-.045em;line-height:1.17;margin:0 0 13px;color:var(--hp-ink)}
.hp-personalization-heading>p:last-child{font-size:14px;line-height:1.7;color:var(--hp-copy);margin:0}
.hp-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:28px 0 0;padding:0;gap:0}
.hp-detail-grid li{position:relative;min-width:0;padding:24px;border-top:1px solid #dce1e7}
.hp-detail-grid li:not(:nth-child(4n+1)){border-left:1px solid #dce1e7}
.hp-detail-grid li:nth-child(-n+4){border-top:0}
.hp-detail-icon{display:block;color:#a06671;margin:0 0 13px}
.hp-detail-icon .hp-icon{width:27px;height:27px;stroke-width:1.35}
.hp-detail-grid h4{font-size:14px;line-height:1.5;font-weight:750;margin:0 0 7px;color:var(--hp-ink)}
.hp-detail-grid p{font-size:12px;line-height:1.75;color:var(--hp-copy);margin:0}
.hp-sr-only{position:absolute!important;clip:rect(0,0,0,0)!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;border:0!important;white-space:nowrap!important}
@keyframes hp-caret{0%,100%{opacity:1}50%{opacity:0}}
@keyframes hp-panel-in{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.hp-container{width:min(1200px,calc(100% - 100px))}.hp-stage{column-gap:88px}}
@media(max-width:1100px) and (min-width:761px){
  .hp-container{width:calc(100% - 48px)}.hp-stage{grid-template-columns:minmax(170px,1fr) 270px minmax(170px,1fr);column-gap:36px}
  .hp-steps button{padding:11px 12px;gap:9px}.hp-steps strong{font-size:13px}.hp-steps small{font-size:10px}.hp-steps button>.hp-icon{display:none}
  .hp-story-note>strong{font-size:21px}.hp-note-description{font-size:11.5px}.hp-note-kicker{font-size:10px}
  .hp-aside-right [data-howto-side-panel="1"]{padding-top:83px}.hp-aside-right .hp-story-note+.hp-story-note{margin-top:21px}
  .hp-aside h3{font-size:25px}.hp-aside p{font-size:12px}.hp-time-note strong{font-size:29px}.hp-time-note small{font-size:10px}
}
@media(max-width:760px) and (min-width:651px){
  .hp-container{width:calc(100% - 40px)}.hp-stage{grid-template-columns:1fr 270px;column-gap:35px;row-gap:23px}
  .hp-heading>p:last-child{font-size:12px}.hp-heading h2{font-size:40px}.hp-heading .hp-eyebrow{font-size:9px}
  .hp-phone-column{grid-column:2;grid-row:1/span 2}.hp-aside-left{grid-column:1;grid-row:1}.hp-aside-right{grid-column:1;grid-row:2;padding-top:0}
  .hp-aside-left [data-howto-side-panel="1"]>.hp-story-note{margin-top:26px}.hp-aside-right [data-howto-side-panel="1"]{padding-top:0}.hp-aside-right .hp-story-note+.hp-story-note{margin-top:19px}
  .hp-story-note>strong{font-size:20px}.hp-note-description{font-size:11px}.hp-note-kicker,.hp-note-hint{font-size:10px}.hp-note-hint{margin-top:7px}
  .hp-time-note strong{font-size:28px}.hp-time-note small{font-size:10px}.hp-time-note>.hp-icon{width:20px}
  .hp-steps{gap:8px}.hp-steps button{padding:10px;gap:8px}.hp-step-number{width:27px;height:27px;font-size:16px}.hp-steps strong{font-size:12px}.hp-steps small{font-size:10px}.hp-steps button>.hp-icon{display:none}
  .hp-aside h3{font-size:24px}.hp-aside p{font-size:12px}
}
@media(max-width:980px){
  .hp-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-detail-grid li:nth-child(n){border-left:0;border-top:1px solid #dce1e7;padding:22px}.hp-detail-grid li:nth-child(even){border-left:1px solid #dce1e7}.hp-detail-grid li:nth-child(-n+2){border-top:0}
}
@media(max-width:650px){
  .howto-phone{padding:28px 0;scroll-margin-top:74px}.hp-anchor{scroll-margin-top:74px}.hp-container{width:calc(100% - 36px)}
  .hp-heading{display:block;text-align:center;margin-bottom:18px}.hp-heading .hp-eyebrow{font-size:9px;letter-spacing:.07em;line-height:1.4;margin:0 auto 8px;max-width:300px}.hp-heading h2{font-size:38px;line-height:1.05;margin:0 0 10px}.hp-heading>p:last-child{max-width:none;text-align:center;font-size:13px;line-height:1.5}.hp-mobile-break{display:block}
  .hp-steps{gap:7px}.hp-steps button{display:block;min-height:88px;padding:10px 9px;border-radius:10px}.hp-step-number{width:26px;height:26px;font-size:15px;margin-bottom:8px}.hp-steps strong{font-size:12px;line-height:1.35;letter-spacing:-.015em}.hp-steps small,.hp-steps button>.hp-icon{display:none}
  .hp-stage{display:flex;flex-direction:column;margin-top:18px;gap:0;align-items:stretch}.hp-stage:before{width:380px;height:410px;top:100px}
  .hp-aside-left{order:1;padding:0;margin-bottom:16px}.hp-aside-left [data-howto-side-panel="1"]{display:contents}.hp-aside-left [data-howto-side-panel="1"]>.hp-story-note{display:none}
  .hp-time-note{justify-content:center;gap:11px}.hp-time-note>.hp-icon{width:27px;height:27px}.hp-time-note>span{font-size:11px}.hp-time-note strong{font-size:27px;margin-top:1px}.hp-time-note small{display:none}
  .hp-phone-column{order:2;align-self:center;width:min(300px,100%)}.hp-device{width:100%;padding:7px;border-radius:39px;transform:rotate(-.6deg)}.hp-device:before{border-radius:36px}.hp-device:after{border-radius:32px}.hp-device-screen{height:526px;border-radius:33px}
  .hp-status-bar{height:31px;padding-inline:17px;font-size:11px}.hp-status-bar>svg{width:45px;height:13px}.hp-island{width:74px;height:19px;top:6px}.hp-island:after{top:6px;right:10px}
  .hp-art-header{height:140px}.hp-art-header>div{left:17px;bottom:13px}.hp-art-header>div>span{font-size:10px}.hp-art-header>div>strong{font-size:23px}
  .hp-creator-content{padding:12px 13px 18px}.hp-child{gap:8px;padding-bottom:9px}.hp-child-avatar{width:30px;height:30px;font-size:19px}.hp-child>span:nth-child(2)>strong{font-size:14px}.hp-child-check{width:21px;height:21px}
  .hp-fields-heading{margin:10px 0 9px}.hp-fields-heading h3{font-size:20px;max-width:230px;line-height:1.1}.hp-fields{gap:6px}.hp-field{min-height:54px;padding:8px 24px 8px 10px}.hp-field-label{font-size:12px;line-height:1.3}.hp-field-label .hp-icon{width:13px;height:13px}.hp-field>strong{font-size:13px;min-height:18px;line-height:1.35}.hp-field-edit .hp-icon{width:13px;height:13px}.hp-field>strong:empty:before{font-size:11px}
  .hp-next-note{margin-top:10px;padding-top:9px;gap:8px}.hp-next-note>span .hp-icon{width:17px;height:17px}.hp-next-copy{font-size:11px}.hp-next-copy strong{font-size:12px}.hp-next-note>.hp-icon{width:17px}
  .hp-demo-controls{margin:11px -12px 0;min-height:36px}.hp-play-demo{font-size:12px;min-height:36px;padding:9px 17px}.hp-demo-caption{font-size:10px;margin-top:6px}
  .hp-aside-right{order:3;padding:0;margin-top:18px}.hp-aside-right [data-howto-side-panel="1"]{padding:0}
  .hp-aside-right .hp-story-note{display:none!important;padding:16px 17px;border:1px solid #dce1e7;border-radius:12px;background:#fff;box-shadow:0 3px 12px #22334804;margin:0!important}
  .hp-aside-right .hp-story-note.is-active{display:block!important;border-color:#d5b6c0}
  .hp-story-note>strong{font-size:22px;max-width:none;margin-top:7px}.hp-note-kicker{font-size:11px}.hp-note-kicker>.hp-icon{width:19px;height:19px}.hp-note-description{max-width:none;font-size:12px;line-height:1.65;margin-top:8px}.hp-note-hint{display:none}
  .hp-aside h3{font-size:25px;line-height:1.15}.hp-aside p{font-size:12px;line-height:1.65;margin-top:10px}.hp-aside .hp-side-eyebrow{font-size:10px}.hp-aside .hp-side-footnote{font-size:11px;margin-top:13px;padding-top:12px}.hp-side-seal{margin-top:13px}.hp-side-seal>span{font-size:11px}
  .hp-purchase-panel .hp-art-header{height:108px}.hp-purchase-panel .hp-art-header>div>strong{font-size:22px}.hp-purchase-content{padding:12px 13px 16px}.hp-purchase-summary{margin:8px 0}.hp-purchase-summary>span{font-size:12px}.hp-purchase-summary small{font-size:11px}.hp-purchase-link{font-size:12px;padding:10px 11px}.hp-screen-note{font-size:11px;line-height:1.35;margin-top:8px}
  .hp-result-top{padding:45px 18px 15px}.hp-result-top h3{font-size:28px}.hp-screen-kicker{font-size:10px}.hp-result-content{padding:16px 13px 9px}.hp-result-content h3{font-size:23px}.hp-result-formats{margin-top:15px;padding-block:11px}.hp-result-formats>span{font-size:12px}.hp-result-formats small{font-size:11px}.hp-result-keepsake{font-size:11px}
  .hp-personalization{margin-top:28px;padding-top:28px}.hp-personalization-heading h3{font-size:30px}.hp-personalization-heading .hp-eyebrow{font-size:9px}.hp-personalization-heading>p:last-child{font-size:12px;line-height:1.7}.hp-detail-grid{grid-template-columns:1fr;margin-top:20px}.hp-detail-grid li:nth-child(n){display:grid;grid-template-columns:28px 1fr;column-gap:14px;border-left:0;border-top:1px solid #dce1e7;padding:20px 1px}.hp-detail-grid li:first-child{border-top:0}.hp-detail-icon{grid-column:1;grid-row:1/span 2;margin:2px 0 0}.hp-detail-icon .hp-icon{width:25px;height:25px}.hp-detail-grid h4{grid-column:2;font-size:13px;margin-bottom:5px}.hp-detail-grid p{grid-column:2;font-size:12px;line-height:1.7}
}
@media(max-width:360px){.hp-container{width:calc(100% - 28px)}.hp-steps{gap:5px}.hp-steps button{padding-inline:8px}.hp-steps strong{font-size:11px}.hp-heading h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.howto-phone *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hp-play-demo{display:none!important}.hp-demo-controls{min-height:0;margin-top:8px}.hp-demo-controls p{display:block;font-size:10px}}

/* Two views inside the same phone: details, then the child's photo and a parent message. */
.hp-creator-panel .hp-art-header{height:106px}
.hp-creator-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px 11px 0;height:31px;background:#f5e8d5;border-bottom:1px solid #d8bea044}
.hp-creator-tabs button{border:0;border-radius:5px 5px 0 0;background:transparent;color:#9a7861;font-size:9px;font-weight:650;padding:4px 3px 5px;line-height:1.3}
.hp-creator-tabs button:hover{color:#903c46;background:#fff9ee70}
.hp-creator-tabs button.is-active{color:#873944;background:#fffaf1;box-shadow:inset 0 2px #a15357}
.hp-creator-views{height:calc(100% - 137px);position:relative}
.hp-creator-view{height:100%;animation:hp-creator-in .32s ease both}
.hp-next-note{width:100%;background:none;border:0;border-top:1px solid #c8a78545;text-align:left;border-radius:0}
.hp-next-note:hover .hp-next-copy strong{color:#963a45}
.hp-next-copy{display:block}
.hp-aside-left .hp-media-story{margin-top:77px}
.hp-media-story h3{font-size:26px}
.hp-media-content{padding:10px 12px 12px;color:#5a3431}
.hp-media-intro .hp-screen-kicker{font-size:8px;letter-spacing:.06em;color:#9b775c;line-height:1.3}
.hp-media-intro h3{font:450 19px/1.08 Fraunces,Georgia,serif;letter-spacing:-.035em;margin:4px 0 0;color:#593332}
.hp-photo-example,.hp-voice-example{display:block;width:100%;text-align:left;color:#633e34;border:1px solid #d8bda16b;border-radius:9px;background:linear-gradient(115deg,#fffef9,#fff6e8);box-shadow:0 3px 10px #68442b05}
.hp-photo-example:hover,.hp-voice-example:hover{border-color:#b6816b}
.hp-photo-example{display:flex;align-items:center;gap:10px;padding:8px;margin-top:9px;min-height:90px}
.hp-photo-frame{position:relative;display:block;flex-shrink:0;width:61px;height:72px;overflow:hidden;border:3px solid #fffdf5;border-radius:6px;background:#d7bb90;box-shadow:0 2px 7px #4b30272b;transform:rotate(-3deg);transition:opacity .3s,transform .3s}
.hp-photo-frame>img{position:absolute;left:50%;top:50%;width:430%;max-width:none;height:auto;transform:translate(-61%,-52%)}
.hp-photo-check{position:absolute;bottom:3px;right:3px;border:1.5px solid #fff8ee;border-radius:50%;width:15px;height:15px;display:grid;place-items:center;color:#fff;background:#667e58;transition:opacity .2s}
.hp-photo-check .hp-icon{width:10px;height:10px;stroke-width:2}
.howto-phone[data-howto-photo-ready="false"] .hp-photo-frame{opacity:.5;transform:rotate(0) scale(.94)}
.howto-phone[data-howto-photo-ready="false"] .hp-photo-check{opacity:0}
.hp-photo-copy{display:block;flex:1;min-width:0}
.hp-media-label{display:flex;gap:5px;align-items:center;font-size:9px;font-weight:550;line-height:1.3;color:#92715a}
.hp-media-label .hp-icon{width:12px;height:12px;color:#a36d54}
.hp-photo-copy>strong{display:block;font-size:11px;font-weight:650;line-height:1.35;margin-top:5px;color:#6f4439}
.hp-photo-copy>small{display:block;font-size:8px;font-weight:400;line-height:1.35;color:#aa8b71;margin-top:5px}
.hp-upload-track{display:block;height:3px;overflow:hidden;margin-top:7px;background:#eadcc7;border-radius:4px}
.hp-upload-track>i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#bb8e64,#8a9a6c);border-radius:4px;transition:width .12s linear}
.hp-voice-example{padding:9px 10px;margin-top:8px}
.hp-voice-wave{position:relative;display:flex;align-items:center;justify-content:space-between;gap:3px;height:36px;margin:6px 0 7px;overflow:hidden;border-radius:3px}
.hp-voice-wave:before{content:"";position:absolute;left:0;inset-block:0;width:var(--hp-voice-progress,100%);background:linear-gradient(90deg,#d8b79508,#a96b5020);transition:width .3s linear}
.hp-voice-wave>i{position:relative;z-index:1;display:block;height:calc(var(--hp-bar) * .78);width:3px;max-height:32px;background:linear-gradient(#b98066,#a04d50);border-radius:4px;flex-shrink:0;transform-origin:center}
.howto-phone[data-howto-media-phase="voice"] .hp-voice-wave>i{animation:hp-voice-wave .68s ease-in-out infinite alternate;animation-delay:var(--hp-delay);animation-play-state:paused}
.howto-phone[data-howto-media-phase="voice"][data-howto-running="true"] .hp-voice-wave>i{animation-play-state:running}
.hp-voice-bottom{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:8px;line-height:1.3;color:#a3846c}
.hp-voice-bottom>strong{font-weight:550;color:#87604d}
.hp-voice-time{font-variant-numeric:tabular-nums;white-space:nowrap}
.hp-voice-time>span:first-child{font-weight:650;color:#93444a}
.hp-media-disclaimer{text-align:center;font-size:8px;line-height:1.4;color:#ad8f76;margin:6px 0 7px}
.hp-media-next{display:flex;align-items:center;justify-content:center;gap:8px;min-height:28px;width:100%;border:1px solid #a55c58;border-radius:6px;background:#963d46;color:#fff5e5;font-size:10px;font-weight:650;padding:6px 8px;line-height:1.3}
.hp-media-next>.hp-icon{width:13px;height:13px}
.hp-media-next:hover{background:#aa4c55}
.hp-result-replay{display:flex;gap:5px;align-items:center;justify-content:center;margin:9px auto 0;border:0;background:none;color:#97565b;font-size:9px;font-weight:550;line-height:1.3;padding:4px}
.hp-result-replay .hp-icon{width:11px;height:11px}
.hp-result-replay:hover{color:#78303b}
@keyframes hp-creator-in{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes hp-voice-wave{from{transform:scaleY(.48)}to{transform:scaleY(1)}}
@media(max-width:650px){
  .hp-creator-panel .hp-art-header{height:130px}.hp-creator-tabs{height:33px;padding-inline:13px}.hp-creator-tabs button{font-size:10px}.hp-creator-views{height:calc(100% - 163px)}
  .hp-media-content{padding:12px 13px 14px}.hp-media-intro .hp-screen-kicker{font-size:9px}.hp-media-intro h3{font-size:21px;line-height:1.08}.hp-photo-example{margin-top:11px;min-height:94px;padding:9px;gap:12px}.hp-photo-frame{width:63px;height:74px}
  .hp-media-label{font-size:10px}.hp-media-label .hp-icon{width:13px;height:13px}.hp-photo-copy>strong{font-size:12px}.hp-photo-copy>small{font-size:8px}.hp-photo-copy>strong{margin-top:5px}
  .hp-voice-example{padding:10px 11px;margin-top:9px}.hp-voice-wave{height:38px}.hp-voice-wave>i{width:4px}.hp-voice-bottom{font-size:9px}.hp-media-disclaimer{font-size:8px;margin-block:7px}.hp-media-next{min-height:30px;font-size:11px}
  .hp-aside-left .hp-media-story{display:none}.hp-aside-right .hp-media-story{padding:17px;border:1px solid #d5b6c0;border-radius:12px;background:#fff}.hp-media-story h3{font-size:24px}.hp-result-replay{font-size:10px}
}