/* Tutorial content inside the existing system-notification page framework. */
#page-index-m .webmcp-guide{font-family:"Microsoft JhengHei",sans-serif;font-size:16px;line-height:1.8;color:#333;min-width:0;padding:8px 0 24px}
#page-index-m .webmcp-guide h1{font-size:24px;color:#663300;margin:0 0 4px;line-height:1.5}
#page-index-m .webmcp-guide h2{font-size:21px;color:#663300;margin:0 0 12px;line-height:1.5}
#page-index-m .webmcp-guide h3{font-size:17px;color:#663300;margin:0 0 10px}
#page-index-m .webmcp-guide p{margin:10px 0}
#page-index-m .webmcp-guide .guide-date{font-size:13px;color:#666;margin:0 0 14px}
#page-index-m .webmcp-guide section{padding:24px 0;border-top:1px solid #d9d4c6;scroll-margin-top:16px}
#page-index-m .webmcp-guide a{color:#005a9c;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
#page-index-m .webmcp-guide a:hover{color:#663300}
#page-index-m .webmcp-guide :is(a,summary):focus-visible{outline:2px solid #885500;outline-offset:3px}
#page-index-m .webmcp-guide .guide-nav{display:flex;flex-wrap:wrap;gap:8px 20px;padding:12px 0 18px;font-size:14px}
#page-index-m .webmcp-guide ol,#page-index-m .webmcp-guide ul{padding-left:24px;margin:10px 0}
#page-index-m .webmcp-guide li{margin:7px 0}
#page-index-m .webmcp-guide .guide-note{background:#f1eddc;border-left:3px solid #aa8855;padding:12px 16px;font-size:14px}
#page-index-m .webmcp-guide code{overflow-wrap:anywhere;font-size:14px}
#page-index-m .webmcp-guide figure{margin:16px 0}
#page-index-m .webmcp-guide .guide-flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
#page-index-m .webmcp-guide .guide-flow li{position:relative;margin:0;padding:14px 10px;border:1px solid #d4c7a7;background:#f4f0e2;text-align:center}
#page-index-m .webmcp-guide .guide-flow li:not(:last-child):after{content:'→';position:absolute;right:-20px;top:30%;color:#885500;font-size:20px}
#page-index-m .webmcp-guide .guide-flow strong{display:block;color:#663300;font-size:15px}
#page-index-m .webmcp-guide .guide-flow span{display:block;font-size:13px;margin-top:6px}
#page-index-m .webmcp-guide figcaption{font-size:13px;color:#666;margin-top:8px}
#page-index-m .webmcp-guide .guide-shot{margin:22px 0 28px}
#page-index-m .webmcp-guide .guide-image{display:block;max-height:330px;overflow:hidden;border:1px solid #ccc;background:#fff}
#page-index-m .webmcp-guide .guide-image img{display:block;width:100%;height:auto;max-width:100%}
#page-index-m .webmcp-guide details{padding:10px 0;border-bottom:1px solid #ddd}
#page-index-m .webmcp-guide summary{cursor:pointer;font-weight:bold;color:#663300;min-height:32px}
#page-index-m .webmcp-guide details p{font-size:14px}
#page-index-m .webmcp-guide .guide-help{font-size:14px;margin-top:18px}
#page-index-m .webmcp-guide .guide-bottom{text-align:center;padding:16px 0;border-top:1px solid #d9d4c6}
@media(max-width:768px){#page-index-m.page-webmcp-guide .webmcp-layout>tbody>tr>.webmcp-illustration{display:none!important}#page-index-m .webmcp-guide{padding:8px 4px 20px}#page-index-m .webmcp-guide h1{font-size:22px}#page-index-m .webmcp-guide .guide-flow{grid-template-columns:1fr;gap:22px}#page-index-m .webmcp-guide .guide-flow li{padding:12px;text-align:left}#page-index-m .webmcp-guide .guide-flow li:not(:last-child):after{content:'↓';right:auto;left:50%;top:auto;bottom:-25px}#page-index-m .webmcp-guide .guide-flow span{margin-top:2px}#page-index-m .webmcp-guide .guide-image{max-height:280px}}
@media print{#page-index-m .webmcp-guide .guide-image{max-height:none}#page-index-m .webmcp-guide .guide-nav{display:none}}
/* Legacy side-frame widths need explicit units in standards-mode tutorial pages. */
@media(min-width:769px){
 #page-index-m.page-webmcp-guide .MainPanelLeft,#page-index-m.page-webmcp-guide .MainPanelRight{width:13px;min-width:13px;background-repeat:repeat-y}
 #page-index-m.page-webmcp-guide .MainPanelCenter{width:auto;min-width:0}
}
#page-index-m .webmcp-guide .guide-languages{font-size:13px;margin:8px 0 14px}
#page-index-m .webmcp-guide .guide-flow strong,#page-index-m .webmcp-guide .guide-flow span{overflow-wrap:anywhere}
