body{margin:0;background:#f5f5f5}
a{color:#2E7D32}a:hover{color:#1B5E20}
.ph{width:276px;height:560px;box-sizing:border-box;padding:8px;border-radius:40px;background:#111;box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
.ph-in{width:100%;height:100%;border-radius:32px;overflow:hidden;background:#f5f5f5;color:#1f2937;position:relative;display:flex;flex-direction:column;font-family:-apple-system,'Segoe UI',system-ui,sans-serif;font-size:12px;line-height:1.35}
.ph-card{background:#fff;border-radius:12px;padding:10px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.ph-tab{position:absolute;left:0;right:0;bottom:0;height:50px;background:#43a047;display:flex;align-items:center;justify-content:space-around;color:rgba(255,255,255,.5);font-size:9px;font-weight:500;border-top:1px solid rgba(255,255,255,.1)}
.ph-tab span{display:flex;flex-direction:column;align-items:center;gap:2px}
.ph-tab .on{color:#fff}
.ph-fab{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-top:-26px;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.ph-lbl{font-size:9px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}
.ds-float{animation:dsFloat 6s ease-in-out infinite}
@keyframes dsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.ds-pop{opacity:0;animation:dsPop .7s cubic-bezier(.2,.8,.2,1) forwards}
.ds-d1{animation-delay:.5s}.ds-d2{animation-delay:.9s}.ds-d3{animation-delay:1.3s}.ds-d4{animation-delay:1.7s}
@keyframes dsPop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ds-rise{opacity:0;animation:dsPop .9s cubic-bezier(.2,.8,.2,1) .1s forwards}
.ds-pulse{animation:dsPulse 1.8s ease-out infinite}
@keyframes dsPulse{0%{box-shadow:0 0 0 0 rgba(67,160,71,.6)}100%{box-shadow:0 0 0 12px rgba(67,160,71,0)}}
.ds-ring{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:2px solid #43a047;animation:dsRing 3s ease-out infinite}
.ds-ring2{animation-delay:1s}.ds-ring3{animation-delay:2s}
@keyframes dsRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.6);opacity:0}}
.ds-blink{animation:dsBlink 2s ease-in-out infinite}
.ds-b2{animation-delay:.7s}.ds-b3{animation-delay:1.3s}
@keyframes dsBlink{0%,100%{opacity:.2}50%{opacity:.85}}
.ds-wheel{transition:transform .75s cubic-bezier(.65,0,.35,1)}
.ds-wcard{transition:opacity .6s ease,filter .6s ease}
.ds-dot{animation:dsRun 2.4s linear infinite}
.ds-dot2{animation-delay:1.2s}
@keyframes dsRun{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.ds-role .ds-reveal{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease}
.ds-role:hover .ds-reveal,.ds-role:focus-within .ds-reveal{max-height:260px;opacity:1}
.ds-role{transition:transform .35s ease,box-shadow .35s ease}
.ds-role:hover{transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(31,41,55,.35)}
.ds-bar{animation:dsGrow 1.4s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
@keyframes dsGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
input[type=range].ds-range{width:100%;accent-color:#2E7D32;height:28px}
.ds-num{min-height:48px;padding:0 14px;border-radius:10px;border:1.5px solid #d1d5db;background:#fff;font:inherit;font-size:16px;width:100%;box-sizing:border-box}
.ph2{width:316px;height:660px;box-sizing:border-box;padding:8px;border-radius:48px;background:#0b0f0d;box-shadow:0 50px 90px -35px rgba(15,40,20,.6),inset 0 0 0 2px #2c332f}
.sim{width:300px;height:644px;border-radius:40px;overflow:hidden;background:#f5f5f5;color:#1f2937;position:relative;font-family:-apple-system,'Segoe UI',system-ui,sans-serif;font-size:13px;line-height:1.35;text-align:left}
.s-scr{position:absolute;inset:0;display:flex;flex-direction:column;animation:sIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes sIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.s-top{padding:20px 14px 10px;background:#fff;border-bottom:1px solid #e8f5e8;display:flex;flex-direction:column;gap:10px;flex:none}
.s-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow:hidden}
.s-foot{padding:10px 14px 18px;background:#fff;border-top:1px solid #e8f5e8;flex:none}
.s-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;border:none;border-radius:12px;background:#2E7D32;color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:transform .15s,background .2s}
.s-btn:hover{background:#256b29}.s-btn:active{transform:scale(.97)}
.s-btn.out{background:#fff;border:1.5px solid #2E7D32;color:#2E7D32}
.s-btn.red{background:#fff;border:1.5px solid #dc2626;color:#b91c1c}
.s-opt{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:10px;border:1.5px solid #e5e7eb;border-radius:12px;background:#fff;font:inherit;color:#1f2937;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.s-opt:active{transform:scale(.98)}
.s-opt.on{border-color:#43a047;background:rgba(67,160,71,.08)}
.s-rd{width:16px;height:16px;border-radius:50%;border:2px solid #9ca3af;box-sizing:border-box;flex:none;transition:border .2s}
.s-opt.on .s-rd{border:5px solid #2E7D32}
.s-ck{width:18px;height:18px;border-radius:5px;border:2px solid #9ca3af;box-sizing:border-box;flex:none;display:grid;place-items:center;color:transparent;font-size:11px;font-weight:800;transition:all .2s}
.s-opt.on .s-ck{background:#2E7D32;border-color:#2E7D32;color:#fff}
.s-chip{min-height:34px;padding:0 6px;flex:1 1 0;min-width:0;border-radius:999px;border:1.5px solid #d1d5db;background:#fff;font:inherit;font-size:13px;font-weight:700;color:#1f2937;cursor:pointer;transition:all .2s}
.s-chip.on{background:#2E7D32;border-color:#2E7D32;color:#fff}
.s-card{background:#fff;border-radius:12px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.s-lbl{font-size:10px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}
.s-row{display:flex;justify-content:space-between;gap:8px}
.s-dim{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.s-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;padding:20px 16px 20px;display:flex;flex-direction:column;gap:12px;animation:sheetUp .45s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.s-spin{width:34px;height:34px;border-radius:50%;border:3px solid #d1ead1;border-top-color:#2E7D32;animation:spin .8s linear infinite;box-sizing:border-box}
@keyframes spin{to{transform:rotate(360deg)}}
.s-fab{width:54px;height:54px;border-radius:50%;background:#fff;border:none;display:grid;place-items:center;margin-top:-30px;box-shadow:0 6px 16px rgba(0,0,0,.3);cursor:pointer;color:#2E7D32;font-size:32px;line-height:1;font-family:inherit;transition:transform .15s}
.s-fab:active{transform:scale(.92)}
.s-tab{height:58px;background:#43a047;display:flex;align-items:center;justify-content:space-around;color:rgba(255,255,255,.6);font-size:10px;font-weight:500;flex:none}
.s-tab>span{display:flex;flex-direction:column;align-items:center;gap:2px}
.s-tab .on{color:#fff}
.cur{position:absolute;z-index:60;width:0;height:0;pointer-events:none;transition:left .75s cubic-bezier(.45,0,.2,1),top .75s cubic-bezier(.45,0,.2,1),opacity .35s}
.cur i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;background:rgba(17,24,39,.3);border:2.5px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.35);box-sizing:border-box}
.cur b{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:2.5px solid #43a047;opacity:0;box-sizing:border-box}
.cur.tap i{animation:tapI .38s ease}
.cur.tap b{animation:tapR .55s ease-out}
@keyframes tapI{50%{transform:scale(.7);background:rgba(17,24,39,.5)}}
@keyframes tapR{from{opacity:.95;transform:scale(.6)}to{opacity:0;transform:scale(2.4)}}
.cur.hint i{background:transparent;border:3px solid #2E7D32;box-shadow:none;animation:hint 1.4s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scale(.8);opacity:.95}50%{transform:scale(1.3);opacity:.3}}
.tst{animation:tstIn .55s cubic-bezier(.2,.8,.2,1)}
@keyframes tstIn{from{opacity:0;transform:translateX(-18px) scale(.95)}to{opacity:1;transform:none}}
.cf{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;animation:cf 2.6s cubic-bezier(.3,.6,.6,1) forwards}
@keyframes cf{to{transform:translateY(700px) rotate(620deg)}}
.pop{animation:popI .65s cubic-bezier(.2,1.5,.4,1)}
@keyframes popI{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.flash{position:absolute;inset:0;background:#fff;animation:fl .5s ease forwards;pointer-events:none;z-index:40}
@keyframes fl{from{opacity:.95}to{opacity:0}}
.caret{display:inline-block;width:2px;height:22px;background:#1d4ed8;margin-left:3px;vertical-align:-3px;animation:dsBlink 1s steps(2) infinite}
.ds-btn{transition:transform .2s ease,box-shadow .2s ease,background .2s}
.ds-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(27,94,32,.6)}
.ds-rev{opacity:0;transform:translateY(48px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.ds-rev.in{opacity:1;transform:none}
.ds-stag>*{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1),transform .35s ease,box-shadow .35s ease}
.ds-rev.in .ds-stag>*{opacity:1;translate:0 0}
.ds-rev.in .ds-stag>*:nth-child(2){transition-delay:.12s,.12s,0s,0s}
.ds-rev.in .ds-stag>*:nth-child(3){transition-delay:.24s,.24s,0s,0s}
.ds-rev.in .ds-stag>*:nth-child(4){transition-delay:.36s,.36s,0s,0s}
.ds-rev.in .ds-stag>*:nth-child(5){transition-delay:.48s,.48s,0s,0s}
.ds-rev.in .ds-stag>*:nth-child(6){transition-delay:.6s,.6s,0s,0s}
@media (max-width:960px){.ds-callout{display:none}}
@media (max-width:760px){header nav{gap:10px!important;padding:10px 16px!important}header nav>div:nth-child(2){order:3;width:100%;flex-wrap:nowrap!important;overflow-x:auto;gap:18px!important;font-size:14px!important;padding-bottom:2px}header nav>div:nth-child(3) a:first-child{display:none}.ds-logo{height:30px!important}.ds-by{display:none!important}}
@media (max-width:400px){.ds-simwrap{transform:scale(.9);transform-origin:top center;margin-bottom:-66px}}
@media (prefers-reduced-motion:reduce){.ds-rev,.ds-stag>*{opacity:1;transform:none;translate:none;transition:none}.s-scr,.tst,.pop,.s-sheet,.s-dim{animation:none}.cf{display:none}.cur{transition:none}}
@media (max-width:760px){.ds-wheel-stage{transform:scale(.72);transform-origin:center top}.ds-spec{display:none}}
@media (prefers-reduced-motion:reduce){.ds-float,.ds-pulse,.ds-ring,.ds-blink,.ds-dot,.ds-bar{animation:none}.ds-pop,.ds-rise{opacity:1;animation:none}.ds-wheel{transition:none}}