/* Black glass walkthrough, positioned beside the control being explained. */
#midiary-design:has(.diary-tour[open]) #screen{padding-bottom:100dvh}
#midiary-design .diary-tour{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--fd-text);overflow:hidden;overscroll-behavior:contain}
#midiary-design .diary-tour::backdrop{background:#00000014}
.tour-shade{position:fixed;inset:0;background:#0008;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tour-shade[hidden],.tour-spotlight[hidden]{display:none}
.tour-spotlight{position:fixed;border:1px solid #ffffff6b;box-shadow:0 0 0 100vmax #0009,inset 0 0 0 1px #ffffff0a,0 0 26px #ffffff0e;pointer-events:none;box-sizing:border-box;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease,border-radius .25s ease}
#midiary-design .tour-panel{position:fixed;box-sizing:border-box;width:min(390px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:22px;border:1px solid #ffffff35;border-top-color:#ffffff63;border-radius:28px;background:linear-gradient(140deg,#ffffff0d,#ffffff01 50%,#00000030),#111111df;box-shadow:inset 0 1px 0 #ffffff20,inset 0 -1px 0 #0009,0 26px 80px #0009;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);overflow:auto;transition:left .25s ease,top .25s ease;scrollbar-width:thin}
.tour-progress{height:3px;border-radius:3px;background:#ffffff12;overflow:hidden;margin-bottom:14px}
.tour-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#747474,#eeeeee);transition:width .3s ease}
.tour-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tour-contents{margin:8px 0 14px;border-bottom:1px solid #ffffff14;padding-bottom:8px}
#midiary-design .tour-contents summary{font-size:12px;padding:8px 10px;cursor:pointer;color:var(--fd-muted)}
.tour-chapters{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding-top:8px}
#midiary-design .tour-chapter{font-size:12px;padding:8px 10px;text-align:left;width:100%}
#midiary-design .tour-chapter[aria-current=step]{border-color:var(--button-edge);background:var(--button-glass);box-shadow:var(--button-shadow)}
#midiary-design .tour-section{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--fd-muted);margin:0 0 12px}
.tour-error{color:#e9b9b9;font-size:13px;line-height:1.5}.tour-error[hidden]{display:none}
#midiary-design .tour-counter{margin:0;color:#a8a8a8;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
#midiary-design .tour-close{font-size:25px;line-height:1;width:36px;height:36px;padding:0;--button-radius:50%}
.tour-symbol{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff21;background:linear-gradient(140deg,#ffffff0f,#ffffff03);border-radius:16px;margin:14px 0 16px;box-shadow:inset 0 1px 0 #ffffff10}
.tour-symbol svg{width:24px;height:24px;stroke-width:1.5}
#midiary-design .tour-title{font-size:25px;line-height:1.18;letter-spacing:-.025em;font-weight:600;margin:0 0 12px;outline:0}
#midiary-design .diary-tour .tour-title:focus-visible{outline:none}
#midiary-design .tour-description{color:#b9b9b9;font-size:14px;line-height:1.65;margin:0;overflow-wrap:anywhere}
.tour-actions{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:22px}
#midiary-design .tour-actions button{width:auto;min-height:42px;padding:10px 12px;font-size:13px;line-height:1.3;white-space:normal}
#midiary-design .tour-skip{margin-right:auto;color:#9d9d9d}
#midiary-design .tour-next{font-weight:600}
.tour-scene{height:128px;position:relative;display:grid;place-items:center;margin:8px 0 20px;isolation:isolate}
.tour-scene::before{content:'';position:absolute;width:110px;height:110px;border:1px solid #ffffff0e;border-radius:50%;box-shadow:0 0 0 20px #ffffff04,0 0 0 40px #ffffff02;animation:tour-orbit 5s ease-in-out infinite}
.tour-scene-card{position:absolute;width:80px;height:94px;box-sizing:border-box;border:1px solid #ffffff22;border-radius:18px;padding:13px;background:linear-gradient(140deg,#ffffff15,#ffffff02),#151515c9;box-shadow:inset 0 1px 0 #ffffff15,0 12px 20px #0005;transform:translateX(-66px) rotate(-14deg);animation:tour-float 4s ease-in-out infinite}
.tour-scene-card:nth-child(2){transform:translateX(66px) rotate(14deg);animation-delay:-2s}
.tour-scene-card:nth-child(3){transform:translateY(-8px);animation-delay:-1s}
.tour-scene-card span{font-size:24px;color:#d5d5d5;font-variant-numeric:tabular-nums}
.tour-scene-card i{display:block;height:3px;background:#ffffff12;border-radius:3px;margin-top:10px}
.tour-scene-card i:last-child{width:60%;margin-top:6px}
.tour-scene-mark{position:relative;display:grid;place-items:center;width:48px;height:48px;margin-top:58px;font-size:22px;font-weight:600;background:linear-gradient(135deg,#292929,#0b0b0b);border:1px solid #ffffff48;border-radius:17px;box-shadow:inset 0 1px 0 #ffffff38,0 8px 20px #0008}
#midiary-design[data-theme=light] .tour-panel{background:linear-gradient(140deg,#ffffffdc,#ffffff99),#ecececdc;color:#202020;box-shadow:inset 0 1px 0 #fff,0 26px 80px #0005;border-color:#ffffffbc}
#midiary-design[data-theme=light] :is(.tour-description,.tour-counter){color:#555}
#midiary-design[data-theme=light] .tour-progress{background:#0001}
#midiary-design[data-theme=light] .tour-progress span{background:linear-gradient(90deg,#9b9b9b,#333)}
#midiary-design[data-theme=light] .tour-symbol{border-color:#0002;background:#ffffff60}
@keyframes tour-float{50%{translate:0 -7px}}
@keyframes tour-orbit{50%{scale:1.07;opacity:.5}}
@media(max-width:420px){#midiary-design .tour-panel{padding:19px;border-radius:24px}#midiary-design .tour-title{font-size:23px}.tour-scene{height:112px;margin-bottom:16px}.tour-actions{margin-top:18px}}
@media(max-height:550px){.tour-scene{display:none}.tour-symbol{display:none}#midiary-design .tour-panel{padding:16px}#midiary-design .tour-title{font-size:21px}.tour-actions{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.tour-scene::before,.tour-scene-card{animation:none}.tour-spotlight,#midiary-design .tour-panel,.tour-progress span{transition:none}}

/* One anchored guide panel; only the highlighted control follows the page. */
#midiary-design:has(.diary-tour[open]) #screen {padding-bottom:min(400px,55dvh)}
#midiary-design .tour-panel {display:flex;flex-direction:column;padding:18px;transition:none;overflow:hidden;border-radius:24px}
#midiary-design .tour-panel>.tour-progress {flex:none;margin-bottom:8px}
#midiary-design .tour-heading {flex:none;min-height:34px}
#midiary-design .tour-contents {flex:none;margin:3px 0 8px;padding-bottom:3px}
#midiary-design .tour-contents summary {padding:5px 0}
#midiary-design .tour-chapters {position:absolute;inset:94px 18px 72px;padding:10px;overflow:auto;border:1px solid var(--fd-border);border-radius:16px;background:var(--glass-opaque,#171717);z-index:2;align-content:start;box-shadow:0 8px 30px #0004}
#midiary-design .tour-body {position:relative;flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding-right:2px}
#midiary-design .tour-contents[open]~.tour-body {visibility:hidden}
#midiary-design .tour-location {font-size:11px;line-height:1.5;margin:0 0 8px;padding:0 42px 0 0;color:var(--fd-muted)}
#midiary-design .tour-title {font-size:23px;margin:0 38px 9px 0;line-height:1.2}
#midiary-design .tour-description {font-size:14px;line-height:1.55;margin:0}
#midiary-design .tour-symbol {position:absolute;top:0;right:2px;width:30px;height:30px;margin:0;border-radius:10px}
#midiary-design .tour-symbol svg {width:19px;height:19px;transform-origin:center;animation:tour-symbol-turn 3.8s cubic-bezier(.2,.7,.2,1) infinite}
#midiary-design .tour-symbol[data-symbol=gear] svg {animation-name:tour-gear-turn}
#midiary-design .tour-symbol[data-symbol=folder] svg {animation-name:tour-folder-open}
#midiary-design .tour-actions {flex:none;margin-top:12px;padding-top:10px;border-top:1px solid var(--fd-border)}
#midiary-design .tour-actions button {min-height:42px}
#midiary-design .tour-spotlight {transition:none;border-color:#ffffffb0;box-shadow:0 0 0 100vmax #0008,inset 0 0 0 1px #ffffff16,0 0 22px #ffffff20}
#midiary-design .tour-moving .tour-spotlight {visibility:hidden}
#midiary-design .tour-tap {position:absolute;right:6px;bottom:6px;width:10px;height:10px;border-radius:50%;background:#ffffffbc;box-shadow:0 0 0 5px #ffffff20;animation:tour-tap 2s ease-in-out infinite}
#midiary-design[data-theme=light] .tour-tap {background:#333;box-shadow:0 0 0 5px #0001}
@keyframes tour-symbol-turn {0%,65%,100%{transform:scale(1) rotate(0)}20%{transform:scale(1.2) rotate(-12deg)}40%{transform:scale(1.07) rotate(8deg)}}
@keyframes tour-gear-turn {0%,12%{transform:rotate(0) scale(1)}45%{transform:rotate(220deg) scale(1.17)}70%,100%{transform:rotate(360deg) scale(1)}}
@keyframes tour-folder-open {0%,70%,100%{transform:skewX(0) scaleY(1)}25%{transform:skewX(-9deg) scaleY(1.2)}45%{transform:skewX(4deg) scaleY(.97)}}
@keyframes tour-tap {0%,70%,100%{transform:scale(1);opacity:.6}25%{transform:scale(.8);opacity:1}45%{transform:scale(1.25);opacity:.7}}
@media(max-height:550px){#midiary-design .tour-title{font-size:20px}.tour-symbol{display:none}#midiary-design .tour-panel{padding:12px}#midiary-design .tour-contents{margin-bottom:3px}#midiary-design .tour-actions{margin-top:5px;padding-top:5px}}
@media(prefers-reduced-motion:reduce){#midiary-design :is(.tour-tap,.tour-symbol svg){animation:none}}