@font-face{font-family:Learn Syllabics Sans;src:url(/fonts/LearnSyllabics-Sans-Regular.otf) format("opentype");font-weight:400;font-style:normal}.app{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:40px 20px;background:radial-gradient(ellipse at 50% 0%,#1a1a2e,#000 70%)}@media (max-width: 430px){.app{padding:0;align-items:stretch;background:#1c1c1e}}.phone-frame{width:390px;border-radius:50px;background:#1c1c1e;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff12,0 0 0 10px #111,0 0 0 12px #2c2c2e,0 40px 120px #000000e6}@media (max-width: 430px){.phone-frame{width:100%;border-radius:0;box-shadow:none}}.phone-notch{height:44px;background:#1c1c1e;display:flex;justify-content:center;padding-top:6px}.phone-notch:before{content:"";width:120px;height:34px;background:#000;border-radius:0 0 24px 24px}.phone-screen{display:flex;flex-direction:column}.text-display{height:130px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #2c2c2e;flex-shrink:0}.text-display-header{display:flex;justify-content:space-between;align-items:center}.text-display-title{font-size:11px;font-weight:600;color:#636366;text-transform:uppercase;letter-spacing:.1em}.clear-btn{width:24px;height:24px;background:#48484a;border-radius:50%;color:#aeaeb2;font-size:10px;display:flex;align-items:center;justify-content:center;line-height:1;border:none;cursor:pointer}.clear-btn:active{background:#636366}.text-output{font-family:Noto Sans Canadian Aboriginal,Segoe UI,sans-serif;font-size:14px;line-height:1.5;color:#fff;word-break:break-all;overflow-y:auto;flex:1}.text-placeholder{font-size:17px;color:#48484a;min-height:42px;display:flex;align-items:center}.keyboard-area{flex-shrink:0;background:#1c1c1e;padding-bottom:14px}.top-controls{display:flex;flex-direction:column;border-bottom:1px solid #2c2c2e}.font-picker{display:flex;justify-content:center;gap:8px;padding:6px 0 8px}.font-btn{padding:4px 16px;background:#2c2c2e;color:#8e8e93;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.04em;border:none;cursor:pointer;transition:background .12s,color .12s}.font-btn.active{background:#0a84ff;color:#fff}.view-toggle{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 0}.toggle-label{font-size:13px;font-weight:500;color:#636366;transition:color .15s;min-width:62px}.toggle-label.left{text-align:right}.toggle-label.right{text-align:left}.toggle-label.active{color:#ebebf5}.toggle-track{width:46px;height:26px;background:#3a3a3c;border-radius:13px;position:relative;cursor:pointer;transition:background .2s;border:none;padding:0;flex-shrink:0}.toggle-track.on{background:#30d158}.toggle-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0006;pointer-events:none}.toggle-track.on .toggle-knob{transform:translate(20px)}.key-grid{display:flex;flex-direction:row;gap:8px;padding:12px 10px 8px}.key-grid-vowels{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:column;gap:6px}.key-grid-vowels.rows-2{grid-template-rows:repeat(2,48px)}.key-grid-vowels.rows-4{grid-template-rows:repeat(4,38px)}.key{flex:1;background:#3a3a3c;color:#fff;border-radius:8px;height:100%;font-size:13px;font-family:Noto Sans Canadian Aboriginal,Segoe UI,sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;transition:background .08s,transform .07s}.key:active{background:#636366;transform:scale(.96)}.key svg{width:80%;height:auto}.key.key-tall{grid-row:1 / -1;height:auto}.key.key-blank{pointer-events:none}.key.key-w{background:#2a3a3c}.key.key-w.key-long{background:#1e2c2e}.key.key-w:active,.key.key-w.key-long:active{background:#48686b}.key.key-long{background:#2c2c2e}.key.key-long:active{background:#48484a}.key.key-final{flex:none;width:62px;height:auto;align-self:stretch;background:#2c2c2e}.key.key-final:active{background:#48484a}.utility-row{display:flex;gap:6px;padding:0 10px 6px}.util-key{background:#3a3a3c;color:#fff;border-radius:10px;min-height:44px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .08s}.util-key:active{background:#636366}.backspace-key{width:58px;font-size:18px}.space-key{flex:1;font-size:11px;letter-spacing:1.5px;color:#8e8e93;font-weight:500}.period-key{width:58px;font-size:20px;font-family:Noto Sans Canadian Aboriginal,sans-serif}.emoji-key{width:44px;font-size:20px}.emoji-key.active{background:#0a84ff}.num-key{width:52px;font-size:11px;font-weight:600;letter-spacing:.5px;color:#8e8e93}.return-key{width:72px;font-size:20px;color:#8e8e93}.layer-hidden{display:none}.alt-layer{display:flex;flex-direction:column;gap:6px;padding:8px 10px 4px}.alt-row{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}.alt-row-mixed{display:flex;gap:5px}.alt-key{background:#3a3a3c;color:#fff;border-radius:8px;height:44px;font-size:16px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.alt-key:active{background:#636366}.alt-key-wide{flex:1.5;font-size:13px;background:#2c2c2e;color:#8e8e93}.alt-row-mixed .alt-key:not(.alt-key-wide){flex:1}.emoji-picker{display:flex;flex-direction:column;height:260px}.emoji-search-row{display:flex;align-items:center;gap:6px;padding:6px 10px 4px;flex-shrink:0}.emoji-search{flex:1;background:#2c2c2e;border:none;border-radius:10px;color:#fff;font-size:13px;padding:7px 12px;outline:none}.emoji-search::placeholder{color:#636366}.emoji-search-clear{width:22px;height:22px;background:#48484a;border-radius:50%;color:#aeaeb2;font-size:9px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;flex-shrink:0}.emoji-loading{height:240px;display:flex;align-items:center;justify-content:center;color:#636366;font-size:13px}.emoji-cat-strip{display:flex;gap:4px;padding:6px 10px 4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid #2c2c2e;flex-shrink:0}.emoji-cat-strip::-webkit-scrollbar{display:none}.emoji-cat-btn{flex-shrink:0;width:36px;height:32px;background:transparent;border-radius:6px;font-size:18px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.emoji-cat-btn.active{background:#3a3a3c}.emoji-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:6px 10px}.emoji-btn{aspect-ratio:1;background:transparent;border:none;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px}.emoji-btn:active{background:#3a3a3c}.cons-tabs{display:flex;flex-direction:column;gap:5px;padding:5px 10px 10px;margin-top:6px;background:#111;border-top:1px solid #000}.cons-tabs-row{display:flex;gap:5px}.cons-tab{flex:1;min-height:42px;background:#1c1c1e;color:#636366;border-radius:8px;font-size:13px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;position:relative;transition:background .12s,color .12s}.cons-tab.active{background:#0a84ff;color:#fff;box-shadow:0 2px 8px #0a84ff66}.cons-tab.held{background:#48484a}.cons-tab-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#2c2c2e;border:1px solid #48484a;border-radius:10px;padding:8px 14px;font-size:26px;font-family:Noto Sans Canadian Aboriginal,Segoe UI,sans-serif;color:#fff;white-space:nowrap;z-index:100;box-shadow:0 4px 16px #0009;pointer-events:none}.cons-tab-popup:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#48484a}.cons-tab-popup:before{content:"";position:absolute;top:calc(100% - 1px);left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#2c2c2e;z-index:1}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#000;min-height:100vh;color:#fff}button{font-family:inherit;cursor:pointer;border:none;outline:none;-webkit-tap-highlight-color:transparent}
