.actor-caption{visibility:hidden;color:#18465a;white-space:nowrap;pointer-events:none;background:#fff;border:1px solid #008bc5;border-radius:14px 14px 14px 3px;width:max-content;max-width:calc(100vw - 24px);padding:6px 10px;font-size:12px;line-height:1.5;animation:1.6s ease-in-out both farout-speech-arrive;position:fixed;box-shadow:0 3px #d5edf5}@media (max-width:700px){.actor-caption{padding:5px 8px;font-size:10px}}html[data-farout-motion=off] .actor-caption{display:none}@media (prefers-reduced-motion:reduce){.actor-caption{display:none}}.website-workshop{--ww-blue:#008bc5;--ww-ink:#113449;--ww-pale:#eaf7fb;width:100%;min-width:0;color:var(--ww-ink);border:1px solid color-mix(in srgb, var(--ww-blue) 25%, white);line-break:strict;background:#fff;border-radius:22px;font-family:Noto Sans JP,Yu Gothic,sans-serif;overflow:hidden;box-shadow:0 18px 46px #00577e1c;container-type:inline-size}.website-workshop *,.website-workshop :before,.website-workshop :after{box-sizing:border-box}.website-workshop button,.website-workshop input{font:inherit}.website-workshop button{cursor:pointer}:is(.website-workshop button:focus-visible,.website-workshop input:focus-visible){outline-offset:3px;outline:3px solid #f5b82e}.website-workshop-topline{color:#fff;background:var(--ww-blue);justify-content:space-between;align-items:center;gap:12px;min-height:54px;padding:10px 16px;display:flex}.website-workshop-topline p{gap:1px;margin:0;display:grid}.website-workshop-topline b{letter-spacing:.04em;font-size:13px}.website-workshop-topline small{opacity:.86;font-size:10px}.website-workshop-topline>span{letter-spacing:.15em;white-space:nowrap;font-size:9px}.website-workshop-tabs{border-bottom:1px solid #cbe7f1;grid-template-columns:repeat(3,1fr);display:grid}.website-workshop-tabs button{color:#315466;background:#fff;border:0;border-right:1px solid #dcecf2;min-width:0;min-height:50px;padding:6px 8px;font-size:11px;font-weight:700;line-height:1.35}.website-workshop-tabs button:last-child{border-right:0}.website-workshop-tabs button span{color:var(--ww-blue);letter-spacing:.1em;font-size:9px;display:block}.website-workshop-tabs button[aria-pressed=true]{color:#fff;background:#096994}.website-workshop-tabs button[aria-pressed=true] span{color:#bfeeff}.website-workshop-panel{background:linear-gradient(140deg,#fff 52%,#f2fafc);min-height:370px;padding:clamp(14px,3.3vw,24px)}.website-workshop.is-compact .website-workshop-panel{min-height:340px;padding:clamp(13px,2.7vw,19px)}.website-workshop.is-compact .website-workshop-site{min-height:245px}.website-workshop-panel-heading{justify-content:space-between;align-items:end;gap:14px;margin-bottom:14px;display:flex}.website-workshop-panel-heading small{color:var(--ww-blue);letter-spacing:.15em;font-size:9px;font-weight:800}.website-workshop-panel-heading h2{letter-spacing:.02em;max-width:25em;margin:3px 0 0;font-size:clamp(15px,3.1vw,20px);line-height:1.45}.website-workshop-choice{border:0;flex-wrap:wrap;justify-content:flex-end;gap:5px;margin:0;padding:0;display:flex}.website-workshop-choice button,.website-workshop-draw-actions button{color:#075b80;background:#fff;border:1px solid #83c6df;border-radius:99px;min-height:42px;padding:8px 13px;font-size:11px;font-weight:700}.website-workshop-choice button[aria-pressed=true]{color:#fff;border-color:var(--ww-blue);background:var(--ww-blue)}.website-workshop-site{--site-accent:#365d69;--site-bg:#f7f3eb;color:#263a40;background:var(--site-bg);border-radius:14px;min-height:270px;padding:clamp(14px,3vw,25px);transition:color .45s,background .45s,border-radius .45s;overflow:hidden}.website-workshop-site>header{border-bottom:1px solid color-mix(in srgb, var(--site-accent) 28%, transparent);justify-content:space-between;align-items:center;padding-bottom:14px;display:flex}.website-workshop-logo{letter-spacing:.12em;font-family:Georgia,serif;font-size:12px;font-weight:700}.website-workshop-menu{gap:3px;display:flex}.website-workshop-menu i{background:var(--site-accent);border-radius:50%;width:4px;height:4px}.website-workshop-site>.website-workshop-main{grid-template-columns:minmax(0,1.35fr) minmax(100px,.65fr);align-items:center;gap:12px;min-height:185px;display:grid}.website-workshop-copy small{color:var(--site-accent);letter-spacing:.14em;font-size:8px;font-weight:800}.website-workshop-copy h3{margin:6px 0 8px;font-family:Georgia,Yu Mincho,serif;font-size:clamp(20px,5vw,34px);font-weight:500;line-height:1.2}.website-workshop-copy h3 span{display:block}.website-workshop-copy p{max-width:24em;margin:0 0 13px;font-size:10px;line-height:1.8}.website-workshop-faux-button{border:1px solid var(--site-accent);border-radius:99px;align-items:center;min-height:32px;padding:6px 14px;font-size:9px;font-weight:700;display:inline-flex}.website-workshop-site svg{width:100%;max-height:162px;overflow:visible}.website-workshop-site svg circle{fill:color-mix(in srgb, var(--site-accent) 14%, white)}.website-workshop-site svg path:first-of-type{fill:var(--site-accent);opacity:.82}.website-workshop-site svg path:last-of-type{fill:none;stroke:var(--site-accent);stroke-width:2px}.website-workshop-site>footer{color:var(--site-accent);letter-spacing:.12em;justify-content:flex-end;gap:16px;font-size:7px;font-weight:800;display:flex}.website-workshop-site.is-trust{--site-accent:#006da0;--site-bg:#edf7fb;border-radius:4px}.website-workshop-site.is-trust>.website-workshop-main{grid-template-columns:minmax(0,1fr) minmax(125px,.75fr)}.website-workshop-site.is-trust .website-workshop-copy h3{font-family:Noto Sans JP,sans-serif;font-weight:800}.website-workshop-site.is-trust .website-workshop-faux-button{color:#fff;background:var(--site-accent);border-radius:3px}.website-workshop-site.is-playful{--site-accent:#008bc5;--site-bg:#fff4cb;border-radius:28px 6px}.website-workshop-site.is-playful>.website-workshop-main{grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr)}.website-workshop-site.is-playful .website-workshop-copy{order:2;transform:rotate(-1deg)}.website-workshop-site.is-playful svg{order:1;transform:rotate(8deg)}.website-workshop-site.is-playful .website-workshop-copy h3{font-family:Yu Gothic,sans-serif;font-weight:900}.website-workshop-draw-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;display:grid}.website-workshop-instruction{margin:0 0 7px;font-size:10px;line-height:1.6}.website-workshop-pad{aspect-ratio:200/156;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;width:min(100%,230px);height:auto;max-height:180px;margin-inline:auto;display:block}.pad-background{fill:#f5fbfd;stroke:#8bc9de;stroke-width:2px;stroke-dasharray:4 5}.pad-guide{fill:none;stroke:#c9e4ed;stroke-width:2px;stroke-dasharray:5 6}.pad-stroke{fill:none;stroke:#163f53;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;opacity:.58}.pad-clean{fill:#008bc514;stroke:var(--ww-blue);stroke-width:4px}.website-workshop-draw-actions{flex-wrap:wrap;gap:6px;margin-top:7px;display:flex}.website-workshop-draw-actions button{flex:auto;min-height:40px;padding-inline:9px}.website-workshop-draw-actions .is-quiet{color:#4a626e;border-color:#cadce3}.website-workshop-build{background:#fff;border:1px solid #cbe6ef;border-radius:15px;min-width:0;padding:13px}.website-workshop-build-step{color:#49636f;align-items:center;gap:8px;font-size:10px;display:flex}.website-workshop-build-step span{border:2px dashed #a5bec8;width:34px;height:28px}.website-workshop-build-step span.is-circle{border-style:solid;border-color:var(--ww-blue);border-radius:50%}.website-workshop-build-step span.is-rect{border-style:solid;border-color:var(--ww-blue);border-radius:3px}.website-workshop-build-arrow{color:var(--ww-blue);transform-origin:0;margin:2px 0 3px 12px;font-weight:900;display:block;transform:rotate(90deg)}.website-workshop-built-site{background:#eef8fb;border-radius:9px;min-height:126px;padding:13px;position:relative;overflow:hidden}.built-site-bar{background:#b4dce9;border-radius:5px;width:100%;height:5px;margin-bottom:20px;display:block}.website-workshop-built-site>strong{z-index:1;color:#0d4d6a;max-width:9em;font-size:15px;line-height:1.4;display:block;position:relative}.built-site-orbit{border:15px solid var(--ww-blue);opacity:.28;border-radius:50%;width:93px;height:93px;position:absolute;bottom:-21px;right:16px}.website-workshop-built-site>i{background:#c4dfe8;border-radius:5px;width:42%;height:5px;margin-top:10px;display:block}.built-site-card{border:2px solid var(--ww-blue);background:#fff;border-radius:5px;width:70%;min-height:72px;padding:10px;display:block}.built-site-card b{color:var(--ww-blue);font-size:9px;display:block}.built-site-card strong{margin-top:8px;font-size:13px;display:block}.built-site-card i{background:#c4dfe8;width:70%;height:4px;margin-top:8px;display:block}.built-site-card.is-muted{opacity:.35;position:absolute;bottom:-17px;right:-23%}.website-workshop-build>p{color:#315566;min-height:2.8em;margin:10px 0 0;font-size:10px;line-height:1.5}.website-workshop-compare{isolation:isolate;background:#fff;border:1px solid #badce8;border-radius:13px;min-height:255px;position:relative;overflow:hidden}.website-workshop-after{z-index:2;position:absolute;inset:0}.website-workshop-comparison-site{height:100%;min-height:255px;padding:17px}.website-workshop-comparison-site>header{border-bottom:1px solid;justify-content:space-between;gap:10px;padding-bottom:10px;font-size:8px;display:flex}.website-workshop-comparison-site>.website-workshop-comparison-main{grid-template-columns:1.15fr .85fr;align-items:center;gap:8px;min-height:185px;display:grid}.website-workshop-comparison-site small{letter-spacing:.13em;font-size:8px}.website-workshop-comparison-site h3{margin:7px 0;font-size:clamp(17px,4vw,27px);line-height:1.35}.website-workshop-comparison-site p{max-width:25em;margin:0 0 12px;font-size:9px;line-height:1.7}.website-workshop-comparison-site>.website-workshop-comparison-main span{border:1px solid;padding:7px 12px;font-size:8px;display:inline-block}.website-workshop-comparison-site svg{width:100%;max-height:150px}.website-workshop-comparison-site svg path:first-child{fill:#c7d2d7}.website-workshop-comparison-site svg path:nth-child(2){fill:none;stroke:#83949b;stroke-width:3px}.website-workshop-comparison-site svg circle{fill:#83949b}.website-workshop-comparison-site.is-before{color:#4c5559;background:#eceff0;font-family:Arial,sans-serif}.website-workshop-comparison-site.is-before h3{font-weight:600}.website-workshop-comparison-site.is-after{color:#053f5a;background:linear-gradient(130deg,#eefaff,#fff 65%)}.website-workshop-comparison-site.is-after>header b{color:var(--ww-blue);letter-spacing:.12em}.website-workshop-comparison-site.is-after h3{font-family:Georgia,Yu Mincho,serif;font-weight:500}.website-workshop-comparison-site.is-after>.website-workshop-comparison-main span{color:#fff;border-color:var(--ww-blue);background:var(--ww-blue);border-radius:99px}.website-workshop-comparison-site.is-after svg path:first-child{fill:#b8e5f4}.website-workshop-comparison-site.is-after svg path:nth-child(2){stroke:var(--ww-blue)}.website-workshop-comparison-site.is-after svg circle{fill:var(--ww-blue)}.website-workshop-divider{z-index:4;pointer-events:none;background:#f5b82e;width:2px;position:absolute;top:0;bottom:0;transform:translate(-1px)}.website-workshop-divider i{color:#163f53;background:#f5b82e;border-radius:50%;place-items:center;width:30px;height:30px;font-style:normal;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 3px 10px #0000002e}.website-workshop-before-label,.website-workshop-after-label{z-index:5;color:#fff;pointer-events:none;background:#0a2d3ccc;border-radius:99px;padding:4px 7px;font-size:8px;font-weight:800;position:absolute;top:9px}.website-workshop-before-label{right:9px}.website-workshop-compare-labels{justify-content:space-between;align-items:center;min-height:30px;padding-bottom:6px;display:flex}.website-workshop-compare-labels span{font-size:10px;display:inline-block;position:static}.website-workshop-after-label{background:#007caf;left:9px}.website-workshop-range-row{color:#456573;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;margin-top:10px;font-size:9px;display:grid}.website-workshop-range-row input{width:100%;min-height:32px;accent-color:var(--ww-blue);cursor:ew-resize;margin:0}.website-workshop-panel-heading output{color:#075b80;flex:none;font-size:11px;font-weight:800}html[data-farout-motion=off] .website-workshop *,html[data-farout-motion=off] .website-workshop :before,html[data-farout-motion=off] .website-workshop :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){.website-workshop *,.website-workshop :before,.website-workshop :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@container (width<=440px){.website-workshop-topline>span{display:none}.website-workshop-tabs button{padding-inline:4px;font-size:10px}.website-workshop-panel{min-height:0;padding:14px 12px 16px}.website-workshop-panel-heading{align-items:start;display:grid}.website-workshop-choice{justify-content:stretch}.website-workshop-choice button{flex:1;padding-inline:8px}.website-workshop-site>.website-workshop-main{grid-template-columns:minmax(0,1.2fr) minmax(78px,.8fr)}.website-workshop-site.is-playful>.website-workshop-main{grid-template-columns:minmax(82px,.7fr) minmax(0,1.3fr)}.website-workshop-copy h3{font-size:20px}.website-workshop-copy p{font-size:9px}.website-workshop-site>footer{justify-content:space-between;gap:5px}.website-workshop-draw-grid{grid-template-columns:1fr}.website-workshop-build{grid-template-columns:auto 18px 1fr;align-items:center;gap:6px;display:grid}.website-workshop-build-arrow{margin:0;transform:none}.website-workshop-built-site{min-height:106px}.website-workshop-build>p{grid-column:1/-1}.website-workshop-comparison-site{padding:14px 10px}.website-workshop-comparison-site>header span{display:none}.website-workshop-comparison-site>.website-workshop-comparison-main{grid-template-columns:1.25fr .75fr}.website-workshop-comparison-site h3{font-size:17px}.website-workshop-comparison-site p{font-size:8px}}@container (width<=300px){.website-workshop-site>.website-workshop-main,.website-workshop-site.is-playful>.website-workshop-main{grid-template-columns:minmax(0,1fr)}.website-workshop-site>.website-workshop-main>svg{display:none}.website-workshop-comparison-site>.website-workshop-comparison-main{grid-template-columns:minmax(0,1fr) 38px;gap:8px}.website-workshop-comparison-site h3{font-size:15px}}.character-secret-layer{contain:strict;pointer-events:none;z-index:88;position:fixed;inset:0;overflow:hidden}.character-secret-status{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.character-secret-confetti{width:0;height:0;position:absolute}.character-secret-confetti i{background:var(--secret-color);border-radius:2px;width:7px;height:12px;animation:1.8s ease-out both farout-secret-confetti;position:absolute}@keyframes farout-secret-confetti{0%{opacity:0;transform:translate(0)rotate(0)}12%{opacity:1}80%{opacity:1}to{opacity:0;transform:translate(var(--secret-x), var(--secret-y)) rotate(var(--secret-turn))}}.character-talk[data-secret=true] .character-greet-button{animation:1.2s ease-in-out both farout-secret-joy}@keyframes farout-secret-joy{0%,to{translate:0}30%,65%{translate:0 -6px}48%,82%{translate:0}}html[data-farout-motion=off] .character-secret-layer{display:none}@media (prefers-reduced-motion:reduce){.character-secret-layer{display:none}.character-talk[data-secret=true] .character-greet-button{animation:none}}
