:root {
  --dpro-tutorial-z-highlight: 2147483000;
  --dpro-tutorial-z-card: 2147483010;
  --dpro-tutorial-z-entry: 2147482990;
}
.dpro-tutorial-highlight {
  position: fixed; z-index: var(--dpro-tutorial-z-highlight); pointer-events: none;
  border: 3px solid #c46d2d; border-radius: 16px;
  box-shadow: 0 0 0 5px rgba(196,109,45,.18), 0 8px 30px rgba(13,68,75,.18);
}
.dpro-tutorial-card {
  position: fixed; z-index: var(--dpro-tutorial-z-card);
  width: min(360px, calc(100vw - 16px)); max-width: calc(100vw - 16px);
  max-height: min(640px, calc(100dvh - 16px)); overflow: hidden;
  border: 1px solid #b8d0cd; border-radius: 18px; background: #fff; color: #203235;
  box-shadow: 0 18px 54px rgba(13,68,75,.28);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  line-height: 1.55; overflow-wrap: anywhere; overscroll-behavior: contain;
}
.dpro-tutorial-card[hidden], .dpro-tutorial-highlight[hidden] { display:none!important; }
.dpro-tutorial-handle {
  min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; color:#fff; background:linear-gradient(135deg,#0d444b,#145d66);
  cursor:grab; user-select:none; touch-action:none; font-size:13px; font-weight:900; letter-spacing:.03em;
}
.dpro-tutorial-handle:active{cursor:grabbing}
.dpro-tutorial-handle:focus-visible,.dpro-tutorial-card button:focus-visible,.dpro-tutorial-card a:focus-visible,.dpro-tutorial-entry:focus-visible{
  outline:3px solid #f0a25b; outline-offset:3px;
}
.dpro-tutorial-handle small{opacity:.86;font-size:11px;font-weight:700}
.dpro-tutorial-body{
  max-height:calc(min(640px,100dvh - 16px) - 48px); overflow:auto; padding:16px; -webkit-overflow-scrolling:touch;
}
.dpro-tutorial-progress{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;color:#607174;font-size:12px;font-weight:800}
.dpro-tutorial-card h2{margin:0;color:#0d444b;font-size:21px;line-height:1.35}
.dpro-tutorial-card p{margin:10px 0 0;font-size:14px}
.dpro-tutorial-safety{margin-top:12px;padding:10px 11px;border-left:4px solid #c46d2d;border-radius:9px;background:#f6e6d7;color:#66401f;font-size:12px;font-weight:700}
.dpro-tutorial-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dpro-tutorial-controls button,.dpro-tutorial-controls a{
  min-height:44px;flex:1 1 92px;display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;
  border:1px solid #cfddda;border-radius:11px;color:#0d444b;background:#fff;text-decoration:none;
  font:inherit;font-size:13px;font-weight:900;cursor:pointer;
}
.dpro-tutorial-controls .is-primary{border-color:#145d66;color:#fff;background:#145d66}
.dpro-tutorial-controls .is-muted{color:#607174;background:#f1f5f4}
.dpro-tutorial-complete{margin-top:12px;padding:10px 12px;border-radius:10px;background:#e1f2e8;color:#24734b;font-size:13px;font-weight:900}
.dpro-tutorial-entry{
  position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));
  z-index:var(--dpro-tutorial-z-entry);min-width:112px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 13px;border:1px solid rgba(255,255,255,.7);border-radius:999px;color:#fff;background:#0d444b;
  box-shadow:0 10px 26px rgba(13,68,75,.25);font:inherit;font-size:13px;font-weight:900;cursor:pointer;
}
body.dpro-tutorial-open .dpro-tutorial-entry{opacity:.3;pointer-events:none}

.dpro-guide-entry{
  position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px);
  z-index:var(--dpro-tutorial-z-entry);min-width:112px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:8px 13px;border:1px solid #cfddda;border-radius:999px;color:#0d444b;background:#fff;text-decoration:none;
  box-shadow:0 8px 22px rgba(13,68,75,.18);font:inherit;font-size:12px;font-weight:900;
}
body.dpro-tutorial-open .dpro-guide-entry{opacity:.3;pointer-events:none}
@media(max-width:390px){
  .dpro-tutorial-card{width:calc(100vw - 16px);max-width:calc(100vw - 16px);border-radius:15px}
  .dpro-tutorial-body{padding:14px}
  .dpro-tutorial-controls button,.dpro-tutorial-controls a{flex-basis:calc(50% - 4px)}
  .dpro-tutorial-entry{min-width:100px;font-size:12px}.dpro-guide-entry{min-width:100px;font-size:11px}
}
@media(max-width:330px){.dpro-tutorial-controls button,.dpro-tutorial-controls a{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.dpro-tutorial-highlight{transition:none}}