:root{--color-bg-page-primary: #111;--color-bg-editor-area: var(--color-bg-quaternary);--color-bg-tertiary: #1a1a1a;--color-bg-quaternary: #222;--color-text-primary: #ddd;--color-text-secondary: #aaa;--color-text-tertiary: #ccc;--color-text-highlight: #ffa500;--color-text-heading-h1: hsl(39, 70%, 35%);--border-color-primary: #555;--border-color-secondary: #3c3c3c;--border-color-focus: #ffa500;--font-family-monospace: "Source Code Pro", Consolas, "Courier New", Courier, monospace;--font-line-height-textarea: 1.4;--font-size-textarea: 14px;--height-level-selector-track: 50vh;--height-level-selector-track-max: 280px;--width-level-selector-track: 42px;--size-icon: 24px;--size-icon-button: 40px;--width-gutter: 40px;--height-header: 50px;--size-header-logo: 32px;--spacing-padding-editor-vertical: 15px;--spacing-padding-editor-horizontal: 15px;--spacing-header-padding-horizontal: 15px;--color-bg-level-button-level1-active: hsl(39, 100%, 70%);--color-bg-level-button-level2-active: hsl(39, 100%, 60%);--color-bg-level-button-level3-active: hsl(39, 100%, 50%);--color-bg-level-button-level4-active: hsl(39, 100%, 40%);--color-bg-level-button-inactive: #4a4a4a;--color-text-level-button-active: #111;--color-text-level-button-inactive: #888;--color-bg-level-button-empty: #666;--color-bg-level-button-empty-selected: #555;--border-color-level-button-selected: white;--border-color-level-button-empty-selected: #333;--color-bg-icon-button: #4f4f4f;--color-icon-button-foreground: #f0f0f0;--color-bg-icon-button-hover: #666;--color-bg-icon-button-active: #777;--color-bg-icon-button-disabled: #404040;--color-icon-button-foreground-disabled: #777;--color-bg-button-copy: #ffa500;--color-icon-button-copy-foreground: #282828;--color-bg-button-copy-hover: #cc8400;--color-bg-button-download: #4caf50;--color-icon-button-download-foreground: #ffffff;--color-bg-button-download-hover: #45a049;--color-bg-button-clear: hsl(0, 40%, 40%);--color-bg-button-clear-hover: hsl(0, 50%, 50%);--color-bg-button-upload: #3f51b5;--color-icon-button-upload-foreground: #ffffff;--color-bg-button-upload-hover: #3949ab;--color-bg-button-wordwrap-active: #6a0dad;--shadow-button-wordwrap-active: 0 0 10px #c37cfc;--color-icon-button-wordwrap-foreground-active: #f0f0f0;--color-bg-gutter: var(--color-bg-tertiary);--color-text-gutter: var(--color-text-secondary);--color-bg-select: var(--color-bg-quaternary);--color-text-select: var(--color-text-primary);--border-color-select: var(--border-color-primary);--color-bg-select-hover: var(--color-bg-icon-button-hover)}@media(prefers-color-scheme:light){:root{--color-bg-page-primary: #f4f4f4;--color-bg-editor-area: var(--color-bg-quaternary);--color-bg-tertiary: #e9e9e9;--color-bg-quaternary: #f8f8f8;--color-text-primary: #333;--color-text-secondary: #999;--color-text-tertiary: #777;--color-text-highlight: #d98c00;--color-text-heading-h1: hsl(39, 70%, 25%);--border-color-primary: #ccc;--border-color-secondary: #ddd;--border-color-focus: #d98c00;--color-bg-level-button-level1-active: hsl(39, 100%, 80%);--color-bg-level-button-level2-active: hsl(39, 100%, 70%);--color-bg-level-button-level3-active: hsl(39, 100%, 60%);--color-bg-level-button-level4-active: hsl(39, 100%, 50%);--color-bg-level-button-inactive: #d0d0d0;--color-text-level-button-active: #333;--color-text-level-button-inactive: #777;--color-bg-level-button-empty: #ccc;--color-bg-level-button-empty-selected: #b0b0b0;--border-color-level-button-selected: #333;--border-color-level-button-empty-selected: #777;--color-bg-icon-button: #e0e0e0;--color-icon-button-foreground: #333;--color-bg-icon-button-hover: #d0d0d0;--color-bg-icon-button-active: #c0c0c0;--color-bg-icon-button-disabled: #e9e9e9;--color-icon-button-foreground-disabled: #aaa;--color-bg-button-copy: #d98c00;--color-icon-button-copy-foreground: #ffffff;--color-bg-button-copy-hover: #b87300;--color-bg-button-download: #66bb6a;--color-bg-button-download-hover: #5cb860;--color-bg-button-clear: hsl(0, 55%, 65%);--color-bg-button-clear-hover: hsl(0, 65%, 75%);--color-bg-button-upload: #5c6bc0;--color-bg-button-upload-hover: #5361b8;--color-bg-button-wordwrap-active: #9370db;--shadow-button-wordwrap-active: 0 0 10px #c0a0f0;--color-icon-button-wordwrap-foreground-active: #111;--color-bg-gutter: var(--color-bg-tertiary);--color-text-gutter: var(--color-text-secondary);--color-bg-select: var(--color-bg-quaternary);--color-text-select: var(--color-text-primary);--border-color-select: var(--border-color-primary);--color-bg-select-hover: var(--color-bg-icon-button-hover)}}*,*:before,*:after{box-sizing:border-box}html{height:100%}body{height:100vh;margin:0;overflow:hidden;background-color:var(--color-bg-page-primary);color:var(--color-text-primary);font-family:Arial,sans-serif;font-size:16px;display:flex;flex-direction:column}select{font-size:1em}.page-header{display:flex;align-items:center;justify-content:space-between;background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--border-color-secondary);padding:0 var(--spacing-header-padding-horizontal);height:var(--height-header);flex-shrink:0}.header-logo{height:var(--size-header-logo);width:var(--size-header-logo);margin-right:15px;flex-shrink:0}.header-type-info{display:flex;align-items:center;gap:20px;font-size:.9em;color:var(--color-text-secondary);flex-grow:1;justify-content:center;min-width:0}h1{color:var(--color-text-heading-h1);font-family:var(--font-family-monospace);font-size:1.8em;letter-spacing:.5em;margin:0;text-align:right;text-transform:uppercase;white-space:nowrap;flex-shrink:0}#type-display-output .detected-type-value{font-weight:700;color:var(--color-text-highlight)}.manual-type-control{display:flex;align-items:center}.manual-type-control label{margin-right:5px;color:var(--color-text-tertiary)}#manual-type-selector{background-color:var(--color-bg-select);color:var(--color-text-select);border:1px solid var(--border-color-select);border-radius:4px;padding:3px 5px;outline:none;cursor:pointer}#manual-type-selector:hover{background-color:var(--color-bg-select-hover)}#manual-type-selector:focus{border-color:var(--border-color-focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--border-color-focus) 30%,transparent)}.editor-container{flex-grow:1;display:flex;width:100%;padding:10px;gap:10px;min-height:0}.textarea-wrapper{position:relative;flex:1;display:flex;flex-direction:column;min-width:0}.editor-area{flex-grow:1;display:flex;position:relative;border:1px solid var(--border-color-primary);border-radius:5px 5px 0 0;overflow:hidden;background-color:var(--color-bg-editor-area)}.editor-area:focus-within{border-color:var(--border-color-focus)}.line-number-gutter{width:var(--width-gutter);background-color:var(--color-bg-gutter);color:var(--color-text-gutter);font-family:var(--font-family-monospace);font-size:var(--font-size-textarea);line-height:var(--font-line-height-textarea);padding:var(--spacing-padding-editor-vertical) 5px var(--spacing-padding-editor-vertical) 0;text-align:right;-webkit-user-select:none;user-select:none;overflow:hidden;white-space:pre;flex-shrink:0;border-right:1px solid var(--border-color-primary)}.editor-area pre.hljs-highlight-layer{position:absolute;top:0;left:var(--width-gutter);width:calc(100% - var(--width-gutter));height:100%;margin:0;padding:var(--spacing-padding-editor-vertical) var(--spacing-padding-editor-horizontal);font-family:var(--font-family-monospace);font-size:var(--font-size-textarea);line-height:var(--font-line-height-textarea);overflow:hidden;z-index:1;pointer-events:none;box-sizing:border-box}.editor-area pre.hljs-highlight-layer code.hljs{display:block;padding:0;margin:0;background:none}textarea{flex-grow:1;padding:var(--spacing-padding-editor-vertical) var(--spacing-padding-editor-horizontal);background-color:transparent;color:transparent;caret-color:var(--color-text-primary);border:none;border-radius:0;resize:none;font-family:var(--font-family-monospace);font-size:var(--font-size-textarea);line-height:var(--font-line-height-textarea);width:100%;min-height:100px;position:relative;z-index:2;outline:none}.custom-placeholder{position:absolute;top:var(--spacing-padding-editor-vertical);left:calc(var(--width-gutter) + var(--spacing-padding-editor-horizontal));width:calc(100% - var(--width-gutter) - (2 * var(--spacing-padding-editor-horizontal)) - 10px);height:calc(100% - (2 * var(--spacing-padding-editor-vertical)));font-family:var(--font-family-monospace);font-size:var(--font-size-textarea);line-height:var(--font-line-height-textarea);color:var(--color-text-secondary);pointer-events:none;z-index:5;display:flex;align-items:flex-start;white-space:pre-wrap}.custom-placeholder.hidden{display:none}.counts-bar{background-color:var(--color-bg-tertiary);padding:5px 10px;font-size:.8em;color:var(--color-text-secondary);display:flex;justify-content:space-between;border:1px solid var(--border-color-primary);border-top:none;border-radius:0 0 5px 5px;flex-shrink:0}textarea.word-wrap-enabled,.hljs-highlight-layer.word-wrap-enabled,.hljs-highlight-layer.word-wrap-enabled code.hljs{white-space:pre-wrap;word-break:break-all}textarea.word-wrap-disabled,.hljs-highlight-layer.word-wrap-disabled,.hljs-highlight-layer.word-wrap-disabled code.hljs{white-space:pre}textarea.word-wrap-disabled{overflow-x:auto}.hljs-highlight-layer.word-wrap-disabled{overflow-x:hidden}.textarea-wrapper button{position:absolute;background:var(--color-bg-icon-button);border:none;border-radius:50%;width:var(--size-icon-button);height:var(--size-icon-button);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 1px 3px #0003;transition:background-color .2s ease,transform .1s ease,opacity .2s ease}.textarea-wrapper button:hover:not([disabled]){background-color:var(--color-bg-icon-button-hover)}.textarea-wrapper button:active:not([disabled]){transform:scale(.95)}.textarea-wrapper button .icon-svg{width:var(--size-icon);height:var(--size-icon);fill:var(--color-icon-button-foreground);transition:fill .2s ease}.textarea-wrapper button[disabled]{background:var(--color-bg-icon-button-disabled)!important;cursor:not-allowed;opacity:.6}.textarea-wrapper button[disabled] .icon-svg{fill:var(--color-icon-button-foreground-disabled)!important}#download-button{top:10px;right:calc(10px + var(--size-icon-button) + 8px);background:var(--color-bg-button-download)}#download-button:hover:not([disabled]){background-color:var(--color-bg-button-download-hover)}#download-button .icon-svg{fill:var(--color-icon-button-download-foreground)}#copy-button{top:10px;right:10px;background:var(--color-bg-button-copy)}#copy-button:hover:not([disabled]){background-color:var(--color-bg-button-copy-hover)}#copy-button .icon-svg{fill:var(--color-icon-button-copy-foreground)}.input-wrapper #upload-file-button{top:10px;right:calc(10px + var(--size-icon-button) + 8px);background:var(--color-bg-button-upload)}.input-wrapper #upload-file-button:hover:not([disabled]){background-color:var(--color-bg-button-upload-hover)}.input-wrapper #upload-file-button .icon-svg{fill:var(--color-icon-button-upload-foreground)}.input-wrapper #clear-input-button{top:10px;right:10px;background:var(--color-bg-button-clear)}.input-wrapper #clear-input-button:hover:not([disabled]){background-color:var(--color-bg-button-clear-hover)}#toggle-word-wrap-button{background:var(--color-bg-icon-button);border:none;border-radius:50%;width:var(--size-icon-button);height:var(--size-icon-button);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0003;transition:background-color .2s ease,transform .1s ease,box-shadow .2s ease;margin:80px 0}#toggle-word-wrap-button .icon-svg{width:var(--size-icon);height:var(--size-icon);color:var(--color-icon-button-foreground);transition:color .2s ease}#toggle-word-wrap-button:hover{background-color:var(--color-bg-icon-button-hover)}#toggle-word-wrap-button:active:not(.active){transform:scale(.95)}#toggle-word-wrap-button.active{background-color:var(--color-bg-button-wordwrap-active);box-shadow:var(--shadow-button-wordwrap-active),0 1px 3px #0000004d}#toggle-word-wrap-button.active .icon-svg{color:var(--color-icon-button-wordwrap-foreground-active)}.level-selector-column{width:70px;display:flex;flex-direction:column;align-items:center;padding-top:30px;flex-shrink:0}.level-selector-label{font-size:.9em;color:var(--color-text-tertiary);text-align:center;white-space:nowrap;width:100%;flex-shrink:0;transition:opacity .3s ease}.level-selector-label.top{margin-bottom:10px}.level-selector-label.bottom{margin-top:10px}.level-buttons-ui-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:var(--width-level-selector-track);height:var(--height-level-selector-track);max-height:var(--height-level-selector-track-max);background-color:transparent;border-radius:7px;padding:5px 0;transition:opacity .3s ease}.level-button-wrapper{display:flex;width:100%;flex:1;align-items:center;justify-content:center;min-height:30px;max-height:55px;padding:2px 0}input[type=radio][name=minify-level]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:absolute;opacity:0;width:0;height:0}.level-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:var(--font-family-monospace);font-weight:700;font-size:1.4em;color:var(--color-text-level-button-inactive);background-color:var(--color-bg-level-button-inactive);cursor:pointer;transition:background-color .2s ease,transform .15s ease,box-shadow .2s ease,border .15s ease,color .2s ease;border-radius:5px;position:relative;box-sizing:border-box;border:2px solid transparent;transform-origin:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);margin:1px 0}.level-buttons-ui-wrapper:not(.empty-state) .level-button{background-color:var(--color-bg-level-button-inactive);color:var(--color-text-level-button-inactive);box-shadow:inset 0 1px 4px #0006;border:2px solid transparent}.level-buttons-ui-wrapper:not(.empty-state) input[type=radio]:not(:checked)+.level-button:hover{transform:scale(1.03);z-index:2;background-color:color-mix(in srgb,var(--color-bg-level-button-inactive) 70%,white 30%)}.level-buttons-ui-wrapper:not(.empty-state) #minify-level-1:checked+label[for=minify-level-1],.level-buttons-ui-wrapper:not(.empty-state) .level-button-wrapper:has(#minify-level-2:checked)~.level-button-wrapper label[for=minify-level-1],.level-buttons-ui-wrapper:not(.empty-state) .level-button-wrapper:has(#minify-level-3:checked)~.level-button-wrapper label[for=minify-level-1],.level-buttons-ui-wrapper:not(.empty-state) .level-button-wrapper:has(#minify-level-4:checked)~.level-button-wrapper label[for=minify-level-1]{background-color:var(--color-bg-level-button-level1-active);color:var(--color-text-level-button-active);box-shadow:0 0 5px color-mix(in srgb,var(--color-bg-level-button-level1-active) 80%,transparent 20%),inset 0 0 3px color-mix(in srgb,var(--color-bg-level-button-level1-active) 70%,white 30%)}.level-buttons-ui-wrapper:not(.empty-state) #minify-level-2:checked+label[for=minify-level-2],.level-buttons-ui-wrapper:not(.empty-state) .level-button-wrapper:has(#minify-level-3:checked)~.level-button-wrapper label[for=minify-level-2],.level-buttons-ui-wrapper:not(.empty-state) .level-button-wrapper:has(#minify-level-4:checked)~.level-button-wrapper label[for=minify-level-2]{background-color:var(--color-bg-level-button-level2-active);color:var(--color-text-level-button-active);box-shadow:0 0 5px color-mix(in srgb,var(--color-bg-level-button-level2-active) 80%,transparent 20%),inset 0 0 3px color-mix(in srgb,var(--color-bg-level-button-level2-active) 70%,white 30%)}.level-buttons-ui-wrapper:not(.empty-state) #minify-level-3:checked+label[for=minify-level-3],.level-buttons-ui-wrapper:not(.empty-state) .level-button-wrapper:has(#minify-level-4:checked)~.level-button-wrapper label[for=minify-level-3]{background-color:var(--color-bg-level-button-level3-active);color:var(--color-text-level-button-active);box-shadow:0 0 5px color-mix(in srgb,var(--color-bg-level-button-level3-active) 80%,transparent 20%),inset 0 0 3px color-mix(in srgb,var(--color-bg-level-button-level3-active) 70%,white 30%)}.level-buttons-ui-wrapper:not(.empty-state) #minify-level-4:checked+label[for=minify-level-4]{background-color:var(--color-bg-level-button-level4-active);color:var(--color-text-level-button-active);box-shadow:0 0 5px color-mix(in srgb,var(--color-bg-level-button-level4-active) 80%,transparent 20%),inset 0 0 3px color-mix(in srgb,var(--color-bg-level-button-level4-active) 70%,white 30%)}.level-buttons-ui-wrapper:not(.empty-state) input[type=radio][name=minify-level]:checked+.level-button{border:2px solid var(--border-color-level-button-selected);box-shadow:0 0 12px var(--color-text-highlight),inset 0 0 6px color-mix(in srgb,currentColor 60%,white 40%);transform:scaleX(1.2) scaleY(1.02);z-index:3}.level-buttons-ui-wrapper.empty-state .level-button{background-color:var(--color-bg-level-button-empty)!important;color:var(--color-text-level-button-inactive)!important;border-color:transparent!important;box-shadow:inset 0 1px 3px #0000004d!important;cursor:default;pointer-events:none;transform:none!important}.level-buttons-ui-wrapper.empty-state input[name=minify-level]:checked+.level-button{background-color:var(--color-bg-level-button-empty-selected)!important;color:var(--color-text-primary)!important;border:2px solid var(--border-color-level-button-empty-selected)!important;box-shadow:inset 0 0 5px #0006!important;transform:scaleX(1.2) scaleY(1.02)!important}.level-buttons-ui-wrapper.empty-state~.level-selector-label{opacity:.6}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}*:focus-visible{outline:2px solid var(--border-color-focus);outline-offset:2px}button:focus-visible{outline:2px solid var(--border-color-focus);outline-offset:2px}.skip-to-main{position:absolute;top:-40px;left:0;background:var(--color-bg-page-primary);color:var(--color-text-primary);padding:8px;text-decoration:none;z-index:100}.skip-to-main:focus{top:0}@media(prefers-contrast:more){:root{--color-text-primary: #fff;--color-text-secondary: #ddd;--border-color-primary: #999}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media print{.page-header,.level-selector-column,button{display:none}.editor-container{flex-direction:column}.textarea-wrapper{page-break-inside:avoid}}