/* Shared site styles. Appearance and feature classes live on the html element. */
/* Native HTML/CSS examples retain their authored colors and light canvas. */:where(.site-native){color-scheme:only light}:where(.site-article,.site-columns){color-scheme:only light;--site-text:#333;--site-muted:#666;--site-strong:#000;--site-menu-hover:#fff;--site-inverse:#ccc;--site-surface:#fff;--site-panel:#ccc;--site-band:#999;--site-deep-surface:#666;--site-frame:#333;--site-border:#666;--site-rule:#999;--site-wallpaper:url(../img/wp/wall.gif);--site-link:#33c;--site-visited:#399;--site-hover:#c66;--site-active:#039;--site-red:#f36;--site-yellow:#f90;--site-blue:#00f;--site-cyan:#0ff;--site-purple:#f0f;--site-green:#0f0}
/* CSS alone follows OS changes, including before hydration. Print stays light. */@media screen and (prefers-color-scheme:dark){:where(.site-article,.site-columns){color-scheme:dark;--site-text:#e3e7ed;--site-muted:#bbc4d0;--site-strong:#f4f6fa;--site-menu-hover:#f4f6fa;--site-inverse:#e3e7ed;--site-surface:#181e26;--site-panel:#232c37;--site-band:#303b49;--site-deep-surface:#303b49;--site-frame:#758294;--site-border:#758294;--site-rule:#536171;--site-wallpaper:none;--site-link:#9bbcff;--site-visited:#b9a7ed;--site-hover:#ffabb8;--site-active:#9fdbff;--site-red:#ff829c;--site-yellow:#ffbb66;--site-blue:#8eb4ff;--site-cyan:#6fdfed;--site-purple:#eda2f5;--site-green:#a0da85}
  /* Explicit foreground samples need the same white canvas as the lesson. */:where(.site-content) #contents td[style^="color:"]{background:#fff;color-scheme:only light}}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Compact search stays inside existing top-page sidebars. */:where(.site-article,.site-columns) #menu .site-search{margin:0 0 12px}:where(.site-article,.site-columns) .site-search label{display:block}:where(.site-article,.site-columns) .site-search-controls{display:flex;align-items:stretch;gap:4px;margin:6px 8px}:where(.site-article,.site-columns) .site-search input[type=search]{box-sizing:border-box;flex:1;width:0;min-width:0;margin:0;border:1px solid var(--site-border);background:var(--site-surface);color:var(--site-text);font:inherit;padding:4px}:where(.site-article,.site-columns) .site-search button,:where(.site-content) .search-results button{border:1px solid var(--site-border);background:var(--site-panel);color:var(--site-strong);font:inherit;padding:3px 10px;cursor:pointer}:where(.site-article,.site-columns) .site-search button{flex-shrink:0;padding-inline:6px;white-space:nowrap}:where(.site-content) .search-results p{margin:12px 20px;line-height:1.5}:where(.site-content) .search-results dl{margin:16px 20px;overflow-wrap:anywhere}:where(.site-content) .search-results dt{border-left:4px solid var(--site-border);padding:0 8px;font-weight:700}:where(.site-content) .search-results dd{margin:6px 12px 20px;line-height:1.5}:where(.site-content) .search-result-category{color:var(--site-muted)}:where(.site-content) .search-pagination{display:flex;justify-content:center;gap:16px;margin:20px}

/* Content layout and responsive advertisements. */:where(.site-content) .content-columns{display:flex;align-items:stretch}:where(.site-content) .content-columns>main{min-width:0;flex:1}

/* Restore the shared style1 header background for all top pages, including
   consistent border rendering under automatic dark mode. */:where(.site-content) #main.content-top{background:var(--site-panel)}:where(.site-content) .content-top #header{background:transparent}

/* Let the article fill the taller column and keep the page label below it. */:where(.site-content) .content-top .content-columns>main{flex:0 0 calc(100% - 162px);display:flex;flex-direction:column;background:var(--site-surface)}:where(.site-content) .content-top #menu{flex:0 0 162px}:where(.site-content) .content-top #contents{flex:1;display:flow-root}:where(.site-content) .content-top #contents .thr{float:left;width:160px;margin:0 0 16px}:where(.site-content) .content-top #contents .hal{float:left;width:240px;margin:0 0 16px}:where(.site-content) .content-top #contents .xyz{clear:both;margin:0;line-height:normal;color:var(--site-inverse);text-align:center}:where(.site-content) .content-top #contents ul{margin:0 0 0 36px;line-height:1.5em}:where(.site-content) .content-top #contents .fl{list-style:square;margin:5px 36px 30px}:where(.site-content) .content-top .content-columns>main>#co{margin:0;line-height:normal}:where(.site-content) .content-detail #footer #lf,:where(.site-content) .content-detail #footer #mn{
  /* The legacy ad's 60px bottom margin already includes this separation. */margin-top:0}:where(.site-content) .content-site img{max-width:100%}:where(.site-content) .content-site #contents #ad1{width:auto;height:auto}:where(.site-content) .content-site .adsense-main{margin:5px 20px 60px;min-height:280px}:where(.site-content) .content-site .adsbygoogle{width:100%}:where(.site-content) .content-site #menu #am1.adsense-main{width:auto;height:auto;
  /* A defined 150 × 300 slot avoids auto-selected tall sidebar units. */min-height:300px;margin:8px 6px 30px}

/* Authored style1 book pages retain their 482px body and 162px work menu. */:where(.site-content) .content-sidebar .content-columns>main{flex:0 0 482px}:where(.site-content) .content-sidebar #contents{display:flow-root}:where(.site-content) .content-sidebar #menu{flex:0 0 162px}

/* Non-top pages without an ad retain margin collapse into the footer. */:where(.site-content) .content-no-ads:not(.content-top) .content-columns,:where(.site-content) .content-no-ads:not(.content-top) .content-columns>main{display:contents}:where(.site-content) .content-no-ads.content-detail #footer #lf{margin-top:2em}

/* Original stylesheet pages keep intrinsic image widths in automatic tables. */:where(.site-content) .content-intrinsic-images img{max-width:none}

/* Common typography, frames and page-specific article/column rules. */:where(.site-article,.site-columns) body{margin:0;padding:0;color:var(--site-text);background:var(--site-surface) var(--site-wallpaper);font:100% ＭＳ ゴシック,Osaka,sans-serif}:where(.site-article,.site-columns) h2{margin:1px;font-size:12px;border:2px solid var(--site-border);color:var(--site-text);background:var(--site-band)}:where(.site-article,.site-columns) em{font-style:normal;color:var(--site-red)}:where(.site-article,.site-columns) img{margin:0;border:none}:where(.site-article) pre{margin:12px 36px;padding:0;border:2px solid var(--site-rule);color:var(--site-strong);background:var(--site-panel)}:where(.site-article,.site-columns) a:link{color:var(--site-link);text-decoration:none}:where(.site-article,.site-columns) a:visited{color:var(--site-visited);text-decoration:none}:where(.site-article,.site-columns) a:hover{color:var(--site-hover);text-decoration:underline}:where(.site-article,.site-columns) a:active{color:var(--site-active);text-decoration:underline}:where(.site-article,.site-columns) #main{width:644px;margin:0 auto;padding:0;border-style:solid;border-width:4px 1px;font-size:.75em}:where(.site-article) #main{border-color:var(--site-border);color:var(--site-text);background:var(--site-surface)}:where(.site-columns) #main{border-color:var(--site-border);color:var(--site-text);background:var(--site-panel)}:where(.site-article,.site-columns) #header{margin:1px 1px 0}:where(.site-article) #header{border:2px solid var(--site-frame);background:var(--site-panel)}:where(.site-columns) #header{border:2px solid var(--site-frame)}:where(.site-article,.site-columns) #header h1{margin:0;padding:16px;font-size:16px;text-align:center}:where(.site-article,.site-columns) #header p{margin:0;font-size:12px;text-align:right}:where(.site-article) #body{display:flex}:where(.site-article) .top{width:482px;display:flex;flex-direction:column}:where(.site-article) .top>*{flex-shrink:0}:where(.site-article) #contents.top #co{margin-top:auto}:where(.site-article,.site-columns) #contents{color:var(--site-text);background:var(--site-surface)}:where(.site-columns) #contents{float:left;width:482px;margin:0;padding:0}:where(.site-article,.site-columns) #contents h2{padding:2px 17px}:where(.site-article,.site-columns) #contents :is(table,.ls,.ml,.lv) :is(th,td):has(>h2){padding:0;border:hidden;background:transparent}:where(.site-article,.site-columns) #contents table h2{margin:1px 0;text-align:start}:where(.site-article,.site-columns) #contents h3{margin:12px 20px 0;padding:0;border-bottom:2px solid var(--site-border);color:var(--site-muted);background:var(--site-surface);font-size:1em}:where(.site-article) #contents p{margin:.5em 24px;line-height:1.4em}:where(.site-article,.site-columns) #contents ul{list-style:circle;padding:0}:where(.site-article) #contents ul{margin:.5em 36px;line-height:1.6em}:where(.site-columns) #contents ul{margin:0 0 0 36px;line-height:1.5em}:where(.site-article) #contents ol{margin:1em 20px;padding:0}:where(.site-article) #contents ol li{margin:0 12px 1em;padding:0}:where(.site-article) #contents dl{margin:12px 20px;padding:0}:where(.site-article) #contents dt{margin:0;padding:0 8px;border-left:4px solid var(--site-border)}:where(.site-article) #contents dd{margin:.5em 12px 2em;line-height:1.5em}:where(.site-article) #contents .re{margin:0 0 0 24px}:where(.site-columns) #contents .re{margin:1em 2em 1.5em;line-height:1.5em;text-indent:1em}:where(.site-article) #contents .ls,:where(.site-article) #contents .lv{width:642px;margin:0 auto;border-collapse:collapse;font-size:12px}:where(.site-article) #contents .ml{width:480px;margin:0 1px;border-collapse:collapse;font-size:12px}:where(.site-article) #contents th{padding:1px 6px;border-style:solid none;border-width:2px;border-color:var(--site-rule);color:var(--site-muted);background:var(--site-panel);text-align:left}:where(.site-article) #contents .ls td,:where(.site-article) #contents .ml td{padding:4px 0 4px 6px;border-bottom:1px solid var(--site-rule)}:where(.site-article) #contents .lv td{padding:0 0 0 6px;border-right:1px solid var(--site-rule);vertical-align:top}:where(.site-article) #contents .tt{background:var(--site-deep-surface);color:var(--site-inverse)}:where(.site-article,.site-columns) #contents .ri{text-align:right}:where(.site-columns) #contents .ri{margin:0;padding:0 2em 0 0;line-height:1.5em}:where(.site-article) #contents .cn{text-align:center;text-indent:0}:where(.site-article,.site-columns) #contents #co{margin:0}:where(.site-article,.site-columns) #contents #ad1{width:336px;height:280px;margin:5px 20px 60px}:where(.site-article) #contents #ad3{width:468px;height:60px;margin:30px 20px}:where(.site-article,.site-columns) #menu{width:162px;color:var(--site-muted);background:var(--site-panel);font-size:12px}:where(.site-columns) #menu{float:right}:where(.site-article,.site-columns) #menu h2{padding:2px 3px}:where(.site-article,.site-columns) #menu h3{margin:0;padding:2px 6px;color:var(--site-inverse);background:var(--site-band);font-size:12px}:where(.site-article,.site-columns) #menu ul{margin:0 0 12px;padding:0}:where(.site-article,.site-columns) #menu ul li{list-style:square;margin:0 0 0 18px;padding:0;line-height:1.35em}:where(.site-article,.site-columns) #menu ul li a{display:block;width:144px;margin:0;padding:0;color:var(--site-strong);line-height:1.35em}:where(.site-article,.site-columns) #menu ul li a:hover{color:var(--site-menu-hover);background:var(--site-deep-surface)}:where(.site-article,.site-columns) #menu #ad2{width:160px;height:560px}:where(.site-article,.site-columns) #menu #am1{width:120px;height:90px;margin:0 13px 30px}:where(.site-article,.site-columns) #menu #am2{width:120px;height:240px;margin:0 16px}:where(.site-article,.site-columns) #footer{font-size:12px}:where(.site-columns) #footer{clear:both;margin:0}:where(.site-article) #footer #mn{margin:2em 0;text-align:center}:where(.site-article) #footer #lf{margin:2em 0 0}:where(.site-article) #footer #cr{margin:0;padding:16px;color:var(--site-inverse);background:var(--site-deep-surface);text-align:center}:where(.site-article) #footer #cr a{color:var(--site-inverse)}@media print{:where(.site-article) #contents #ad1,:where(.site-article) #contents #ad2{display:none}}:where(.site-columns) #contents .thr{float:left;width:160px;margin:0 0 16px}:where(.site-columns) #contents .hal{float:left;width:240px;margin:0 0 16px}:where(.site-columns) #contents .xyz{clear:both;margin:0;color:var(--site-inverse);background:var(--site-surface);text-align:center}:where(.site-columns) #contents ul li ul{list-style:square;margin:0 0 0 12px}:where(.site-columns) #contents .fl{list-style:square;margin:5px 36px 30px}:where(.site-columns) #contents .im{margin:1em 3em 1.5em}:where(.site-columns) #footer p{margin:0;padding:16px;color:var(--site-inverse);background:var(--site-deep-surface);text-align:center}:where(.site-columns) #footer a{color:var(--site-inverse)}
/* Optional compact tables and color labels; enabled only where authored. */:where(.site-compact-tables) #contents table{width:442px;margin:20px auto;border-collapse:collapse;font-size:12px}:where(.site-compact-tables) #contents th{padding:1px 6px;border-style:solid none;border-width:2px;border-color:var(--site-rule);color:var(--site-muted);background:var(--site-panel);text-align:left}:where(.site-compact-tables) #contents td{padding:4px 6px;border-bottom:1px solid var(--site-rule)}:where(.site-compact-tables) #lin td{padding:2px 6px}:where(.site-compact-tables) #lin .ban{width:200px;padding:2px 0}:where(.site-compact-tables) #lin .ban a.nb{display:block;width:196px;border:2px solid var(--site-panel);line-height:36px;text-align:center}:where(.site-color-labels) #le{float:left;width:320px;margin:0;border-right:1px solid var(--site-rule)}:where(.site-color-labels) #ri{float:right;width:320px;margin:0;border-left:1px solid var(--site-rule)}:where(.site-color-labels) .xyz{clear:both;margin:0}:where(.site-color-labels) .red{color:var(--site-red)}:where(.site-color-labels) .yel{color:var(--site-yellow)}:where(.site-color-labels) .blu{color:var(--site-blue)}:where(.site-color-labels) .wat{color:var(--site-cyan)}:where(.site-color-labels) .pur{color:var(--site-purple)}:where(.site-color-labels) .gre{color:var(--site-green)}
/* Community pages share the same responsive ad stylesheet. */
/* Height must grow with the responsive creative. Never crop an ad. */:where(.site-community) #contents #ad1.adsense-main,:where(.site-community) .adsense-main{box-sizing:border-box;width:calc(100% - 40px);height:auto;min-height:280px;margin:5px 20px 60px}:where(.site-community) .adsense-main>.adsbygoogle{display:block}@media print{:where(.site-community) .adsense-main{display:none}}