:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{min-width:320px;min-height:100%}#root{min-height:100vh}:root{--ink: #24313f;--muted: #66717d;--cream: #f7f3eb;--paper: #fffdf9;--line: #ded7cc;--line-strong: #cfc5b8;--navy: #1f3d57;--coral: #df6b55;--coral-dark: #b94f3d;--coral-soft: #faece8;--mustard: #d99a2b;--mustard-dark: #a97418;--mustard-soft: #fbf3e3;--teal: #269688;--teal-dark: #1d746a;--teal-soft: #e6f3f1;--blue: #2f7ca8;--blue-dark: #246587;--blue-soft: #e8f1f6;--shadow: 0 10px 28px rgba(55, 47, 37, .08)}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;color:var(--ink);background-color:var(--cream);background-image:linear-gradient(rgba(91,78,60,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(91,78,60,.045) 1px,transparent 1px);background-size:28px 28px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app{width:min(1420px,calc(100% - 32px));margin:24px auto 40px}.app-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:25px 27px;background:#fffdf9fa;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.app-header h1{margin:0;font-size:clamp(31px,5vw,46px);line-height:1.04;letter-spacing:-.04em}.app-header p{max-width:680px;margin:9px 0 0;color:var(--muted);line-height:1.5}.top-actions{position:relative;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.primary-action,.menu-button,.plain-toggle{min-height:42px;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:800}.primary-action{color:#fff;background:var(--teal);border:1px solid var(--teal);cursor:pointer}.menu-button{color:var(--navy);background:#fff;border:1px solid var(--line-strong);cursor:pointer}.plain-toggle{display:flex;align-items:center;gap:7px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);cursor:pointer}.plain-toggle input{width:16px;height:16px;margin:0}.menu-wrapper{position:relative}.action-menu{position:absolute;z-index:20;top:calc(100% + 7px);right:0;display:grid;min-width:165px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 26px #372f2524}.action-menu button{padding:9px 10px;color:var(--ink);background:transparent;border:0;border-radius:7px;cursor:pointer;font-size:12px;font-weight:750;text-align:left}.action-menu button:hover{color:#fff;background:var(--teal)}.canvas-card{margin-top:18px;overflow:hidden;background:#fffdf9fa;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.tree-toolbar{position:sticky;z-index:12;top:0;display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:14px;padding:9px 13px;background:#fffdf9f7;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.toolbar-group{display:flex;min-width:0;align-items:center;gap:6px}.toolbar-label{margin-right:2px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.tree-toolbar button{min-width:34px;height:34px;padding:6px 9px;color:var(--navy);background:#fff;border:1px solid var(--line-strong);border-radius:8px;cursor:pointer;font-size:13px;font-weight:800}.tree-toolbar button:hover{color:#fff;background:var(--teal);border-color:var(--teal)}.tree-toolbar output{min-width:48px;color:var(--ink);font-size:11px;font-weight:800;text-align:center}.tree-toolbar .toolbar-text-button{min-width:auto;white-space:nowrap;font-size:11px}.toolbar-divider{width:1px;align-self:stretch;background:var(--line)}.font-family-control{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap}.font-family-control select{height:34px;min-width:145px;padding:4px 28px 4px 8px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:8px;outline:none}.tree-toolbar button:disabled{cursor:default;opacity:.38}.tree-toolbar button:disabled:hover{color:var(--navy);background:#fff;border-color:var(--line-strong)}.tree-toolbar .danger-button{color:var(--coral-dark)}.font-size-control{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap}.font-size-control input[type=range]{width:115px;accent-color:var(--teal)}.font-size-control input[type=number]{width:53px;height:34px;padding:4px 5px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:8px;outline:none;text-align:center}.tree-toolbar .format-button{font-family:Georgia,Times New Roman,serif;font-size:17px}.tree-toolbar .italic-button{font-style:italic}.tree-toolbar .format-button.active{color:#fff;background:var(--navy);border-color:var(--navy)}.canvas-status{padding:10px 16px;color:var(--teal-dark);background:var(--teal-soft);border-bottom:1px solid rgba(38,150,136,.2);font-size:12px;font-weight:750;text-align:center}.canvas-scroll{overflow-x:auto;overflow-y:hidden;background:transparent;scroll-behavior:smooth}.tree-canvas{display:block;width:100%;min-width:0;height:auto;margin:0 auto;background:transparent;touch-action:none;-webkit-user-select:none;user-select:none}.word-input{width:100%;height:100%;padding:8px 12px;color:#fff;background:var(--navy);border:2px solid var(--navy);border-radius:999px;outline:none;font-size:18px;font-weight:700;line-height:1.1;text-align:center;-webkit-user-select:text;user-select:text}.word-input:focus{box-shadow:0 0 0 4px #2f7ca824}.word-input.plain{color:#111;background:transparent;border-color:transparent;border-radius:0}.tree-node,.ghost-node{cursor:pointer}.sigma-node,.branch-node{cursor:grab}.sigma-node:active,.branch-node:active{cursor:grabbing}.ghost-node:hover circle{fill:var(--mustard-soft);stroke:var(--mustard)}.ghost-node:hover text{fill:var(--mustard-dark)}.context-toolbar,.branch-toolbar{display:grid;gap:4px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 8px 18px #372f2521}.context-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}.branch-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.context-toolbar button,.branch-toolbar button{height:30px;color:var(--navy);background:#f7f4ee;border:0;border-radius:6px;cursor:pointer;font-size:10px;font-weight:850}.context-toolbar button:hover,.branch-toolbar button:hover{color:#fff;background:var(--teal)}.context-toolbar button.active{color:#fff;background:var(--coral)}.terminal-input,.shared-input{width:100%;height:100%;padding:4px 8px;color:var(--coral-dark);background:var(--coral-soft);border:1px solid rgba(223,107,85,.34);border-radius:9px;outline:none;font-family:Segoe UI,Arial Unicode MS,sans-serif;font-size:22px;font-weight:400;line-height:1.1;text-align:center;-webkit-user-select:text;user-select:text}.shared-input{color:var(--mustard-dark);background:var(--mustard-soft);border-color:#d99a2b6b}.terminal-input:focus,.terminal-input.selected,.shared-input:focus,.shared-input.selected{background:#fff;border-color:var(--coral);box-shadow:0 0 0 3px #df6b5524}.terminal-input.plain,.shared-input.plain{color:#111;background:transparent;border-color:transparent;border-radius:0}.remove-shared-button{width:100%;height:100%;color:var(--mustard-dark);background:var(--mustard-soft);border:1px solid rgba(217,154,43,.42);border-radius:8px;cursor:pointer;font-size:9px;font-weight:800}.insert-button{width:100%;height:100%;color:var(--teal-dark);background:var(--teal-soft);border:1px dashed rgba(38,150,136,.58);border-radius:999px;cursor:pointer;font-family:Georgia,Times New Roman,serif;font-size:16px;font-weight:900}.insert-button:hover{color:#fff;background:var(--teal);border-style:solid}.quick-help{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding:11px 15px 14px;background:#f8f5ef;border-top:1px solid var(--line)}.quick-help span{padding:6px 8px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:750}.ipa-keyboard{padding:15px 17px 18px;background:#fff;border-top:1px solid var(--line)}.ipa-keyboard-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.ipa-keyboard-heading>div{display:grid;gap:3px}.ipa-keyboard-heading strong{font-size:15px}.ipa-keyboard-heading span{color:var(--muted);font-size:11px}.close-ipa{padding:7px 9px;color:var(--muted);background:#f7f4ee;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:10px;font-weight:800}.ipa-tabs{display:flex;gap:6px;margin-top:12px}.ipa-tabs button{padding:7px 10px;color:var(--muted);background:#f7f4ee;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:10px;font-weight:800}.ipa-tabs button.active{color:#fff;background:var(--navy);border-color:var(--navy)}.ipa-chart{display:grid;gap:5px;margin-top:12px;overflow-x:auto}.ipa-chart-row{display:grid;grid-template-columns:150px minmax(640px,1fr);align-items:stretch;gap:6px}.ipa-row-label{display:flex;align-items:center;padding:7px 9px;color:var(--muted);background:#f7f4ee;border:1px solid var(--line);border-radius:8px;font-size:10px;font-weight:800}.ipa-row-symbols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(56px,1fr);gap:4px}.ipa-chart-cell{display:flex;min-height:42px;align-items:center;justify-content:center;gap:3px;padding:3px;background:#fff;border:1px solid var(--line);border-radius:8px}.ipa-chart-cell:empty{background:#f5f2ec;border-style:dashed}.ipa-chart-cell button{min-width:31px;min-height:32px;padding:4px 5px;color:var(--navy);background:var(--blue-soft);border:1px solid rgba(47,124,168,.23);border-radius:7px;cursor:pointer;font-family:Segoe UI,Arial Unicode MS,sans-serif;font-size:17px;font-weight:800}.ipa-chart-cell button:hover{color:#fff;background:var(--blue)}.vowel-chart .ipa-row-symbols{grid-auto-columns:minmax(150px,1fr)}.ipa-keyboard-functions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.ipa-keyboard-functions button{padding:8px 11px;color:var(--muted);background:#f7f4ee;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:11px;font-weight:800}.ipa-keyboard-functions button:hover{color:#fff;background:var(--navy);border-color:var(--navy)}.tree-canvas line{transition:x1 .42s cubic-bezier(.22,1,.36,1),y1 .42s cubic-bezier(.22,1,.36,1),x2 .42s cubic-bezier(.22,1,.36,1),y2 .42s cubic-bezier(.22,1,.36,1),stroke .18s ease,opacity .18s ease}.tree-canvas circle{transition:cx .42s cubic-bezier(.22,1,.36,1),cy .42s cubic-bezier(.22,1,.36,1),r .26s cubic-bezier(.22,1,.36,1),fill .18s ease,stroke .18s ease,opacity .18s ease}.tree-canvas text{transition:x .42s cubic-bezier(.22,1,.36,1),y .42s cubic-bezier(.22,1,.36,1),fill .18s ease,opacity .18s ease}.tree-canvas foreignObject{transition:x .42s cubic-bezier(.22,1,.36,1),y .42s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1),height .32s cubic-bezier(.22,1,.36,1),opacity .18s ease}[data-motion-id]{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}.animated-tree-column{transform-box:fill-box;transform-origin:center top;animation:tree-node-enter .32s cubic-bezier(.22,1,.36,1)}@keyframes tree-node-enter{0%{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ghost-node{animation:ghost-node-enter .22s ease-out}@keyframes ghost-node-enter{0%{opacity:0}to{opacity:1}}@media(max-width:900px){.tree-toolbar{align-items:flex-start;flex-direction:column}.toolbar-divider{display:none}.toolbar-group{width:100%;flex-wrap:wrap}}@media(max-width:780px){.app-header{align-items:flex-start;flex-direction:column}.top-actions{justify-content:flex-start}}@media(max-width:650px){.app{width:min(100% - 16px,1420px);margin:8px auto 22px}.app-header{padding:19px;border-radius:14px}.canvas-card{border-radius:14px}.ipa-keyboard-heading{align-items:flex-start;flex-direction:column}.ipa-tabs{flex-wrap:wrap}.ipa-chart-row{grid-template-columns:115px minmax(620px,1fr)}}.sound-flight-clone{display:flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:1;text-align:center;-webkit-user-select:none;user-select:none;transform-origin:top left}.sound-drag-source{opacity:.4;transform:scale(.96);filter:saturate(.65)}.sound-just-landed{animation:sound-landed .5s cubic-bezier(.22,1,.36,1)}.sound-drop-before,.sound-drop-after{animation:insertion-marker-pulse .52s ease-in-out infinite alternate}@keyframes sound-landed{0%{transform:scale(.78);filter:brightness(1.28)}58%{transform:scale(1.1)}to{transform:scale(1);filter:brightness(1)}}@keyframes insertion-marker-pulse{0%{filter:brightness(1)}to{filter:brightness(1.18)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.color-editor-wrapper{position:relative}.color-editor-popover{position:absolute;z-index:40;top:calc(100% + 9px);right:0;width:min(520px,calc(100vw - 38px));max-height:min(660px,72vh);padding:13px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 36px #372f252e}.color-editor-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.color-editor-heading>div{display:grid;gap:3px}.color-editor-heading strong{font-size:14px}.color-editor-heading span{color:var(--muted);font-size:10px;line-height:1.35}.color-editor-heading button{min-width:auto;height:30px;font-size:10px}.color-general-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.color-general-grid label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;background:#f8f5ef;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:10px;font-weight:800}.color-editor-popover input[type=color]{width:34px;height:29px;padding:2px;background:#fff;border:1px solid var(--line-strong);border-radius:7px;cursor:pointer}.color-grid-heading,.color-group-row{display:grid;grid-template-columns:minmax(130px,1fr) 45px 45px 45px;align-items:center;gap:7px}.color-grid-heading{margin-top:12px;padding:0 8px 5px;color:var(--muted);font-size:9px;font-weight:850;text-align:center;text-transform:uppercase}.color-grid-heading span:first-child{text-align:left}.color-group-list{display:grid;gap:5px}.color-group-row{padding:7px 8px;background:#fffdf9;border:1px solid var(--line);border-radius:9px}.color-group-row strong{font-size:10px}.color-group-row input{justify-self:center}.export-menu{gap:3px}.export-option{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding:8px 9px;color:var(--ink);background:#f8f5ef;border:1px solid var(--line);border-radius:8px;font-size:10px;font-weight:750;line-height:1.3}.export-option input{width:16px;height:16px;flex:0 0 16px;margin:0}@media(max-width:650px){.color-editor-popover{position:fixed;top:80px;right:10px;left:10px;width:auto}.color-grid-heading,.color-group-row{grid-template-columns:minmax(95px,1fr) 42px 42px 42px}}.terminal-input[draggable=true],.shared-input[draggable=true]{cursor:grab}.terminal-input[draggable=true]:active,.shared-input[draggable=true]:active{cursor:grabbing}.terminal-input.sound-drop-before{box-shadow:-7px 0 0 var(--mustard),0 0 0 3px #d99a2b29}.terminal-input.sound-drop-after{box-shadow:7px 0 0 var(--mustard),0 0 0 3px #d99a2b29}.terminal-input.plain.sound-drop-before{box-shadow:-6px 0 #111}.terminal-input.plain.sound-drop-after{box-shadow:6px 0 #111}