@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans','Noto Sans TC',sans-serif;color:#eeeae3;background:#12141b;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}.site-shell{max-width:1600px;margin:auto;padding:0 clamp(20px,4.2vw,72px)}.topbar{height:86px;display:flex;align-items:center;border-bottom:1px solid #373941;gap:32px}.brand{display:flex;align-items:center;gap:13px;font-size:15px;font-weight:800;letter-spacing:.08em;white-space:nowrap}.brand small{display:block;font:9px 'DM Mono',monospace;letter-spacing:.35em;color:#9a9ba3;margin-top:1px}.brand-mark{display:flex;align-items:flex-end;gap:3px;height:27px;width:30px;transform:skewY(-14deg)}.brand-mark i{width:7px;background:#e66550;display:block}.brand-mark i:nth-child(1){height:15px}.brand-mark i:nth-child(2){height:25px;background:#eac27c}.brand-mark i:nth-child(3){height:19px;background:#82cab9}.topbar nav{display:flex;align-items:center;gap:0;margin:auto}.nav-link{appearance:none;border:0;background:transparent;color:#aaaab0;padding:14px 19px;font-size:13px;font-weight:700;white-space:nowrap}.nav-link:hover,.nav-link.active{color:#f0ece6}.nav-link.active:after{content:'';display:block;height:3px;background:#ea7158;transform:translateY(16px)}.top-index,.kicker,.micro-label,.section-number,.panel-count,.stage-bar,.stage-footer,.trace-legend,.trace-foot,.axis-label,.step-tag,.result-top,.method-index,footer{font-family:'DM Mono',monospace;letter-spacing:.08em}.top-index{font-size:10px;color:#787a83;white-space:nowrap}.hero-intro{padding:74px 0 67px}.kicker{display:flex;align-items:center;gap:12px;color:#b9b5af;font-size:10px;letter-spacing:.16em}.signal-dot{width:8px;height:8px;border-radius:50%;background:#e46b51;box-shadow:0 0 16px #e46b51}.kicker-line{height:1px;width:46px;background:#777982}.hero-intro h1{font-size:clamp(50px,7.3vw,108px);line-height:1.12;letter-spacing:-.075em;margin:24px 0 20px;font-weight:800}.hero-intro h1 em{font-style:normal;color:#e77b61}.hero-intro p{font-size:15px;line-height:1.95;color:#a7a6aa;margin:0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.section-number{font-size:11px;color:#e67f65;letter-spacing:.17em}.section-head h2{font-size:clamp(25px,3vw,39px);letter-spacing:-.04em;margin:9px 0 0}.section-head p{color:#96979e;font-size:13px;line-height:1.8;text-align:right;margin:0}.studio-grid{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(290px,.75fr);gap:18px}.visual-stage,.control-panel,.trace-panel,.create-controls,.create-result{background:#1b1d25;border:1px solid #393b45}.visual-stage{padding:22px 25px 21px}.stage-bar,.result-top{display:flex;justify-content:space-between;font-size:10px;color:#9496a0}.stage-bar b,.result-top b{color:#eae8e3}.stage-live{display:flex;gap:9px;align-items:center}.stage-live>span:first-child{width:6px;height:6px;background:#d76f57;border-radius:50%}.stage-live.playing>span:first-child{box-shadow:0 0 12px #e57659;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}.flag-frame{position:relative;aspect-ratio:8/5;margin:23px 0;background:#11131a;overflow:hidden}.flag-frame img{width:100%;height:100%;display:block;object-fit:fill}.flag-frame canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.flag-corner{position:absolute;width:14px;height:14px;border:2px solid #e8e3da;opacity:.9}.flag-corner.tl{left:0;top:0;border-right:0;border-bottom:0}.flag-corner.tr{right:0;top:0;border-left:0;border-bottom:0}.flag-corner.bl{left:0;bottom:0;border-right:0;border-top:0}.flag-corner.br{right:0;bottom:0;border-left:0;border-top:0}.stage-footer{display:flex;align-items:end;justify-content:space-between;gap:12px}.micro-label{font-size:10px;color:#9597a0;letter-spacing:.14em}.stage-footer strong{display:block;font-size:28px;letter-spacing:-.05em;font-weight:500;margin-top:3px}.stage-footer strong small{font-size:12px;color:#8f919a;letter-spacing:0}.scan-note{font-size:11px;color:#aaa7a2}.scan-note span{color:#e8795e}.time-readout{font-size:11px;color:#bab8b2}.control-panel{padding:24px;display:flex;flex-direction:column}.panel-top{display:flex;justify-content:space-between;padding-bottom:15px}.panel-count{color:#666974;font-size:10px}.flag-list{border-top:1px solid #343640}.flag-option{width:100%;border:0;border-bottom:1px solid #343640;background:transparent;color:#aaa9ac;padding:15px 5px;display:grid;grid-template-columns:27px 1fr auto;align-items:center;text-align:left;gap:13px}.flag-option:hover,.flag-option.selected{color:#f5efe7}.flag-option.selected{background:#282931}.flag-option .number{font:10px 'DM Mono',monospace;color:#6d707b}.flag-option .name{font-size:18px;font-weight:700;letter-spacing:-.03em}.flag-option .eng{font:10px 'DM Mono',monospace;letter-spacing:.08em;color:#757781}.flag-option.selected .number,.flag-option.selected .eng{color:#e88367}.play-controls{display:flex;gap:9px;margin-top:auto;padding-top:25px}.primary-button{flex:1;border:0;background:#e47a60;color:#1b1d25;min-height:55px;display:flex;align-items:center;gap:11px;padding:0 16px;font-size:13px;font-weight:800;text-align:left}.primary-button:hover{background:#f19477}.primary-button #play-icon{font-size:16px}.button-arrow{margin-left:auto;font-size:18px}.icon-button{width:55px;border:1px solid #5a5b62;background:transparent;color:#e8e5df;font-size:26px}.icon-button:hover{border-color:#e47a60;color:#e47a60}.panel-note{border-top:1px solid #363841;margin-top:24px;padding-top:20px;display:flex;gap:13px;color:#92939b}.panel-note span{font-size:20px;color:#e68165}.panel-note p{font-size:12px;line-height:1.75;margin:0}.trace-panel{margin-top:18px;padding:23px 26px 19px}.trace-heading{display:flex;justify-content:space-between;align-items:center}.trace-heading h3{font-size:18px;margin:7px 0 0}.trace-legend{font-size:10px;color:#92939b;display:flex;align-items:center;gap:7px}.trace-legend i{width:14px;height:2px;background:#e58065}.trace-legend span{margin-left:12px;color:#686a73}.trace-canvas-wrap{position:relative;margin-top:18px;padding:8px 0 0 61px}.trace-canvas-wrap canvas{display:block;width:100%;height:145px}.axis-label{position:absolute;left:0;font-size:9px;color:#72747d}.axis-label.high{top:0}.axis-label.low{bottom:0}.trace-foot{display:flex;justify-content:space-between;margin:8px 0 0 61px;font-size:9px;color:#666873}.trace-foot span:nth-child(2){color:#858690}.create-section{margin-top:130px}.create-grid{display:grid;grid-template-columns:minmax(290px,.7fr) minmax(0,1.3fr);gap:18px}.create-controls{padding:29px 30px}.step-tag{font-size:11px;color:#e77c61}.create-controls h3{font-size:31px;letter-spacing:-.055em;margin:20px 0 10px}.create-copy{font-size:13px;color:#a3a2a7;line-height:1.85;max-width:440px;margin:0 0 26px}.record-row{display:flex;gap:9px}.record-button,.upload-button{height:50px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;font-size:13px;font-weight:700;white-space:nowrap}.record-button{border:0;background:#e47960;color:#171921}.record-button:hover{background:#f18a70}.record-button.recording{background:#c94643;color:#fff}.record-indicator{width:9px;height:9px;background:currentColor;border-radius:50%}.record-button.recording .record-indicator{animation:pulse 1s infinite}.upload-button{border:1px solid #5c5e68;color:#d9d6d1;cursor:pointer}.upload-button:hover{border-color:#e47960;color:#e47960}.record-feedback{min-height:38px;padding-top:12px;font-size:11px;color:#858790}.record-feedback.error{color:#f19d7a}.divider{display:flex;align-items:center;gap:12px;color:#777982;font-size:11px;margin:15px 0}.divider:before,.divider:after{content:'';height:1px;background:#353740;flex:1}.sample-button{width:100%;background:#252730;border:1px solid #41434e;color:#e7e3db;text-align:left;padding:16px;font-size:13px}.sample-button:hover{border-color:#e47960}.sample-button span{float:right;color:#e47960}.palette-control{border-top:1px solid #393b44;margin-top:34px;padding-top:22px}.palette-options{display:flex;gap:10px;margin-top:14px}.palette-choice{display:flex;overflow:hidden;padding:3px;border:1px solid #555761;background:#22242b;width:73px;height:32px}.palette-choice.selected{border-color:#e98264}.palette-choice i{display:block;flex:1;height:100%}.create-result{padding:23px 25px 18px;display:flex;flex-direction:column}.result-star{color:#e98669;font-size:16px}.result-frame{aspect-ratio:8/5;background:#172a45;margin-top:19px;display:flex;align-items:center;justify-content:center;overflow:hidden}.result-frame svg{display:block;width:100%;height:100%}.empty-result{text-align:center;color:#8b9cac}.empty-wave{font-size:100px;font-weight:300;line-height:1;color:#6d94ac}.empty-result p{font-size:12px}.result-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:52px}.result-bottom p{font-size:11px;color:#888993;line-height:1.5}.text-button{border:0;background:transparent;color:#e98468;font-size:12px;font-weight:700;white-space:nowrap}.text-button:disabled{color:#686973}.create-result audio{width:100%;height:35px;margin-top:7px}.method-section{margin:135px 0 110px;padding-top:29px;border-top:1px solid #43454b}.method-header{display:flex;align-items:end;justify-content:space-between}.method-header h2{font-size:31px;letter-spacing:-.05em;margin:0}.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:31px}.method-grid>div{border-top:1px solid #484a51;padding-top:18px}.method-index{color:#84868e;font-size:10px}.method-symbol{height:90px;color:#e57c60;font-size:57px;line-height:90px}.method-grid h3{font-size:20px;margin:0 0 9px}.method-grid p{max-width:360px;color:#999a9f;font-size:12px;line-height:1.85;margin:0}footer{border-top:1px solid #3a3c44;min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#777982;font-size:10px}footer a{color:#e6846a}footer a:hover{text-decoration:underline}
@media(max-width:900px){.top-index{display:none}.studio-grid,.create-grid{grid-template-columns:1fr}.control-panel{min-height:380px}.flag-list{display:grid;grid-template-columns:1fr 1fr}.flag-option:nth-child(odd){border-right:1px solid #343640}.play-controls{padding-top:22px}.hero-intro{padding:58px 0}.create-section{margin-top:92px}.method-grid{gap:15px}}
@media(max-width:600px){.site-shell{padding:0 16px}.topbar{height:73px;gap:8px}.brand{font-size:11px;gap:7px}.brand-mark{transform:scale(.8) skewY(-14deg);transform-origin:left center;width:24px}.brand small{font-size:7px}.topbar nav{margin-left:auto}.nav-link{font-size:11px;padding:13px 6px}.about-link{display:none}.hero-intro h1{font-size:clamp(44px,10vw,65px)}.hero-intro p{font-size:13px}.section-head{align-items:start}.section-head p{max-width:140px;font-size:10px}.visual-stage,.control-panel,.trace-panel,.create-controls,.create-result{padding:17px}.stage-bar{font-size:8px}.flag-frame{margin:16px 0}.stage-footer strong{font-size:21px}.scan-note{font-size:9px}.time-readout{font-size:9px}.trace-panel{margin-top:12px}.trace-heading h3{font-size:15px}.trace-legend span{display:none}.trace-canvas-wrap{padding-left:45px}.trace-foot{margin-left:45px}.trace-foot span:nth-child(2){display:none}.flag-option .name{font-size:15px}.flag-option{gap:7px;padding:13px 3px;grid-template-columns:18px 1fr}.flag-option .eng{display:none}.create-section{margin-top:80px}.create-controls h3{font-size:25px}.record-row{flex-wrap:wrap}.record-button,.upload-button{flex:1}.method-section{margin:90px 0 65px}.method-grid{grid-template-columns:1fr;gap:27px}.method-symbol{height:65px;font-size:44px;line-height:65px}footer{flex-wrap:wrap;justify-content:space-between;padding:20px 0}footer span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.download-audio{display:block;margin-top:14px;color:#b8aaa3;font-size:11px;text-decoration:underline;text-underline-offset:3px}.download-audio:hover{color:#f19477}
#paint-canvas{z-index:1}#scan-canvas{z-index:2}.flag-corner{z-index:3}.primary-button:disabled{background:#4a4b53;color:#b3b1b0}

/* The atlas is the front door: a chart table with an accessible country index. */
.hero-intro{display:none}.atlas-section{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:min(800px,calc(100svh - 86px));border:1px solid #53616a;background:#0b2737;margin:24px 0 110px;box-shadow:0 26px 70px #0005}.atlas-chart{min-height:700px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 55% 40%,#174357 0,#0e3143 48%,#092333 100%);isolation:isolate}.atlas-chart:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff05 4px 5px);mix-blend-mode:screen}.atlas-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#c8b58a12 1px,transparent 1px),linear-gradient(90deg,#c8b58a12 1px,transparent 1px);background-size:80px 80px;opacity:.6}#atlas-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}#atlas-canvas:active{cursor:grabbing}.atlas-heading{position:absolute;left:clamp(24px,4vw,60px);top:clamp(30px,5vh,65px);pointer-events:none;text-shadow:0 2px 18px #0a263b}.atlas-eyebrow,.atlas-sidebar-top,.atlas-log-kicker,.atlas-coordinates{font:10px 'DM Mono',monospace;letter-spacing:.19em;color:#e5c89a}.atlas-heading h1{font-size:clamp(45px,4.6vw,78px);line-height:1.05;letter-spacing:-.07em;margin:18px 0 17px;color:#f7ead1}.atlas-heading h1 em{font-style:normal;color:#efba82}.atlas-heading p{font-size:13px;line-height:1.8;color:#e3e4d8;margin:0}.atlas-compass{position:absolute;right:29px;top:28px;display:flex;align-items:center;flex-direction:column;color:#ecd5ac;text-shadow:0 1px 9px #071d2c;font-family:Georgia,serif}.atlas-compass b{font-size:39px;font-weight:400;line-height:1}.atlas-compass span,.atlas-compass small{font-size:12px}.atlas-zoom{position:absolute;bottom:52px;left:27px;display:flex;gap:5px}.atlas-zoom button{width:37px;height:37px;background:#163849d9;border:1px solid #bda47d7a;color:#f3d9a5;font-size:21px}.atlas-zoom button:hover{background:#26576a}.atlas-coordinates{position:absolute;bottom:19px;left:28px;color:#e2d0af;font-size:9px}.atlas-sidebar{background:#e5dcc7;color:#1b3540;display:flex;flex-direction:column;min-height:0;border-left:1px solid #a49c87}.atlas-sidebar-top{padding:23px 22px 14px;display:flex;justify-content:space-between;align-items:center;color:#57717b}.atlas-sidebar-top strong{font-size:25px;letter-spacing:-.06em;color:#243c46}.atlas-search{margin:0 21px 13px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #8b9a96;color:#385565}.atlas-search span{font-size:25px}.atlas-search input{width:100%;padding:10px 0;border:0;outline:0;background:transparent;color:#1f3841;font-size:13px}.atlas-search input::placeholder{color:#738783}.atlas-regions{display:flex;gap:6px;overflow:auto;padding:0 21px 15px;scrollbar-width:none}.atlas-regions button{white-space:nowrap;border:1px solid #a0aaa2;background:transparent;padding:6px 9px;color:#45616a;font-size:10px}.atlas-regions button.active,.atlas-regions button:hover{background:#234250;border-color:#234250;color:#f7ebd6}.atlas-list{height:285px;overflow:auto;border-top:1px solid #c2c2ae;border-bottom:1px solid #bcbcae;scrollbar-color:#9eaa9d transparent}.atlas-country{width:100%;border:0;border-bottom:1px solid #c5c8b8;background:transparent;display:flex;align-items:center;gap:11px;text-align:left;padding:9px 20px;color:#28404a}.atlas-country:hover,.atlas-country.selected{background:#c9d6cd}.atlas-country img{width:28px;height:19px;object-fit:contain;box-shadow:0 1px 3px #25434a44}.atlas-country span{min-width:0;flex:1}.atlas-country b{display:block;font-size:12px}.atlas-country small{display:block;color:#627775;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.atlas-country i{font:10px 'DM Mono',monospace;font-style:normal;color:#83948c}.atlas-log{padding:21px;min-height:194px;display:flex;flex-direction:column;flex:1}.atlas-log-kicker{color:#7d745f}.atlas-log-body{flex:1}.atlas-log-placeholder{font-family:Georgia,serif;font-size:26px;line-height:1.25;color:#60716b;margin-top:22px}.atlas-log-main{display:flex;gap:15px;align-items:center;margin-top:17px}.atlas-log-main img{width:87px;max-height:61px;object-fit:contain;box-shadow:0 3px 10px #35433d40}.atlas-log-main strong{font-size:21px;display:block}.atlas-log-main small{font:10px 'DM Mono',monospace;letter-spacing:.08em;color:#708176}.atlas-log-actions{display:flex;gap:7px;margin-top:17px}.atlas-log-actions button,.atlas-log-actions a{flex:1;display:flex;align-items:center;justify-content:center;min-height:35px;border:1px solid #355d60;background:#284d58;color:#f3ead9;font-size:11px;font-weight:700}.atlas-log-actions a{background:transparent;color:#284d58}.atlas-log-actions button:disabled{opacity:.5}.atlas-hint{font-size:10px;color:#667b76;margin:8px 0 0}.atlas-section~.mode-section{scroll-margin-top:24px}
@media(max-width:1100px){.atlas-section{grid-template-columns:minmax(0,1fr) 300px}.atlas-heading h1{font-size:clamp(42px,5vw,66px)}}
@media(max-width:800px){.atlas-section{display:flex;flex-direction:column;margin:12px 0 80px}.atlas-chart{min-height:clamp(450px,61svh,650px)}.atlas-sidebar{border-left:0;border-top:1px solid #a49c87}.atlas-list{height:190px}.atlas-log{min-height:170px}.atlas-heading{top:27px;left:24px}.atlas-heading h1{font-size:clamp(39px,8vw,62px)}.atlas-heading p{font-size:11px}.atlas-compass{right:18px;top:18px}}
@media(max-width:600px){.atlas-chart{min-height:445px}.atlas-heading h1{font-size:43px}.atlas-heading p{max-width:255px}.atlas-compass{transform:scale(.7);transform-origin:top right}.atlas-zoom{bottom:48px;left:14px}.atlas-coordinates{left:14px;font-size:8px}.atlas-sidebar-top{padding-top:17px}}

/* Portolan-inspired treasure chart, drawn in CSS rather than using a scanned map. */
.atlas-section{border:5px solid #725d3e;outline:1px solid #bd9e69;outline-offset:4px;background:#d3c39e;box-shadow:0 20px 55px #0006,inset 0 0 0 2px #e9d5a7}
.atlas-chart{background:radial-gradient(ellipse at 48% 43%,#d5d4b6 0%,#c4c4a7 50%,#adad8c 100%)}
.atlas-chart:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 80px #66482b50,inset 0 0 0 1px #f5e6c088;background:radial-gradient(circle at 22% 29%,#8d704b1a 0 1px,transparent 2px),radial-gradient(circle at 73% 63%,#674b3212 0 1px,transparent 2px);background-size:17px 19px,23px 29px}
.atlas-chart:after{background:repeating-linear-gradient(0deg,transparent 0 4px,#674b3206 5px 6px);mix-blend-mode:multiply}
.atlas-grid{background-image:linear-gradient(#785e3a17 1px,transparent 1px),linear-gradient(90deg,#785e3a17 1px,transparent 1px);background-size:80px 80px;opacity:.3}
.atlas-heading{text-shadow:none}.atlas-heading h1{color:#2d443b}.atlas-heading h1 em{color:#a95435}.atlas-heading p{color:#3e584a;font-weight:600}.atlas-eyebrow{color:#805f3b}.atlas-compass{color:#6d4c2d;text-shadow:none}.atlas-compass b{font-size:48px}.atlas-coordinates{color:#66513a}.atlas-zoom button{background:#e9d7acde;border-color:#775b39;color:#3d4e40}.atlas-zoom button:hover{background:#f3e1b8}
.atlas-sidebar{background:linear-gradient(120deg,#efe3c7,#e2d2ad);border-left:2px solid #7e6949}.atlas-sidebar-top{color:#73634c}.atlas-sidebar-top strong{color:#4b4938}.atlas-search{border-color:#9f8b69;color:#5b503d}.atlas-search input{color:#35463a}.atlas-search input::placeholder{color:#7e7969}.atlas-regions button{border-color:#aa9672;color:#65573f}.atlas-regions button.active,.atlas-regions button:hover{background:#364d41;border-color:#364d41;color:#f8e8c4}.atlas-list{border-color:#b6a681;scrollbar-color:#a8936d transparent}.atlas-country{border-color:#c8b998;color:#354b3e}.atlas-country:hover,.atlas-country.selected{background:#d4c49f}.atlas-country small{color:#77715d}.atlas-log-kicker{color:#8c6746}.atlas-log-placeholder{color:#77684e}.atlas-log-actions button{background:#a45435;border-color:#7e452e;color:#fff0d2}.atlas-log-actions button:hover{background:#874029}.atlas-hint{color:#71634f}
.flag-dialog{width:min(1180px,calc(100vw - 34px));max-width:none;max-height:calc(100dvh - 34px);overflow:auto;margin:auto;padding:30px;background:#151b20;color:#eeeae3;border:1px solid #b99562;box-shadow:0 28px 90px #0009}.flag-dialog::backdrop{background:#091b20c9;backdrop-filter:blur(5px)}.flag-dialog-close{position:sticky;top:0;float:right;z-index:20;width:36px;height:36px;border:1px solid #a38761;background:#2b3636;color:#f4e4c4;font-size:24px;line-height:1}.flag-dialog-close:hover{background:#9e573b}.flag-dialog #listen-section{margin:0}.flag-dialog .section-head{padding-right:48px}.flag-dialog .section-head h2{color:#f3e6d4}.flag-dialog .visual-stage,.flag-dialog .control-panel,.flag-dialog .trace-panel{background:#1e262a;border-color:#59615c}.flag-dialog .trace-panel{margin-top:14px}
.flag-dialog .flag-frame{width:min(100%,540px);margin:16px auto}.flag-dialog .visual-stage,.flag-dialog .control-panel{padding:18px 21px}.flag-dialog .flag-option{padding:10px 5px}.flag-dialog .trace-panel{padding:16px 21px}.flag-dialog .trace-canvas-wrap canvas{height:74px}
@media(max-width:800px){.atlas-sidebar{border-left:0;border-top:2px solid #7e6949}.flag-dialog{padding:17px;max-height:calc(100dvh - 14px);width:calc(100vw - 14px)}.flag-dialog .section-head{padding-right:42px}.flag-dialog .control-panel{min-height:unset}.flag-dialog .trace-panel{margin-bottom:4px}}
@media(max-width:600px){.atlas-heading{top:19px}.atlas-heading h1{font-size:39px;margin-top:11px;margin-bottom:10px}.atlas-heading p{font-size:10px}.flag-dialog{padding:13px}.flag-dialog .section-head{margin:8px 0 19px}.flag-dialog .section-head p{display:none}.flag-dialog .studio-grid{gap:10px}.flag-dialog .trace-panel{margin-top:10px}}

/* Keep the experience focused: flag, sound control, then its trace. */
.atlas-section{margin-bottom:0}.create-section{margin-top:72px}.flag-dialog{width:min(790px,calc(100vw - 24px));padding:22px}.flag-dialog .studio-grid{display:block}.flag-dialog .visual-stage{padding:18px 20px}.flag-dialog .flag-frame{width:min(100%,520px);margin:12px auto}.flag-dialog .play-controls{margin-top:13px;padding-top:0}.flag-dialog .primary-button,.flag-dialog .icon-button{min-height:48px}.flag-dialog .download-audio{margin-top:10px}.flag-dialog .trace-panel{margin-top:10px;padding:14px 18px}.flag-dialog .trace-canvas-wrap{margin-top:10px}.flag-dialog .trace-canvas-wrap canvas{height:82px}
.method-section{display:block;margin:56px 0 65px;padding:0;border:0}.method-section summary{list-style:none;cursor:pointer;border-top:1px solid #43454b;border-bottom:1px solid #43454b;padding:16px 4px;font-size:16px;font-weight:700}.method-section summary::-webkit-details-marker{display:none}.method-section summary:after{content:'＋';float:right;color:#e68262}.method-section[open] summary:after{content:'−'}.method-section .method-grid{margin:20px 0 0}.method-section .method-grid>div{padding-top:14px}.method-section .method-grid h3{font-size:16px;margin:9px 0 5px}.method-section .method-grid p{font-size:11px}.atlas-chart #atlas-canvas{touch-action:pan-y}.atlas-chart.is-zoomed #atlas-canvas{touch-action:none}
@media(max-width:800px){.flag-dialog{width:calc(100vw - 14px);padding:14px}.flag-dialog .section-head{margin-bottom:15px}.flag-dialog .visual-stage{padding:15px}.flag-dialog .trace-panel{padding:13px}.create-section{margin-top:54px}}
@media(max-width:600px){.atlas-section{margin:10px 0 0}.atlas-chart{height:340px;min-height:340px}.atlas-heading{top:14px;left:17px}.atlas-heading h1{font-size:clamp(30px,8vw,38px);line-height:1.03;margin:9px 0}.atlas-heading p{font-size:11px}.atlas-eyebrow{font-size:8px}.atlas-compass{display:none}.atlas-zoom{top:14px;right:12px;bottom:auto;left:auto;flex-direction:column;gap:4px}.atlas-zoom button{width:34px;height:34px}.atlas-coordinates{left:14px;bottom:10px;font-size:8px}.atlas-sidebar-top{padding:12px 16px 3px}.atlas-search{margin:0 16px 8px}.atlas-regions{padding:0 16px 11px}.atlas-list{height:205px}.atlas-country{min-height:46px;padding:6px 16px}.atlas-log{min-height:0;padding:14px 16px}.atlas-log-main{margin-top:11px}.atlas-log-main img{width:66px;max-height:50px}.atlas-log-main strong{font-size:18px}.atlas-log-actions{margin-top:11px}.atlas-log-actions button{min-height:44px}.atlas-log-placeholder{font-size:18px;margin-top:10px}.flag-dialog .section-head{margin:0 0 12px}.flag-dialog .section-head h2{font-size:24px}.flag-dialog .visual-stage{padding:12px}.flag-dialog .flag-frame{margin:9px auto}.flag-dialog .play-controls{margin-top:11px}.flag-dialog .primary-button,.flag-dialog .icon-button{min-height:48px}.flag-dialog .download-audio{font-size:10px}.flag-dialog .trace-panel{margin-top:8px}.flag-dialog .trace-canvas-wrap canvas{height:88px}.create-section{margin-top:44px}.create-controls,.create-result{padding:18px}.create-controls h3{margin:11px 0 5px}.create-copy{margin-bottom:15px}.palette-control{margin-top:18px}.method-section{margin:42px 0}.method-grid{grid-template-columns:1fr;gap:12px}footer{gap:10px}footer span:nth-child(2){display:block}footer span{width:100%}}
@media(max-width:360px){.topbar{gap:2px}.brand{font-size:10px;gap:3px}.brand small{font-size:6px}.topbar nav{gap:0}.nav-link{font-size:10px;padding:13px 4px}.atlas-chart{height:315px;min-height:315px}.atlas-heading h1{font-size:30px}.atlas-heading p{font-size:10px}.atlas-zoom{top:11px}.atlas-zoom button{width:31px;height:31px}}
@media(max-width:600px){.atlas-coordinates{display:none}}
@media(max-width:600px){.atlas-zoom button{width:42px;height:42px}.atlas-search input{min-height:44px}.atlas-regions button{min-height:36px;padding:8px 11px}.flag-dialog-close{width:44px;height:44px}}
.atlas-log[hidden]{display:none}.atlas-sidebar:not(.has-destination) .atlas-list{flex:1;height:auto}
@media(max-width:800px){.atlas-sidebar:not(.has-destination) .atlas-list{flex:none;height:205px}}

/* Keep the chart and its index inside the first viewport. */
.atlas-section{height:calc(100dvh - 110px);min-height:0;grid-template-rows:minmax(0,1fr);margin-top:14px}
.atlas-chart,.atlas-sidebar{min-height:0}
.atlas-sidebar{overflow:hidden}
.atlas-list-panel{display:flex;flex-direction:column;flex:1;min-height:0}
.atlas-list,.atlas-sidebar:not(.has-destination) .atlas-list{flex:1 1 0;height:auto;min-height:0;overflow:auto}
.atlas-list-toggle{display:none}
@media(min-width:681px) and (max-width:800px){.atlas-section{display:grid;grid-template-columns:minmax(0,1fr) 265px}.atlas-chart{height:auto}.atlas-list{height:auto}}
@media(max-width:680px){
  .atlas-section{display:flex;flex-direction:column;height:calc(100dvh - 108px);margin:12px 0 0}
  .atlas-chart{flex:1 1 auto;height:auto;min-height:0}
  .atlas-sidebar{flex:0 0 auto;min-height:0;overflow:visible;border-left:0;border-top:2px solid #7e6949}
  .atlas-sidebar-top{padding:10px 16px 0}
  .atlas-sidebar-top strong{font-size:18px}
  .atlas-search{margin:0 16px 3px}
  .atlas-search input{min-height:39px;padding:5px 0}
  .atlas-list-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;border:0;border-top:1px solid #bca981;background:#e6d8b7;color:#3d4d3e;padding:0 16px;font-size:12px;font-weight:700;text-align:left}
  .atlas-list-toggle span{font-size:19px;line-height:1}
  .atlas-list-panel,.atlas-log{display:none}
  .atlas-section.is-list-open{height:auto}
  .atlas-section.is-list-open .atlas-chart{flex:none;height:calc(100dvh - 108px - 115px)}
  .atlas-section.is-list-open .atlas-list-panel{display:flex;flex:none}
  .atlas-section.is-list-open .atlas-list{flex:none;height:235px;overflow:auto}
  .atlas-section.is-list-open .atlas-log:not([hidden]){display:flex}
  .atlas-section.is-list-open .atlas-list-toggle span{transform:rotate(180deg)}
  .atlas-regions{padding:5px 16px 8px}
}
@media(max-width:600px){.atlas-section{height:calc(100dvh - 93px);margin-top:10px}.atlas-section.is-list-open .atlas-chart{height:calc(100dvh - 93px - 115px)}}
@media(max-width:360px){.atlas-heading h1{font-size:27px}.atlas-heading p{font-size:9px}.atlas-zoom button{width:36px;height:36px}}

/* A generated flag is painted in the same order as the atlas flags: field first. */
.result-frame{background:#f1e6ce}
.result-frame .empty-result{color:#566e6a}
.result-frame .empty-wave{color:#7b9b9a}
.result-frame .voice-flag-base{transform-box:fill-box;transform-origin:left center;animation:voice-flag-field .85s cubic-bezier(.2,.7,.25,1) both}
.result-frame .voice-flag-art{animation:voice-flag-art .55s ease-out .8s both}
@keyframes voice-flag-field{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes voice-flag-art{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.result-frame .voice-flag-base,.result-frame .voice-flag-art{animation:none}}