tips-font-size[data-astro-cid-zqpwtif2],tips-rgba-accordion[data-astro-cid-c7f43wbf],tips-hsl-accordion[data-astro-cid-abqdfa5q],tips-hwb-accordion[data-astro-cid-rw7jqglt]{display:contents}.lab__graph__scroll[data-astro-cid-tor4cn5a]{max-inline-size:100%;overflow-x:auto}.lab__graph__wrap[data-astro-cid-tor4cn5a]{inline-size:fit-content;margin-inline:auto;padding:3.125rem;position:relative;& .scale__vertical,& .scale__horizontal,& .scale__center{content:"";text-align:center;font-weight:700;display:block;position:absolute}& .scale__vertical{inset-block-start:3rem;inset-inline-start:1.75rem}& .scale__horizontal{inset-inline-end:3rem}& .scale__center{inset-block-start:50%;inset-inline-end:.5rem;transform:translateY(-50%)}}.lab__graph[data-astro-cid-tor4cn5a]{border:1px dotted var(--base-950);background-image:radial-gradient(at 0 0,lab(100% 0 0),#0000),radial-gradient(at 0 100%,lab(0% 0 0),#0000),radial-gradient(at 100% 0,lab(100% -34.8141 -64.7344),#0000),radial-gradient(at 100% 100%,lab(0% -34.8141 -64.7344),#0000);grid-template-rows:repeat(15,1fr);grid-template-columns:repeat(15,1fr);block-size:600px;inline-size:600px;margin-inline:auto;display:grid;& .item{z-index:2;background-color:#fffcf0bf;place-items:center;display:grid}& .center{z-index:2;isolation:isolate;background-color:#0000;grid-area:8/6/9/11;position:relative;& .center__label{z-index:1;background-color:#fffcf0bf;padding:.5rem 1rem;position:relative}&:before{content:"";background-color:var(--base-950);z-index:0;block-size:1px;inline-size:550px;position:absolute}&:after{content:"";background-color:var(--base-950);z-index:0;block-size:550px;inline-size:1px;position:absolute}}& .leftup{grid-area:1/1/2/5}& .centerup{grid-area:2/6/3/9}& .rightup{grid-area:3/12/4/15}& .leftcenter{grid-area:9/1/10/4}& .rightcenter{grid-area:7/12/8/15}& .leftbottom{grid-area:14/1/15/5}& .centerbottom{grid-area:13/6/14/9}& .rightbottom{grid-area:13/12/14/15}}tips-lab-accordion[data-astro-cid-qtvqdnyn]{display:contents}.lch__graph__wrapper[data-astro-cid-imprcts5]{inline-size:100%;margin-inline:auto;padding:50px;position:relative;container-type:inline-size;@media (width<=767px){padding:2rem}}.label__a[data-astro-cid-imprcts5],.label__b[data-astro-cid-imprcts5],.label__l[data-astro-cid-imprcts5]{font-weight:700;position:absolute}.label__a[data-astro-cid-imprcts5],.label__l[data-astro-cid-imprcts5]{--graph-radius:100px;inset-inline:calc(50% + var(--graph-radius) + .5rem) auto;white-space:nowrap;@container (inline-size>768px){--graph-radius:20cqi}@container (inline-size>1560px){--graph-radius:300px}}.label__a[data-astro-cid-imprcts5]{inset-block-start:50%;transform:translateY(-50%)}.label__b[data-astro-cid-imprcts5]{--inset-block-start:.25rem;inset-block-start:var(--inset-block-start);inset-inline-start:50%;transform:translate(-50%);@media screen and (width>=768px){--inset-block-start:1rem}}.label__l[data-astro-cid-imprcts5]{--font-size:.8rem;font-size:var(--font-size);inset-block-start:calc(50% - var(--graph-radius) * .6);transform:translateY(-50%);@media screen and (width>=768px){--font-size:1rem}}.lch__graph[data-astro-cid-imprcts5]{--block-size:200px;--inline-size:200px;--ring-step:calc(var(--inline-size) / 12);block-size:var(--block-size);inline-size:var(--inline-size);clip-path:circle();border:1px solid var(--base-950);background-image:linear-gradient(to right, transparent calc(50% - 1px), var(--base-400), transparent calc(50% + 1px)), linear-gradient(to bottom, transparent calc(50% - 1px), var(--base-400), transparent calc(50% + 1px)), repeating-radial-gradient(circle at center, transparent 0 calc(var(--ring-step) - 1px), var(--base-400) calc(var(--ring-step) - 1px) var(--ring-step)), radial-gradient(in lab, lab(60% 0 0) 0%, transparent 72%), conic-gradient(in lab, lab(60% 0 80) 0deg, lab(60% 56 56) 45deg, lab(60% 80 0) 90deg, lab(60% 56 -56) 135deg, lab(60% 0 -80) 180deg, lab(60% -56 -56) 225deg, lab(60% -80 0) 270deg, lab(60% -56 56) 315deg, lab(60% 0 80) 360deg);border-radius:50%;grid-template-rows:repeat(12,1fr);grid-template-columns:repeat(12,1fr);margin-inline:auto;display:grid;& .value__label{color:var(--base-700);font-size:clamp(.6rem, calc(var(--ring-step) * .7), 1rem);white-space:nowrap;line-height:1;display:grid}& .value__label__horizontal{place-items:flex-end;margin-right:.2em}& .label__zero{grid-area:6/7/7/8;justify-items:flex-start;margin-inline:.2em 0}& .label__vertical__1{grid-area:6/7/7/8}& .label__vertical__2{grid-area:5/7/6/8}& .label__vertical__3{grid-area:4/7/5/8}& .label__vertical__4{grid-area:3/7/4/8}& .label__vertical__5{grid-area:2/7/3/8}& .label__vertical__6{grid-area:1/7/2/8}& .label__horizontal__1{grid-area:6/7/7/8}& .label__horizontal__2{grid-area:6/8/7/9}& .label__horizontal__3{grid-area:6/9/7/10}& .label__horizontal__4{grid-area:6/10/7/11}& .label__horizontal__5{grid-area:6/11/7/12}& .label__horizontal__6{grid-area:6/12/7/13}@container (inline-size>768px){--block-size:40cqi;--inline-size:40cqi}@container (inline-size>1560px){--block-size:600px;--inline-size:600px;background-image:repeating-radial-gradient(circle at center, transparent 0 calc(var(--ring-step) - 1px), var(--base-400) calc(var(--ring-step) - 1px) var(--ring-step))}}tips-lch-accordion[data-astro-cid-y6yorvy2],tips-oklab-oklch-accordion[data-astro-cid-7dhzu6nh],tips-lab-gradient-accordion[data-astro-cid-fj53w3r6]{display:contents}.compare__circles__wrapper[data-astro-cid-5mnmxzpa]{grid-template-columns:repeat(2,1fr);display:grid;@media (width<=767px){grid-template-columns:minmax(0,1fr)}}.lch__graph__wrapper[data-astro-cid-5mnmxzpa]{inline-size:100%;margin-inline:auto;padding:50px;position:relative;container-type:inline-size;@media (width<=767px){padding:2rem}}.lch__graph[data-astro-cid-5mnmxzpa]{--block-size:80cqi;--inline-size:80cqi;block-size:var(--block-size);inline-size:var(--inline-size);clip-path:circle();border:1px solid var(--base-950);background-image: radial-gradient(in lab, lab(60% 0 0) 0%, transparent 72%), conic-gradient(in lab, lab(60% 0 80) 0deg, lab(60% 56 56) 45deg, lab(60% 80 0) 90deg, lab(60% 56 -56) 135deg, lab(60% 0 -80) 180deg, lab(60% -56 -56) 225deg, lab(60% -80 0) 270deg, lab(60% -56 56) 315deg, lab(60% 0 80) 360deg);border-radius:50%;grid-template-rows:repeat(12,1fr);grid-template-columns:repeat(12,1fr);margin-inline:auto;display:grid;& .value__label{color:var(--base-700);display:grid}& .value__label__horizontal{place-items:flex-end;margin-right:.2em}& .label__vertical__1{grid-area:6/7/7/8}& .label__vertical__2{grid-area:5/7/6/8}& .label__vertical__3{grid-area:4/7/5/8}& .label__vertical__4{grid-area:3/7/4/8}& .label__vertical__5{grid-area:2/7/3/8}& .label__vertical__6{grid-area:1/7/2/8}& .label__horizontal__1{grid-area:6/7/7/8}& .label__horizontal__2{grid-area:6/8/7/9}& .label__horizontal__3{grid-area:6/9/7/10}& .label__horizontal__4{grid-area:6/10/7/11}& .label__horizontal__5{grid-area:6/11/7/12}& .label__horizontal__6{grid-area:6/12/7/13}@container (inline-size>1560px){--block-size:600px;--inline-size:600px;background-image:repeating-radial-gradient(circle at center, transparent 0 49px, var(--base-400) 49px 50px)}}.lch__graph__oklch[data-astro-cid-5mnmxzpa]{background-image:radial-gradient(in oklab, lab(60% 0 0) 0%, transparent 72%), conic-gradient(in oklab, lab(60% 0 80) 0deg, lab(60% 56 56) 45deg, lab(60% 80 0) 90deg, lab(60% 56 -56) 135deg, lab(60% 0 -80) 180deg, lab(60% -56 -56) 225deg, lab(60% -80 0) 270deg, lab(60% -56 56) 315deg, lab(60% 0 80) 360deg)}tips-color-function-accordion[data-astro-cid-jkam4o7e],tips-elevation[data-astro-cid-e5snq242],tips-font-family[data-astro-cid-yh6sorre]{display:contents}body,body.default__fontfamily{font-family:Helvetica Neue,Hiragino Kaku Gothic ProN,Hiragino Sans,Arial,Noto Sans JP,BIZ UDPGothic,Meiryo,sans-serif}body.notosans__fontfamily{font-family:Noto Sans JP,sans-serif}body.udp__fontfamily{font-family:BIZ UDPGothic,sans-serif}body.meiryo__fontfamily{font-family:Meiryo,sans-serif}body.yu__gothic__ui__fontfamily{font-family:Yu Gothic UI,sans-serif}body.yu_gothic__fontfamily{font-family:Yu Gothic,sans-serif}.section__wrapper{--padding-block:3.5rem 5rem;--padding-inline:clamp(1rem, 4vw, 1.5rem);min-inline-size:0;position:relative;@media screen and (width>=768px){--padding-block:5rem;--padding-inline:var(--gutter-inline)}}h2{--padding-block-end:.625rem;--font-size:clamp(1.625rem, 1.1rem + 2.5vw, 2.25rem);--line-height:1.25;font-size:var(--font-size);color:var(--blue-800);line-height:var(--line-height);border-bottom:2px solid var(--blue-800);padding-block-end:var(--padding-block-end);@media screen and (width>=768px){--padding-block-end:initial;--font-size:calc(45 / 16 * 1rem);--line-height:initial}}h3{--font-size:1.375rem;--line-height:1.4;font-size:var(--font-size);color:var(--blue-700);line-height:var(--line-height);@media screen and (width>=768px){--font-size:calc(30 / 16 * 1rem);--line-height:initial}}h4{--font-size:1.125rem;--line-height:1.5;font-size:var(--font-size);color:var(--blue-600);line-height:var(--line-height);@media screen and (width>=768px){--font-size:calc(20 / 16 * 1rem);--line-height:initial}}ul{text-indent:1em hanging;& li{margin-block-start:.5rem}}code:not(.astro-code code){background-color:var(--base-300);border-radius:.2rem;padding-inline:.2rem}:where(.standard__grid,.font__weight__grid,.font__size__grid,.line__height__grid){--gap:1rem;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,33.75rem),1fr));display:grid;@media screen and (width>=768px){--gap:2rem}&>*{min-inline-size:0}}.font__weight__grid .bold{font-weight:700}.content__subttl{--display:flex;--font-size:1.125rem;--line-height:1.5;display:var(--display);font-size:var(--font-size);font-weight:700;line-height:var(--line-height);flex-wrap:wrap;align-items:baseline;gap:.5rem;@media screen and (width>=768px){--display:initial;--font-size:1.5rem;--line-height:initial}}#preview__txt__large{font-size:3rem}.color__rgb__slider__wrap{display:grid;@media screen and (width>=768px){grid-template-columns:repeat(2,1fr)}}input[type=range]{--inline-size:100%;--min-block-size:2.75rem;min-inline-size:0;inline-size:var(--inline-size);min-block-size:var(--min-block-size);margin-inline:0;@media screen and (width>=768px){--inline-size:initial;--min-block-size:initial;margin-inline:revert}}.color__rgb__slider{column-gap:1.25rem;display:flex;& input{@media screen and (width>=768px){--inline-size:90%}}}.color__value__txt{--font-size:1rem;--line-height:1.7;inline-size:fit-content;font-size:var(--font-size);font-weight:700;line-height:var(--line-height);margin-inline:auto;@media screen and (width>=768px){--font-size:calc(24 / 16 * 1rem);--line-height:initial}}.color__rgb__preview{background-color:#000;grid-template-columns:minmax(0,1fr);place-items:center;gap:1rem;inline-size:100%;margin:1rem auto 0;display:grid;@media screen and (width>=768px){grid-template-columns:repeat(2,minmax(0,1fr))}}.color__rgb__cube{touch-action:none;block-size:auto;inline-size:min(100%,33rem);display:block}.color__rgb__cube__face{cursor:crosshair;fill:#0000;stroke:#2226;stroke-width:1px}.color__rgb__cube__face:focus-visible{stroke:currentColor;stroke-width:3px;outline:none}.color__rgb__cube__point{fill:#000;pointer-events:none;stroke:#fff;stroke-width:3px;transition:cx .12s ease-out,cy .12s ease-out,fill .12s ease-out}:where(.hsl-control,.hwb-control,.lab-control,.lab-grad-control,.lch-control,.oklab-control,.oklch-control,.color-control){--grid-template-columns:minmax(0, 1fr);--gap:.125rem;--margin-block-end:.5rem;grid-template-columns:var(--grid-template-columns);gap:var(--gap);margin-block-end:var(--margin-block-end);font-weight:700;display:grid;@media screen and (width>=768px){--grid-template-columns:7rem 1fr;--gap:0;--margin-block-end:0}}.hsl-controls--rgb{--margin-block-start:2rem;--margin-inline-start:0;color:var(--base-600);margin-block-start:var(--margin-block-start);margin-inline-start:var(--margin-inline-start);@media screen and (width>=768px){--margin-block-start:8rem;--margin-inline-start:2rem}}.color-function-preview{--block-size:11rem;--inline-size:100%;margin-top:2rem;block-size:var(--block-size);inline-size:var(--inline-size);border:1px solid var(--base-950);margin-inline:auto;@media screen and (width>=768px){--block-size:300px;--inline-size:80%}}.hsl-preview{background-color:#000}.hwb-preview{background-color:red}.lab-preview{background-color:lab(100% 0 0)}.lab-grad-preview{background-image:linear-gradient(to right in lab, lab(100% 0 0), lab(0% 0 0))}.lab-grad-random-preview{--block-size:11rem;--inline-size:100%;block-size:var(--block-size);inline-size:var(--inline-size);border:1px solid var(--base-950);background-image:linear-gradient(to right in lab, lab(100% 0 0), lab(0% 0 0));margin-inline:auto;@media screen and (width>=768px){--block-size:300px;--inline-size:80%}}.lch-preview{background-color:lch(100% 115 0)}.oklab-preview{background-color:oklab(100% .4 .4)}.oklch-preview{background-color:oklch(100% 2 1)}.color-preview-wrap{--grid-template-columns:repeat(2, minmax(0, 1fr));--gap:.75rem;grid-template-columns:var(--grid-template-columns);gap:var(--gap);display:grid;@media screen and (width>=768px){--grid-template-columns:repeat(4, 1fr);--gap:2rem}}.color-preview-color{--block-size:7rem;--font-size:.75rem;block-size:var(--block-size);font-size:var(--font-size);color:var(--base-950);border:1px solid var(--base-950);padding:.35rem;font-weight:700;@media screen and (width>=768px){--block-size:200px;--font-size:calc(14 / 16 * 1rem)}}.color-preview-srgb{background-color:color(srgb .5 .5 .5)}.color-preview-srgb-linear{background-color:color(srgb-linear .5 .5 .5)}.color-preview-display-p3{background-color:color(display-p3 .5 .5 .5)}.color-preview-a98-rgb{background-color:color(a98-rgb .5 .5 .5)}.color-preview-prophoto-rgb{background-color:color(prophoto-rgb .5 .5 .5)}.color-preview-rec2020{background-color:color(rec2020 .5 .5 .5)}.color-preview-xyz{background-color:color(xyz .5 .5 .5)}.color-preview-xyz-d50{background-color:color(xyz-d50 .5 .5 .5)}.color-preview-xyz-d65{background-color:color(xyz .5 .5 .5)}.hsl-wheel-result{--grid-template-columns:minmax(0, 1fr);--gap:1rem;grid-template-columns:var(--grid-template-columns);gap:var(--gap);display:grid;@media screen and (width>=768px){--grid-template-columns:1fr 1fr;--gap:0}}.hsl-wheel-value__text{white-space:pre-line}.hsl-wheel{--inline-size:min(100%, 18.75rem);--block-size:auto;--aspect-ratio:1;--margin-inline:auto;margin-block-start:2rem;margin-inline:var(--margin-inline);block-size:var(--block-size);inline-size:var(--inline-size);aspect-ratio:var(--aspect-ratio);clip-path:circle();background:conic-gradient(in hsl, red, #ff00bf, #8000ff, #0040ff, #0ff, #00ff40, #80ff00, #ffbf00, red);@media screen and (width>=768px){--inline-size:300px;--block-size:300px;--aspect-ratio:auto;--margin-inline:0}}.compare-lab-preview-bl{background-image:linear-gradient(to right in lab, lab(100% 0 0), lab(0% 0 0))}.compare-lab-preview-bl-ok{background-image:linear-gradient(to right in oklab, lab(100% 0 0), lab(0% 0 0))}.compare-lab-preview-red{background-image:linear-gradient(to right in lab, lab(53% 80 67), lab(100% 0 0))}.compare-lab-preview-red-ok{background-image:linear-gradient(to right in oklab, lab(53% 80 67), lab(100% 0 0))}.compare-lab-preview-blue{background-image:linear-gradient(to right in lab, lab(24% 54 -73), lab(100% 0 0))}.compare-lab-preview-blue-ok{background-image:linear-gradient(to right in oklab, lab(24% 54 -73), lab(100% 0 0))}.compare-lab-preview-yellow{background-image:linear-gradient(to right in lab, lab(76% -12 72), lab(100% 0 0))}.compare-lab-preview-yellow-ok{background-image:linear-gradient(to right in oklab, lab(76% -12 72), lab(100% 0 0))}.compare-lab-preview-green{background-image:linear-gradient(to right in lab, lab(88% -84 84), lab(100% 0 0))}.compare-lab-preview-green-ok{background-image:linear-gradient(to right in oklab, lab(88% -84 84), lab(100% 0 0))}.elevation__grid{--grid-template-columns:repeat(2, minmax(0, 1fr));--gap:1.5rem;grid-template-columns:var(--grid-template-columns);gap:var(--gap);justify-content:center;display:grid;@media screen and (width>=768px){--grid-template-columns:repeat(4, 1fr);--gap:2rem}}.elevation__shadow__square{aspect-ratio:1;background-color:var(--green-300);border:1px solid var(--base-950);inline-size:100%;max-inline-size:12.5rem}.elevation__shadow__caption{--font-size:.75rem;inline-size:fit-content;font-size:var(--font-size);margin-block-start:.5rem;margin-inline:auto;@media screen and (width>=768px){--font-size:initial}}.elevation__shadow__1{filter:drop-shadow(0 2px 2px var(--base-500))}.elevation__shadow__2{filter:drop-shadow(0 2.5px 2.5px var(--base-500))}.elevation__shadow__3{filter:drop-shadow(0 3px 3px var(--base-500))}.elevation__shadow__4{filter:drop-shadow(0 4px 4px var(--base-500))}.elevation__shadow__5{filter:drop-shadow(0 5px 5px var(--base-500))}.elevation__shadow__6{filter:drop-shadow(0 6px 6px var(--base-500))}.elevation__shadow__7{filter:drop-shadow(0 7px 7px var(--base-500))}.elevation__shadow__8{filter:drop-shadow(0 8px 8px var(--base-500))}.elevation__shadow__9{filter:drop-shadow(0 9px 9px var(--base-500))}.elevation__shadow__10{filter:drop-shadow(0 10px 10px var(--base-500))}.elevation__shadow__11{filter:drop-shadow(2px 2px)}.elevation__shadow__12{filter:drop-shadow(2.5px 2.5px)}.elevation__shadow__13{filter:drop-shadow(3px 3px)}.elevation__shadow__14{filter:drop-shadow(4px 4px)}.elevation__shadow__15{filter:drop-shadow(5px 5px)}.elevation__shadow__16{filter:drop-shadow(6px 6px)}.elevation__shadow__17{filter:drop-shadow(7px 7px)}.elevation__shadow__18{filter:drop-shadow(8px 8px)}.elevation__shadow__19{filter:drop-shadow(9px 9px)}.elevation__shadow__20{filter:drop-shadow(10px 10px)}.shadow__animate__controls{--flex-wrap:wrap;--gap:.75rem;flex-wrap:var(--flex-wrap);gap:var(--gap);max-inline-size:100%;display:flex;@media screen and (width>=768px){--flex-wrap:nowrap;--gap:0}}.control__shadow__animation{border-radius:1rem;inline-size:fit-content;padding:.5rem 1rem;font-weight:700}.shadow__animate__grid{--grid-template-columns:repeat(4, minmax(0, 1fr));--padding-inline-end:.625rem;grid-template-columns:var(--grid-template-columns);padding-inline-end:var(--padding-inline-end);display:grid;@media screen and (width>=768px){--grid-template-columns:repeat(6, 1fr);--padding-inline-end:0}}.shadow__animate{position:relative;container-type:inline-size;&:before{content:"";background-color:var(--base-950);position:absolute;inset:10px -10px -10px 10px}}.shadow__animate__item{aspect-ratio:1;background-color:var(--green-300);border:1px solid var(--base-950);place-items:center;font-size:36cqi;font-weight:700;transition:transform .15s ease-in-out;display:grid;position:relative}.shadow__animate__item.is-active{transform:translate(10px,10px)}.font__family__grid .btns__wrap{--display:grid;--grid-template-columns:repeat(2, minmax(0, 1fr));--inline-size:100%;--flex-direction:column;--row-gap:.75rem;--column-gap:.75rem;--margin-inline:0;display:var(--display);grid-template-columns:var(--grid-template-columns);flex-direction:var(--flex-direction);inline-size:var(--inline-size);row-gap:var(--row-gap);column-gap:var(--column-gap);margin-inline:var(--margin-inline);@media screen and (width>=768px){--display:flex;--grid-template-columns:none;--inline-size:fit-content;--flex-direction:row;--row-gap:0;--column-gap:1rem;--margin-inline:auto}& .btn__item{--inline-size:100%;inline-size:var(--inline-size);@media screen and (width>=768px){--inline-size:fit-content}}}.font__family__samples__wrap{background-color:var(--base-50);border:1px dotted;padding:1rem}:where(.sans__serif,.system__ui){border:1px dotted var(--base-950);padding:1rem;line-height:1.7}.sans__serif{font-family:sans-serif}.system__ui{font-family:system-ui}:is(.sans__serif__grid,.sp__sans__serif__grid){& :is(.th,.td){text-align:center;border:1px dotted var(--base-950);border-collapse:collapse;place-items:center;display:grid}& .th{color:var(--paper);background-color:var(--blue-800)}}.sans__serif__grid{--grid-template-columns:.15fr .85fr;grid-template-columns:repeat(3,1fr);display:grid}.sp__sans__serif__grid{grid-template-columns:.15fr .85fr;grid-template-areas:"name name""ja txt__ja""en txt__en";display:grid;& .sp__name{--padding-block:.75rem;--padding-inline:.75rem;padding-block:var(--padding-block);padding-inline:var(--padding-inline);text-align:center;grid-area:name;display:grid;@media screen and (width>=768px){--padding-block:0;--padding-inline:5rem 0}}& .td{--padding:.5rem;padding:var(--padding);@media screen and (width>=768px){--padding:0}}& .sp__ja{grid-area:ja}& .sp__txt__ja{grid-area:txt__ja}& .sp__en{grid-area:en}& .sp__txt__en{grid-area:txt__en}}.color-scheme-grid{--grid-template-columns:minmax(3rem, .6fr) repeat(2, minmax(0, 1fr));--font-size:.8125rem;grid-template-columns:var(--grid-template-columns);font-size:var(--font-size);margin-block:2rem;display:grid;@media screen and (width>=768px){--grid-template-columns:.15fr .425fr .425fr;--font-size:initial}& :is(.th,.td){border:dotted 1px var(--base-950);border-collapse:collapse;align-items:center;padding:.25rem .5rem;display:grid}& .th{text-align:center;color:var(--paper);background-color:var(--blue-800);justify-items:center;font-weight:700}& .left{color:var(--paper);background-color:var(--blue-800)}}details::details-content{content-visibility:unset;display:grid;@media (prefers-reduced-motion:no-preference){transition-property:grid-template-rows;transition-duration:.3s}}details:not([open])::details-content{grid-template-rows:0fr}details[open]::details-content{grid-template-rows:1fr}summary{--grid-template-columns:minmax(0, 1fr) 1.125rem;--gap:.75rem;--min-block-size:3.25rem;--padding:.875rem 1rem;--font-size:1rem;--line-height:1.5;grid-template-columns:var(--grid-template-columns);align-items:center;gap:var(--gap);min-block-size:var(--min-block-size);padding:var(--padding);font-size:var(--font-size);color:var(--paper);line-height:var(--line-height);background-color:var(--blue-400);display:grid;@media screen and (width>=768px){--grid-template-columns:1fr 30px;--gap:0;--min-block-size:0;--padding:1rem 1.5rem;--font-size:calc(24 / 16 * 1rem);--line-height:initial}&:not(:last-child){border-bottom:1px solid var(--paper)}}.twister{--inline-size:1.125rem;--block-size:2px;inline-size:var(--inline-size);block-size:var(--block-size);background-color:#fff;transition:transform .5s;display:block;transform:rotate(0);@media screen and (width>=768px){--inline-size:30px;--block-size:3px}}details[open] .twister{transition:transform .5s;transform:rotate(270deg)}details[open] details .twister{transform:rotate(0)}details[open] details[open] .twister{transition:transform .5s;transform:rotate(270deg)}.accordion__overflow__hidden{background-color:var(--base-50);overflow:hidden}.accordion__content{--padding-inline:1rem;padding-block:1rem;padding-inline:var(--padding-inline);background-color:var(--base-50);@media screen and (width>=768px){--padding-inline:1.5rem}}.my__dialog{padding:0 2rem 2rem}.my__dialog__heading{text-align:center;inline-size:100%;margin-block-end:1rem;font-size:1.5rem;font-weight:700}.my__dialog__close__btn{border-block-start:none;border-inline-end:none;font-size:1.25rem;position:absolute;inset-block-start:0;inset-inline-end:0}dialog:not(:modal):not([popover]){opacity:0;transform:translate(-50%,-50%)scale(.95)}[popover]:not(:popover-open){opacity:0}.popovermenu__btn{background-color:var(--orange-300);border:none;block-size:4rem;inline-size:4rem;margin-inline:auto;position:relative;&:before,&:after{content:"";background-color:var(--paper);block-size:.25rem;inline-size:2.5rem;transition:inset-block-start .15s ease-out,transform .15s ease-out;position:absolute;inset-inline-start:50%;transform:translate(-50%)}&:before{inset-block-start:35%}&:after{inset-block-end:35%}}:root:has(.popovermenu__dialog:popover-open) .popovermenu__btn{&:before,&:after{transition:inset-block-start .15s ease-out,transform .15s ease-out;inset-block-start:50%}&:before{transform:translate(-50%,-50%)rotate(135deg)}&:after{transform:translate(-50%,-50%)rotate(-135deg)}}.popovermenu__btn__fixed{background-color:var(--base-950);opacity:.8;z-index:1000;position:fixed;inset-block-start:0;inset-inline-end:0;@media screen and (width>=768px){z-index:1;inset-block-start:6rem;inset-inline-end:3.75rem}@media screen and (width>=1560px){inset-inline-end:calc(50vw - 47.5rem)}}dialog.popovermenu__dialog{--inset-block-start:50%;--inset-inline-start:50%;--max-block-size:calc(600 / 16 * 1rem);--inline-size:90dvw;--max-inline-size:calc(500 / 16 * 1rem);--filter-drop-shadow:drop-shadow(10px 10px 0 #000);--transform:translate(-50%, -50%);block-size:70dvh;max-block-size:var(--max-block-size);inline-size:var(--inline-size);max-inline-size:var(--max-inline-size);color:var(--paper);background-color:var(--base-950);border:6px solid var(--paper);filter:var(--filter-drop-shadow);transform:var(--transform);inset-block-start:var(--inset-block-start);inset-inline-start:var(--inset-inline-start);@media screen and (width>=768px){--inset-block-start:11rem;--inset-inline-start:auto;--max-block-size:calc(700 / 16 * 1rem);--inline-size:50vw;--max-inline-size:calc((1300 / 2) / 16 * 1rem);--filter-drop-shadow:drop-shadow(30px 30px 0 #000);--transform:translate(0, 0);--inset-inline-end:calc(54 / 16 * 1rem);inset-inline-end:var(--inset-inline-end)}@media screen and (width>=1400px){--inset-inline-end:calc(50vw - calc(640 / 16 * 1rem))}& h2{color:var(--paper);border-bottom:none}}.popovermenu__linkitem__wrap{--padding-inline-start:0;margin-block-start:3rem;padding-inline-start:var(--padding-inline-start);@media screen and (width>=768px){--padding-inline-start:2rem}}.popovermenu__close__btn{border-block-start:none;border-inline-start:none;padding-block-end:.5rem;padding-inline-end:1rem;font-size:1.25rem;font-weight:700;position:absolute;inset-block-start:3rem;inset-inline-end:5%}.dads-tab{display:grid}.dads-tab__list{--grid-template-columns:repeat(2, minmax(0, 1fr));grid-template-columns:var(--grid-template-columns);display:grid;@media screen and (width>=768px){--grid-template-columns:repeat(auto-fill, minmax(170px, 1fr))}}.dads-tab__tab{--padding:.75rem;--font-size:1rem;padding:var(--padding);font-size:var(--font-size);color:var(--paper);text-align:center;background-color:var(--blue-400);border-block-start:1px solid;border-inline:1px solid;font-weight:700;@media screen and (width>=768px){--padding:1rem 1.5rem;--font-size:calc(24 / 16 * 1rem)}}.dads-tab__panel{--padding-inline:1rem;padding-block:1rem;padding-inline:var(--padding-inline);background-color:var(--base-50);@media screen and (width>=768px){--padding-inline:1.5rem}}.comment{line-height:1.7}:where(.default,.suggested,.caution,.dontuse){--margin-inline-start:0;--font-size:.75rem;--line-height:1.5;--white-space:nowrap;font-size:var(--font-size);color:#fffcf0;font-weight:400;line-height:var(--line-height);white-space:var(--white-space);border-radius:1rem;margin-inline-start:var(--margin-inline-start);padding:.2rem .5rem;@media screen and (width>=768px){--margin-inline-start:1rem;--font-size:1.2rem;--line-height:initial;--white-space:normal}}.default{background-color:#205ea6}.suggested{background-color:#24837b}.caution{background-color:#c03e35}.dontuse{background-color:#282726}.btns__wrap{--flex-wrap:wrap;--row-gap:.75rem;--column-gap:.75rem;flex-wrap:var(--flex-wrap);row-gap:var(--row-gap);column-gap:var(--column-gap);inline-size:fit-content;max-inline-size:100%;margin-inline:auto;display:flex;@media screen and (width>=768px){--flex-wrap:nowrap;--row-gap:0;--column-gap:1rem}}.btn__item{--min-block-size:2.75rem;--padding-block:.625rem;--font-size:.9375rem;min-block-size:var(--min-block-size);padding-block:var(--padding-block);font-size:var(--font-size);color:var(--paper);background-color:var(--base-950);border-radius:1rem;padding-inline:1rem;font-weight:700;@media screen and (width>=768px){--min-block-size:0;--padding-block:.25rem;--font-size:initial}}.shadow__animate__control.btn__item{--font-size:1rem;font-size:var(--font-size);border-radius:2rem;@media screen and (width>=768px){--font-size:calc(26 / 16 * 1rem)}}.section__wrapper .acc__with__anim{border-radius:none;border:none;& summary{background-color:var(--base-800)}& summary:not(:first-of-type){border-top:1px solid var(--paper);border-bottom:none}& .astro-code{margin-inline:calc(var(--padding-inline,2rem) * -1);max-inline-size:none}& .astro-code:not(:first-of-type){margin-block-start:1rem}& .linkitem__link:not(:first-child){margin-block-start:0}}.mt__1{margin-block-start:1rem}.mt__2{margin-block-start:2rem}.mt__3{margin-block-start:3rem}.mt__4{margin-block-start:4rem}.mt__5{margin-block-start:5rem}.mt__6{margin-block-start:6rem}.mt__7{margin-block-start:7rem}.mt__8{--padding-block-start:4rem;padding-block-start:var(--padding-block-start);@media screen and (width>=768px){--padding-block-start:8rem}}.mb__1{margin-block-end:1rem}.mb__2{margin-block-end:2rem}.mb__3{margin-block-end:3rem}.mb__4{margin-block-end:4rem}.mb__5{margin-block-end:5rem}.mb__6{margin-block-end:6rem}.mb__7{margin-block-end:7rem}.mb__8{margin-block-end:8rem}.lh__1{line-height:1}.lh__12{line-height:1.2}.lh__13{line-height:1.3}.lh__14{line-height:1.4}.lh__15{line-height:1.5}.lh__16{line-height:1.6}.lh__17{line-height:1.7}.lh__175{line-height:1.75}.content__wrap{--padding-block:.5rem;--padding-inline:1.5rem;padding-block:var(--padding-block);padding-inline:var(--padding-inline);background-color:var(--base-50);border-radius:.5rem;@media screen and (width>=768px){--padding-block:1rem;--padding-inline:1.5rem}}.font__size__grid .content__wrap{--grid-template-rows:auto auto 1fr;grid-template-rows:var(--grid-template-rows);display:grid;@media screen and (width>=768px){--grid-template-rows:.15fr .15fr .7fr}& input{margin-block:1rem}}.elevation__content__wrap{justify-items:center;display:grid}.popovermenu__content__wrap{--padding:1.25rem;padding:var(--padding);@media screen and (width>=768px){--padding:2rem}}.acc__with__anim .content__wrap{--padding-block:0;--padding-inline:1rem;padding-block:var(--padding-block);padding-inline:var(--padding-inline);@media screen and (width>=768px){--padding-inline:2rem;padding-block:0}&>.astro-code:first-child{margin-block-start:0}&>:last-of-type{--margin-block-end:1rem;margin-block-end:var(--margin-block-end);@media screen and (width>=768px){--margin-block-end:2rem}}&>.astro-code:last-of-type{margin-block-end:0}}.acc__with__anim .content__wrap>:first-of-type{--margin-block-start:1rem;margin-block-start:var(--margin-block-start);@media screen and (width>=768px){--margin-block-start:2rem}}.acc__with__anim .content__wrap .acc__with__anim{border:none;&::details-content{padding-inline:0}& summary{color:var(--paper);background-color:var(--cyan-600);padding:.5rem 1rem;font-weight:500}& summary:after{display:none}& .content__wrap{--padding-inline:1rem}}pre{--max-inline-size:100%;--overflow-x:auto;max-inline-size:var(--max-inline-size);overflow-x:var(--overflow-x);font-size:.8125rem;@media screen and (width>=768px){--max-inline-size:none;--overflow-x:visible}}.tips__eyebrow{color:var(--blue-700);letter-spacing:.16em;font-size:.75rem;font-weight:700}.tips__lead{color:var(--base-700);line-height:1.8}.tips__topic{min-inline-size:0;scroll-margin-block-start:5.5rem}.tips__topic>h2:first-child{padding-block-start:4rem}.tips__contents ol{--grid-template-columns:repeat(2, minmax(0, 1fr));--column-gap:.25rem;grid-template-columns:var(--grid-template-columns);gap:1.5rem var(--column-gap);text-indent:0;display:grid;@media screen and (width>=768px){--grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr));--column-gap:2rem}& li{margin:0}}