/* 08E.06 visual rebuild, faithful to the supplied bright Mission Complete reference.
 * iPad landscape canvas: 1366×1024 points, scaled by the existing workbench.
 * Image = clean celebratory city; ribbon, stars, podium, rewards and path = CSS/DOM.
 * The user's photographed drawing always replaces the illustrative sample bus.
 */
#story-milestone-v2.sm-reference{
 font-family:Inter,"SF Pro Display",system-ui,sans-serif;
 position:absolute;overflow:hidden;isolation:isolate;color:#342063;background:#2583cb;
 --sm-purple:#6114bd;--sm-ink:#35196a;--sm-gold:#ffca1e
}
#story-milestone-v2.sm-reference *{box-sizing:border-box}
#story-milestone-v2.sm-reference [hidden]{display:none!important}
#story-milestone-v2.sm-reference button{font:inherit;cursor:pointer}
#story-milestone-v2.sm-reference button:focus-visible{outline:4px solid #79f9e8;outline-offset:3px;z-index:31}
#story-milestone-v2 .sm-background{
 position:absolute;inset:0;display:block;width:100%;height:100%;
 object-fit:cover;object-position:center;filter:saturate(1.15) contrast(1.04);
 pointer-events:none
}
#story-milestone-v2 .sm-light-rays{
 position:absolute;z-index:1;top:20px;left:50%;transform:translateX(-50%);
 width:850px;height:730px;pointer-events:none;
 background:repeating-conic-gradient(from 2deg at 50% 43%,rgba(255,236,146,.16) 0 9deg,transparent 9deg 29deg);
 -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 2%,transparent 68%);
 mask-image:radial-gradient(ellipse at 50% 42%,#000 2%,transparent 68%)
}
#story-milestone-v2 .sm-confetti{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#story-milestone-v2 .sm-confetti i{
 position:absolute;display:block;width:13px;height:27px;
 background:#f95b96;transform:rotate(-30deg);border-radius:3px;
 box-shadow:0 2px 5px #0002
}
#story-milestone-v2 .sm-confetti i:nth-child(1){top:11%;left:17%;transform:rotate(42deg);background:#ffd42b}
#story-milestone-v2 .sm-confetti i:nth-child(2){top:16%;left:28%;transform:rotate(-26deg);background:#fd48ad}
#story-milestone-v2 .sm-confetti i:nth-child(3){top:7%;left:66%;transform:rotate(35deg);background:#ffda28}
#story-milestone-v2 .sm-confetti i:nth-child(4){top:18%;left:77%;transform:rotate(-22deg);background:#58edf5}
#story-milestone-v2 .sm-confetti i:nth-child(5){top:31%;left:85%;transform:rotate(55deg);background:#ffa716}
#story-milestone-v2 .sm-confetti i:nth-child(6){top:40%;left:13%;transform:rotate(45deg);background:#ffce29}
#story-milestone-v2 .sm-confetti i:nth-child(7){top:29%;left:58%;transform:rotate(16deg);background:#f94baf}
#story-milestone-v2 .sm-confetti i:nth-child(8){top:47%;left:73%;transform:rotate(-29deg);background:#ffec58}
#story-milestone-v2 .sm-brandbar{position:absolute;z-index:9;left:0;right:0;top:0;height:94px;pointer-events:none}
#story-milestone-v2 .sm-logo{
 position:absolute;left:33px;top:28px;width:220px;height:59px;
 object-fit:contain;object-position:left center;
 filter:drop-shadow(0 3px 4px #181b666c);pointer-events:auto
}
#story-milestone-v2 .sm-back{
 position:absolute;right:22px;top:22px;width:54px;height:54px;
 border-radius:50%;border:2px solid #ffffffc9;
 background:#3b268bcf;color:#fff;font-size:46px;line-height:.7;padding-bottom:10px;
 box-shadow:0 5px 14px #18245980;pointer-events:auto
}
#story-milestone-v2 .sm-canvas{position:absolute;inset:0;z-index:3}
#story-milestone-v2 .sm-hero-stars{
 position:absolute;top:11px;left:50%;width:380px;transform:translateX(-50%);
 display:flex;align-items:center;justify-content:space-between;
 color:#ffdc24;font-size:73px;font-weight:950;line-height:1;z-index:7;
 text-shadow:-4px -3px 0 #fffdf4,4px -3px 0 #fffdf4,-4px 4px 0 #fffdf4,4px 4px 0 #fffdf4,0 0 25px #fff3ab,0 9px 4px #bc5b04
}
#story-milestone-v2 .sm-hero-stars span:first-child{font-size:62px;transform:rotate(-12deg) translateY(22px)}
#story-milestone-v2 .sm-hero-stars span:nth-child(2){font-size:93px;transform:translateY(-4px)}
#story-milestone-v2 .sm-hero-stars span:last-child{font-size:62px;transform:rotate(12deg) translateY(22px)}
#story-milestone-v2 .sm-ribbon-wrap{
 position:absolute;top:142px;left:50%;width:565px;height:188px;
 transform:translateX(-50%);z-index:8
}
#story-milestone-v2 .sm-ribbon-tail{
 position:absolute;top:73px;width:123px;height:111px;
 background:linear-gradient(125deg,#6611c3,#9b1be4 55%,#4c0d8b);
 border:3px solid #df79ff;box-shadow:0 8px 10px #26115f80;
 clip-path:polygon(0 0,100% 0,94% 100%,47% 83%,0 100%)
}
#story-milestone-v2 .sm-ribbon-left{left:-49px;transform:rotate(-11deg)}
#story-milestone-v2 .sm-ribbon-right{right:-49px;transform:rotate(11deg) scaleX(-1)}
#story-milestone-v2 .sm-ribbon{
 position:absolute;left:30px;right:30px;top:0;height:167px;
 border:4px solid #ef91ff;border-radius:38px 38px 47px 47px;
 background:linear-gradient(155deg,#ac32ef 0%,#7a19c9 40%,#5410b0 78%,#8717ca);
 box-shadow:inset 0 4px 12px #ffcff868,inset 0 -8px 10px #31046baa,0 0 15px #ffe6fd,0 13px 17px #210e62b0;
 display:grid;place-items:center;transform:rotate(-2deg)
}
#story-milestone-v2 .sm-ribbon h1{
 display:flex;flex-direction:column;align-items:center;margin:0;
 letter-spacing:-.055em;font-weight:1000;line-height:.95;
 filter:drop-shadow(0 4px 0 #34086770)
}
#story-milestone-v2 .sm-ribbon h1 span{
 color:#fffafc;font-size:56px;font-weight:950;
 text-shadow:0 3px 0 #400874,0 0 8px #e8b4ef
}
#story-milestone-v2 .sm-ribbon h1 strong{
 color:#fff027;font-size:66px;font-weight:1000;
 -webkit-text-stroke:1px #ffe66c;
 text-shadow:0 4px 0 #71360c,0 0 13px #ffca528e
}
#story-milestone-v2 .sm-mission-kicker{
 position:absolute;left:50%;top:169px;transform:translateX(-50%);
 font-size:11px;font-weight:900;letter-spacing:.1em;white-space:nowrap;
 padding:6px 13px;background:#fff7d9;border:1px solid #efbaff;
 color:#5a2d8d;border-radius:99px;box-shadow:0 3px 12px #38236d6e;
}
#story-milestone-v2 .sm-owii-area{position:absolute;z-index:7;left:13px;top:207px;width:395px;height:580px;pointer-events:none}
#story-milestone-v2 .sm-speech{
 position:absolute;left:82px;top:0;width:291px;min-height:191px;
 background:linear-gradient(155deg,#fff,#f4ecff);
 border:3px solid #9d4ee2;border-radius:49% 47% 47% 49%/39% 42% 40% 44%;
 padding:25px 34px 23px;text-align:center;display:flex;flex-direction:column;
 justify-content:center;gap:10px;color:#3e1977;
 box-shadow:0 7px 21px #24285b60;transform:rotate(-3deg)
}
#story-milestone-v2 .sm-speech::after{
 content:"";position:absolute;left:60px;bottom:-30px;
 border-left:36px solid transparent;border-right:9px solid transparent;
 border-top:44px solid #f5efff;transform:rotate(13deg);
 filter:drop-shadow(-2px 2px 0 #9d4ee2)
}
#story-milestone-v2 .sm-speech strong{font-size:27px;font-weight:960;line-height:1}
#story-milestone-v2 .sm-speech p{font-size:22px;font-weight:860;line-height:1.18;margin:0}
#story-milestone-v2 .sm-owii-official{
 position:absolute;left:0;top:260px;width:308px;height:277px;object-fit:contain;
 filter:drop-shadow(0 8px 8px #28216e87);
}
#story-milestone-v2 .sm-creation-stage{
 position:absolute;z-index:6;left:50%;top:369px;width:548px;height:318px;
 transform:translateX(-50%)
}
#story-milestone-v2 .sm-sparkles{position:absolute;inset:0;color:#fff6a9;pointer-events:none;font-size:40px;text-shadow:0 0 12px #ffd634,0 0 23px #fff4b8}
#story-milestone-v2 .sm-sparkles span{position:absolute}
#story-milestone-v2 .sm-sparkles span:first-child{left:60px;top:86px}
#story-milestone-v2 .sm-sparkles span:nth-child(2){right:46px;top:44px;font-size:47px}
#story-milestone-v2 .sm-sparkles span:last-child{left:44%;top:12px;font-size:24px}
#story-milestone-v2 .sm-creation-art{
 position:absolute;z-index:8;top:21px;left:50%;transform:translateX(-50%);
 display:grid;place-items:center;width:464px;height:224px;
 background:transparent;border:0;box-shadow:none
}
#story-milestone-v2 .sm-bus-example{width:440px;height:234px;object-fit:contain;filter:drop-shadow(0 4px 1px #ffffffde) drop-shadow(0 8px 5px #5b381c8a)}
#story-milestone-v2 #sm-creation-image{
 width:430px;height:222px;object-fit:contain;
 border:5px solid #fff9e2;border-radius:17px;
 background:#fff;box-shadow:0 8px 18px #18114f87;
 transform:rotate(-2deg)
}
#story-milestone-v2 .sm-creation-badge{
 position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);
 white-space:nowrap;padding:6px 13px;background:#fff8c7;
 border:1.5px solid #f8d079;border-radius:14px;
 color:#573a70;font-size:10px;letter-spacing:.075em;font-weight:950;
 box-shadow:0 3px 7px #2f246c59
}
#story-milestone-v2 .sm-podium{
 position:absolute;z-index:5;bottom:0;left:50%;transform:translateX(-50%);
 width:531px;height:112px;pointer-events:none
}
#story-milestone-v2 .sm-podium-rim{
 position:absolute;left:0;right:0;top:5px;height:72px;border-radius:50%;
 border:8px solid #fff2ab;
 background:radial-gradient(ellipse at 50% 45%,#fff6af 0%,#ffd94b 48%,#c17e19 90%);
 box-shadow:0 0 33px #fff38df0,0 0 51px #ffcf4bd5,inset 0 5px 13px #fffbdc;
}
#story-milestone-v2 .sm-podium-base{
 position:absolute;bottom:7px;left:10px;right:10px;height:63px;
 background:linear-gradient(180deg,#ffe579 0%,#b98d27 62%,#eaa52c 100%);
 border-radius:17% 17% 49% 49%/25% 25% 70% 70%;
 border-bottom:7px solid #f3a735;
 box-shadow:0 12px 22px #4b2c2669,inset 0 4px 8px #fff3c2b0
}
#story-milestone-v2 .sm-reward-strip{
 position:absolute;z-index:9;top:646px;left:50%;transform:translateX(-50%);
 width:560px;height:153px;padding:9px 12px;
 display:grid;grid-template-columns:1fr 2px 1fr 2px 1fr;gap:1px;align-items:center;
 background:linear-gradient(180deg,#ffffff,#fff8ff 85%);
 border:3px solid #fffef3;border-radius:28px;
 box-shadow:0 0 14px #fffaf0b8,0 9px 28px #5c266f8c
}
#story-milestone-v2 .sm-reward-separator{height:93px;width:2px;background:#cbb6d5}
#story-milestone-v2 .sm-reward-item{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:6px;text-align:center;color:#3c176f;min-width:0
}
#story-milestone-v2 .sm-reward-art{display:grid;place-items:center;flex:none;line-height:1;color:#ffc82d}
#story-milestone-v2 .sm-reward-3stars{
 color:#ffce22;font-size:33px;letter-spacing:-.14em;
 text-shadow:1px 2px 0 #da810c,0 0 7px #ffd64f
}
#story-milestone-v2 .sm-reward-building{
 width:58px;height:58px;border-radius:17px;font-size:46px;color:#ffd14d;
 background:linear-gradient(140deg,#973ef2,#6a1bc1);
 border:3px solid #f6d0ff;text-shadow:0 3px 1px #642578
}
#story-milestone-v2 .sm-reward-medal{
 width:62px;height:62px;border-radius:50%;
 background:linear-gradient(125deg,#ffed8c,#f7ab21);
 border:4px solid #e9a417;color:#ffc239;
 font-size:45px;text-shadow:0 2px 1px #985c1a,0 -1px 0 #fffacf;
 box-shadow:inset 0 1px 5px #fff3ae,0 4px 9px #b36f29a6
}
#story-milestone-v2 .sm-reward-item strong{font-size:18px;font-weight:950;line-height:1.08}
#story-milestone-v2 .sm-reward-item small{font-size:14px;font-weight:880;line-height:1.12}
#story-milestone-v2 .sm-actions{
 position:absolute;top:818px;left:50%;transform:translateX(-50%);
 width:798px;height:88px;display:flex;gap:32px;z-index:11
}
#story-milestone-v2 .sm-city-button,#story-milestone-v2 .sm-primary-button{
 flex:1;min-width:0;height:87px;border-radius:47px;
 display:flex;align-items:center;justify-content:center;gap:14px;
 font-size:25px;font-weight:930;letter-spacing:-.025em;
 box-shadow:0 9px 17px #35216a8c,inset 0 -3px 0 #00000018
}
#story-milestone-v2 .sm-city-button{
 background:linear-gradient(180deg,#ffffff,#eeecff);
 border:3px solid #fff;color:#3f2377
}
#story-milestone-v2 .sm-city-icon{font-size:36px;line-height:1}
#story-milestone-v2 .sm-primary-button{
 background:linear-gradient(180deg,#fff729,#ffdc1a 54%,#ffbb1d);
 border:3px solid #fff7bc;color:#3b2071;box-shadow:0 9px 18px #ad631f99,0 0 14px #ffe477a0
}
#story-milestone-v2 .sm-primary-button>span{font-size:31px;margin-left:13px}
#story-milestone-v2 .sm-city-button:hover,#story-milestone-v2 .sm-primary-button:hover{filter:brightness(1.06);transform:translateY(-2px)}
#story-milestone-v2 .sm-story-path{
 position:absolute;top:925px;left:50%;transform:translateX(-50%);
 width:650px;height:79px;display:flex;justify-content:space-between;align-items:center;z-index:10
}
#story-milestone-v2 .sm-path-track{
 position:absolute;top:38px;left:19px;right:19px;height:8px;background:#fff;border:1px solid #e5d1ed;border-radius:30px;
 box-shadow:0 3px 9px #3b19558c
}
#story-milestone-v2 .sm-path-node{
 width:61px;height:61px;border-radius:50%;position:relative;z-index:1;
 display:grid;place-items:center;border:5px solid #fff;
 box-shadow:0 5px 12px #28216e80,inset 0 0 6px #ffffff9f;
 color:#fff;font-size:37px;line-height:1;font-weight:950
}
#story-milestone-v2 .sm-path-node.is-done{background:linear-gradient(#83e847,#37ad36);border-color:#fafff6;text-shadow:0 2px 0 #246d37}
#story-milestone-v2 .sm-path-node.is-current{width:73px;height:73px;color:#ffe120;font-size:50px;background:linear-gradient(#fff3c7,#ffbf43);border-color:#fff2c0;text-shadow:0 2px 0 #c87d19,0 0 13px #ffef80;box-shadow:0 0 24px #fff2a2,0 8px 11px #652d2177}
#story-milestone-v2 .sm-path-node.is-locked{background:linear-gradient(#aab8d2,#667a9d);border-color:#ebeff8;color:#e7efff;font-size:33px}
#story-milestone-v2 .sm-review-controls{
 position:absolute;right:15px;bottom:22px;z-index:12;
 display:flex;flex-direction:column;align-items:flex-end;gap:5px;
 max-width:253px
}
#story-milestone-v2 .sm-review-controls button{
 min-height:31px;padding:6px 11px;border:1px solid #e7ddff;
 background:#231766d9;color:#fff;border-radius:12px;
 font-size:10px;font-weight:850
}
#story-milestone-v2 #sm-review-state{
 max-width:253px;font-size:10px;line-height:1.25;
 color:#fff;text-align:right;background:#24136fae;border-radius:8px;padding:5px 7px
}
#story-milestone-v2 .sm-preview-watermark{
 position:absolute;z-index:12;top:84px;right:20px;
 border:1px solid #fff9b1;background:#302379d1;
 border-radius:13px;padding:6px 9px;
 color:#fff2b3;font-size:10px;font-weight:900;letter-spacing:.035em
}
#story-milestone-v2 .sm-hidden-status,#story-milestone-v2 .sm-accessible-subtitle{
 position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
 clip-path:inset(50%)!important;white-space:nowrap!important
}
#story-milestone-v2.sm-reference[data-mode="waiting"] .sm-hero-stars,
#story-milestone-v2.sm-reference[data-mode="waiting"] .sm-reward-strip{display:none}
#story-milestone-v2.sm-reference[data-mode="waiting"] .sm-ribbon h1 span{font-size:51px}
#story-milestone-v2.sm-reference[data-mode="waiting"] .sm-ribbon h1 strong{font-size:58px;color:#fff7bd}
#story-milestone-v2.sm-reference[data-mode="waiting"] .sm-bus-example{opacity:.22;filter:grayscale(1)}
#story-milestone-v2.sm-reference[data-mode="waiting"] .sm-creation-art{filter:saturate(.6)}
#story-milestone-v2.sm-reference[data-mode="waiting"] .sm-path-node.is-done{background:linear-gradient(#a9b4c8,#72819e)}
#story-milestone-v2.sm-reference[data-mode="waiting"] .sm-path-node.is-current{background:#aaa8be}
#story-milestone-v2.sm-reference[data-mode="waiting"] .sm-primary-button{background:linear-gradient(#fff7c6,#ffd16a)}
#story-milestone-v2.sm-reference[data-mode="waiting"] .sm-speech{background:#f7f8ff}
@media(prefers-reduced-motion:reduce){#story-milestone-v2 *{animation:none!important;transition:none!important}}

/* Existing scenery already contains a large nonofficial celebratory character.
   Do not layer a second full-size Owii over its face. Keep the *real official*
   Owii asset as a small separate brand guide beside its speech bubble.
   Production art pass should remove the painted character at source. */
#story-milestone-v2 .sm-owii-official{
 left:316px;top:163px;width:67px;height:67px;
 padding:5px;object-fit:contain;border-radius:50%;
 background:#fff5fbeb;border:2px solid #a858e9;
 box-shadow:0 4px 11px #28205994;
 filter:none;z-index:2
}