/* 里程碑卡片工具（从 beforego.art 搬来，10-25）。颜色变量见 site.css 的 :root；黄色焦点环换成 wren。 */
.st{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:28px;align-items:start;width:min(1032px,calc(100vw - 2 * var(--gutter)));margin:28px 0 12px;animation:stIn .5s cubic-bezier(.2,.8,.2,1) both}
.st-panel{padding:8px 26px 26px;border-radius:24px;background:var(--paper);border:1px solid var(--rule)}
.st-step{border:0;margin:0;padding:20px 0 0;min-width:0}
.st-step+.st-step{margin-top:18px;border-top:1px solid var(--rule)}
.st-step>legend{float:left;width:100%;display:flex;align-items:center;gap:10px;padding:0;margin:0 0 14px;font:700 12px/1 var(--text);letter-spacing:1.4px;text-transform:uppercase;color:var(--ink)}
.st-step>legend+*{clear:both}
.st-step>legend b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;letter-spacing:0}
.st-step>legend small{font:500 12px/1 var(--text);letter-spacing:0;text-transform:none;color:var(--soft)}
.st-stack{display:grid;gap:12px}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.st-field{display:grid;gap:6px;font:600 13px/1.2 var(--text);color:var(--muted)}
.st input[type=text],.st input[type=date]{font:400 16px/1.3 var(--text);padding:12px 14px;border:1.5px solid var(--rule);border-radius:12px;background:#fff;color:var(--ink);width:100%;min-width:0;transition:border-color .15s,box-shadow .15s}
.st input[type=text]:hover,.st input[type=date]:hover{border-color:#C4B8A8}
.st input[type=text]:focus-visible,.st input[type=date]:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(154,74,38,.22)}
.st input[type=range]{width:100%;accent-color:var(--ink)}
.st-chips{display:flex;flex-wrap:wrap;gap:8px}
.st-chips+.st-chips{margin-top:10px}
.st-glabel{display:block;margin:12px 0 8px;font:600 12px/1 var(--text);color:var(--soft)}
.st-chip{position:relative;display:inline-flex}
.st-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.st-chip span,.st-chipbtn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;min-width:38px;padding:0 14px;border:1.5px solid var(--rule);border-radius:999px;font:600 14px/1 var(--text);color:var(--ink);background:#fff;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .12s}
.st-chip:hover span,.st-chipbtn:hover{border-color:var(--ink)}
.st-chip input:checked+span{background:var(--wren-soft);border-color:var(--wren);color:var(--wren)}
.st-chip input:focus-visible+span,.st-chipbtn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(154,74,38,.25)}
.st-chip:active span,.st-chipbtn:active{transform:scale(.95)}
.st-swatches{display:flex;flex-wrap:wrap;gap:14px}
.st-sw{position:relative;display:inline-block;width:40px;height:40px}
.st-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.st-sw i{display:block;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .15s,box-shadow .15s}
.st-sw:hover i{transform:scale(1.06)}
.st-sw input:checked+i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 3px #fff,0 0 0 5px var(--ink)}
.st-sw input:focus-visible+i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink),0 0 0 9px rgba(154,74,38,.25)}
.st-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.st-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:16px;background:var(--cream);border:1px solid var(--rule);max-width:100%}
.st-segi{position:relative;display:inline-flex}
.st-segi input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.st-segi span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:12px;font:600 14px/1 var(--text);color:var(--muted);transition:background .15s,color .15s,box-shadow .15s}
.st-segi input:checked+span{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.st-segi input:focus-visible+span{box-shadow:0 0 0 3px rgba(154,74,38,.3)}
.st-drop{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px dashed #C4B8A8;border-radius:16px;background:var(--cream);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.st-drop:hover,.st-drop.is-over{border-color:var(--ink);background:#F2E2D6}
.st-drop:focus-within{border-color:var(--ink);border-style:solid;box-shadow:0 0 0 4px rgba(154,74,38,.25)}
.st-drop.is-over{transform:scale(1.01)}
.st-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.st-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.st-drop b,.st-thumb b{display:block;font:600 15px/1.3 var(--text);color:var(--ink)}
.st-drop small,.st-thumb small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.st-thumb{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;background:var(--cream);border:1px solid var(--rule);animation:stUp .3s ease both}
.st-thumb img{width:56px;height:56px;object-fit:cover;border-radius:12px;flex:none}
.st-thumb div{flex:1;min-width:0}
.st-x{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--rule);background:#fff;color:var(--ink);font:500 20px/1 var(--text);cursor:pointer;transition:border-color .15s,transform .12s}
.st-x:hover{border-color:var(--ink)}
.st-x:active{transform:scale(.92)}
.st-msg{margin:0;color:#a3341f;font-size:14px}
.st-side{position:sticky;top:20px;display:grid;gap:14px}
.st-stage{margin:0;padding:18px 22px 22px;border-radius:28px;background:radial-gradient(130% 90% at 50% 0%,#fff 0%,var(--cream) 55%,#EFE6D8 100%);border:1px solid var(--rule)}
.st-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px;font:700 11px/1 var(--text);letter-spacing:1.3px;text-transform:uppercase;color:var(--soft)}
.st-live{display:inline-flex;align-items:center;gap:7px}
.st-live i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:stPulse 1.8s ease-out infinite}
.st-wrap{display:grid;place-items:center}
.st-wrap.bump{animation:stBump .38s cubic-bezier(.2,.8,.2,1)}
.st-cap{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--soft);text-align:center}
.st-actions{display:grid;gap:10px}
.st-actions .btn{width:100%;justify-content:center;padding:15px 20px;transition:background .15s,color .15s,transform .15s,box-shadow .15s}
.st-actions .btn:hover{transform:translateY(-1px)}
.st-actions .btn:active{transform:translateY(0)}
.st .btn svg.si{fill:none}
.st-save.is-done{background:var(--ink);color:#fff}
.st-hint{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.st-hint-ios,.st-hint-desk{display:none}
html.is-ios .st-hint-ios,html.is-desk .st-hint-desk{display:block}
.st-link{width:100%;font:400 14px/1.3 var(--text);padding:10px 12px;border:1.5px solid var(--rule);border-radius:10px;color:var(--ink);background:#fff}
.st-next{padding:18px;border-radius:20px;background:#fff;border:1.5px solid var(--ink);animation:stUp .45s cubic-bezier(.2,.8,.2,1) both}
.st-next p{margin:0 0 14px;font-size:15px}
.st-next .btn{width:100%;justify-content:center}
.st-lb{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:rgba(42,37,32,.78);animation:stFade .2s ease both}
.st-lb figure{margin:0;display:grid;gap:12px;justify-items:center}
.st-lb img{max-width:min(86vw,420px);max-height:72vh;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.st-lb figcaption{color:#fff;font:600 15px/1.4 var(--text);text-align:center}
.st-lbx{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink);font:500 24px/1 var(--text);cursor:pointer}
.st [hidden],.st-lb[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.st,.st *,.st-lb{animation:none!important;transition:none!important}}
@media (max-width:860px){.st{grid-template-columns:minmax(0,1fr);gap:16px}.st-side{display:contents}.st-stage{order:-1;padding:14px 16px 16px}.st-panel{order:0;padding:4px 18px 20px}
.st-actions{order:1;position:sticky;bottom:0;z-index:5;grid-template-columns:minmax(0,1fr) auto;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(255,255,255,0),#fff 26%)}.st-actions .btn.ghost{width:52px;padding:0;background:#fff}.st-actions .btn.ghost span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.st-actions .st-hint{grid-column:1/-1;margin:0;font-size:12.5px;line-height:1.35}.st-actions .st-link{grid-column:1/-1}.st-next{order:2}.st-row{grid-template-columns:minmax(0,1fr)}}
.mk .st-paper{width:min(100%,292px);transform:rotate(-1.4deg);transition:transform .45s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 22px 24px rgba(70,45,10,.22))}
.mk .st-paper:hover{transform:rotate(0) translateY(-3px)}
.mk .st-paper canvas{display:block;width:100%;height:auto;border-radius:4px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.mk-months .st-chip span{min-width:44px;padding:0 10px}
@media print{html.mk-printing main,html.mk-printing header,html.mk-printing footer{display:none!important}html.mk-printing #mk-sheet{display:grid!important;grid-template-columns:1fr 1fr;gap:6mm}html.mk-printing #mk-sheet img{width:100%;height:auto;break-inside:avoid;page-break-inside:avoid}}
@media (max-width:860px){.mk .st-paper{width:min(62vw,236px)}}
.btn{font:600 15px/1 var(--text);padding:15px 20px;border:0;border-radius:999px;background:var(--wren);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;width:100%;transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{background:var(--wren-deep);transform:translateY(-1px)}.btn:active{transform:none}.btn svg{width:18px;height:18px;flex:none;fill:currentColor}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}.btn.ghost:hover{background:var(--surface)}

#mk-sheet{display:none}
@keyframes stIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes stUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes stFade{from{opacity:0}to{opacity:1}}
@keyframes stBump{40%{transform:scale(.982)}100%{transform:scale(1)}}
@keyframes stPulse{0%{box-shadow:0 0 0 0 rgba(107,98,88,.45)}70%{box-shadow:0 0 0 7px rgba(107,98,88,0)}100%{box-shadow:0 0 0 0 rgba(107,98,88,0)}}