*{box-sizing:border-box}body{margin:0;background:#f8f4ef;color:#243630;font:15px/1.6 Arial,sans-serif}main{width:calc(100% - 8.4vw);max-width:1480px;margin:auto;padding:36px 0 64px}.eyebrow{font:700 11px/1.5 Arial,sans-serif;letter-spacing:.16em;color:#a5583e}.how-intro h1{font:400 clamp(40px,3.4vw,60px)/1.05 Georgia,serif;margin:10px 0 14px}.how-intro>p:last-child{color:#65685e;margin-bottom:28px}.how-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.how-steps button{text-align:left;padding:16px;border:1px solid #ded5c9;background:#fffcf7;border-radius:12px;color:inherit;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}.how-steps button:hover{transform:translateY(-2px);border-color:#647e69}.how-steps span{font:22px Georgia,serif;color:#a5583e;display:block;margin-bottom:10px}.how-steps strong,.how-steps small{display:block}.how-steps strong{font-size:14px}.how-steps small{color:#707369;font-size:12px;margin-top:4px}.how-steps [aria-pressed=true]{background:#eaf0e8;border-color:#426651;box-shadow:inset 0 -3px #426651}.how-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:30px 36px;margin-top:18px;border:1px solid #e2d8cb;border-radius:18px;background:#fffcf7;min-height:335px}.how-copy h2{font:400 clamp(26px,2.5vw,38px)/1.15 Georgia,serif;margin:12px 0 16px}.how-copy>p:not(.eyebrow){max-width:600px;color:#5b655b}.how-tip{font-size:13px;border-left:3px solid #c79669;padding-left:14px}.how-actions{display:flex;gap:10px;margin-top:24px}.how-actions button,.how-start{font:600 13px/1.4 Arial,sans-serif;min-height:44px;padding:12px 16px;border:1px solid #cfc7b9;border-radius:9px;background:transparent;color:#284d3d;cursor:pointer}.how-actions button:disabled{opacity:.4;cursor:default}#step-next,.how-start{background:#365743;color:#fff;border-color:#365743}.how-start{text-decoration:none;white-space:nowrap}.how-example{text-align:center;padding:20px;border-radius:14px;background:linear-gradient(135deg,#ece2d2,#f5eee3);display:grid;justify-items:center;gap:12px}.how-example-label{font-size:10px;font-weight:700;letter-spacing:.15em;color:#755d44}.how-art{width:155px;height:172px;background:#fffaf0;padding:8px;box-shadow:0 10px 25px #453b2929;transition:transform .35s,border .35s}.how-art img{width:100%;height:100%;object-fit:cover}.how-example p{font:17px/1.4 Georgia,serif;margin:0}.how-example[data-scene=idea] .how-art{transform:rotate(-5deg);opacity:.6}.how-example[data-scene=review] .how-art{transform:rotate(3deg)}.how-example[data-scene=product] .how-art{border:8px solid #78543b;padding:3px}.how-example[data-scene=delivery] .how-art{transform:scale(.9);border:10px solid #b69468;padding:4px}.how-example-caption{display:block;text-align:center;font-size:11px;color:#7a756b;margin-top:8px}.how-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:25px 0}.how-pixi{display:flex;align-items:center;gap:16px;max-width:780px}.how-pixi>img{object-fit:contain;flex:none}.how-pixi .piksi-bubble{margin:0;font:18px/1.5 Georgia,serif}.how-notes{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;padding-top:18px;border-top:1px solid #ddd5c8;color:#6c6e63;font-size:13px}.how-notes p{margin:0}.how-notes strong{display:block;color:#354d3d;margin-bottom:4px}.how-notes>a{grid-column:1/-1;color:#365743}.how-detail.is-changing .how-copy,.how-detail.is-changing .how-example{animation:how-enter .35s ease both}@keyframes how-enter{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}:focus-visible{outline:3px solid #ae6544;outline-offset:3px}@media(max-width:760px){.how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.how-steps button{padding:12px}.how-steps button:last-child{grid-column:1/-1}.how-steps span{float:left;margin:0 10px 0 0}.how-detail{grid-template-columns:1fr;gap:20px;padding:22px;min-height:0}.how-visual{order:-1}.how-art{width:100px;height:112px}.how-example{padding:14px}.how-bottom{flex-direction:column;align-items:stretch}.how-start{text-align:center}.how-notes{grid-template-columns:1fr}.how-notes>a{grid-column:1}.how-pixi>img{width:65px;height:90px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.how-steps button:hover{transform:none}}
