:root{color-scheme:light;--bg: #f5f1ea;--bg-2: #ece6dc;--bg-glow: rgba(255, 255, 255, .58);--panel: rgba(255, 251, 246, .9);--border: rgba(41, 49, 60, .1);--text: #1b2430;--muted: #6c7785;--accent: #5f7392;--accent-rgb: 95 115 146;--danger: #b05d6a;--code-bg: #f8f4ed;--json-key: #5e7286;--json-string: #9a675f;--json-number: #8c7447;--json-boolean: #617b67;--json-null: #7c7088;--json-punct: #7f776d;--json-toggle: #7f90a4;--json-toggle-bg: rgba(95, 115, 146, .1);--json-toggle-border: rgba(95, 115, 146, .16);--json-preview: #7f776d;--shadow: 0 18px 40px rgba(40, 48, 58, .08);--previous-bg: var(--bg);--previous-bg-2: var(--bg-2);--previous-bg-glow: var(--bg-glow);--radius-xl: 24px}:root[data-theme=dark]{color-scheme:dark;--bg: #151a20;--bg-2: #11161b;--bg-glow: rgba(255, 255, 255, .08);--panel: rgba(23, 29, 37, .92);--border: rgba(255, 255, 255, .08);--text: #e6ebf2;--muted: #9eabb9;--accent: #8ea4c3;--accent-rgb: 142 164 195;--danger: #cf8390;--code-bg: #10161d;--json-key: #98aec4;--json-string: #d1a198;--json-number: #ccb07c;--json-boolean: #95ba9d;--json-null: #afa2cd;--json-punct: #8d99a6;--json-toggle: #a7b9cd;--json-toggle-bg: rgba(142, 164, 195, .12);--json-toggle-border: rgba(142, 164, 195, .2);--json-preview: #93a0ad;--shadow: 0 20px 48px rgba(0, 0, 0, .24)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--text);font-family:IBM Plex Sans,PingFang SC,Noto Sans SC,sans-serif;background:radial-gradient(circle at top left,var(--bg-glow),transparent 28%),linear-gradient(145deg,var(--bg),var(--bg-2) 86%);transition:color 1.2s ease,background-color 1.2s ease}body:before,body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:0}body:before{clip-path:inset(0);background:radial-gradient(circle at top left,var(--previous-bg-glow),transparent 28%),linear-gradient(145deg,var(--previous-bg),var(--previous-bg-2) 86%)}body:after{filter:blur(18px);transform:scale(1.08);background:radial-gradient(circle at 0% 0%,var(--bg) 0 8%,transparent 28%),radial-gradient(circle at 100% 0%,var(--bg-2) 0 10%,transparent 30%),radial-gradient(circle at 0% 100%,var(--bg-2) 0 10%,transparent 30%),radial-gradient(circle at 100% 100%,var(--bg) 0 8%,transparent 28%),radial-gradient(ellipse at 50% 0%,var(--bg-glow) 0 10%,transparent 34%),radial-gradient(ellipse at 50% 100%,var(--bg-glow) 0 10%,transparent 34%),radial-gradient(ellipse at 0% 50%,var(--bg-glow) 0 8%,transparent 30%),radial-gradient(ellipse at 100% 50%,var(--bg-glow) 0 8%,transparent 30%)}:root.theme-transitioning body:before{animation:theme-old-ink-retreat 1.8s cubic-bezier(.68,0,.24,1) both}:root.theme-transitioning body:after{animation:theme-ink-bloom 1.8s cubic-bezier(.16,.82,.24,1) both}@keyframes theme-old-ink-retreat{0%{opacity:1;clip-path:inset(0 round 0)}58%{opacity:1;clip-path:inset(18% 20% 18% 20% round 48px)}to{opacity:0;clip-path:inset(50% 50% 50% 50% round 80px)}}@keyframes theme-ink-bloom{0%{opacity:0;clip-path:inset(50% 50% 50% 50% round 80px);filter:blur(30px);transform:scale(1.2)}34%{opacity:.78;clip-path:inset(28% 30% 28% 30% round 64px)}72%{opacity:.92;clip-path:inset(6% 8% 6% 8% round 32px);filter:blur(22px)}to{opacity:0;clip-path:inset(0 round 0);filter:blur(18px);transform:scale(1.08)}}textarea,pre,code{font-family:IBM Plex Mono,SFMono-Regular,Consolas,monospace}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{width:min(1280px,calc(100vw - 40px));margin:0 auto;padding:22px 0 34px}.minimal-shell{display:flex;align-items:stretch;min-height:100vh}.workspace{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.minimal-workspace{align-self:center}.panel{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow);overflow:hidden;max-height:calc(100vh - 56px);transition:background-color 1.2s ease,border-color 1.2s ease,box-shadow 1.2s ease}.panel-resizing{will-change:height}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px 16px;border-bottom:1px solid var(--border);transition:border-color 1.2s ease}.panel-kicker{margin:0;color:var(--accent);font-size:12px;letter-spacing:.18em;text-transform:uppercase;transition:color 1.2s ease}.panel-head h2{margin:8px 0 0;font-size:24px;line-height:1.15;letter-spacing:0}.copy-button{flex:0 0 auto;margin-top:2px;border:1px solid rgb(var(--accent-rgb) / .2);border-radius:999px;background:rgb(var(--accent-rgb) / .08);color:var(--accent);padding:8px 14px;font:inherit;font-size:13px;line-height:1;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color 1.2s ease,transform .16s ease}.copy-button:hover{transform:translateY(-1px);border-color:rgb(var(--accent-rgb) / .38);background:rgb(var(--accent-rgb) / .14)}.copy-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.json-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;padding:0;border:1px solid var(--json-toggle-border);border-radius:999px;background:var(--json-toggle-bg);color:var(--json-toggle);cursor:pointer;vertical-align:baseline;transition:background-color 1.2s ease,border-color 1.2s ease,color 1.2s ease,transform .16s ease}.json-toggle:hover{transform:translateY(-1px);border-color:var(--json-toggle)}.json-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.json-toggle-icon{font-size:12px;line-height:1}.json-collapsed-preview{margin:0 6px;color:var(--json-preview);font-size:13px;transition:color 1.2s ease}.editor-wrapper,.result-box{flex:1;min-height:0;overflow:auto;background:var(--code-bg);color:var(--text);transition:background-color 1.2s ease,color 1.2s ease}.panel-resizing .editor-wrapper,.panel-resizing .result-box,.content-reflowing{overflow:hidden;will-change:transform,opacity,filter}.result-box,.editor-field{scrollbar-width:thin;scrollbar-color:rgb(var(--accent-rgb) / .32) transparent}.result-box::-webkit-scrollbar{width:8px;height:8px}.editor-field::-webkit-scrollbar{width:8px;height:8px}.result-box::-webkit-scrollbar-track{background:transparent}.editor-field::-webkit-scrollbar-track{background:transparent}.result-box::-webkit-scrollbar-thumb{background:rgb(var(--accent-rgb) / .32);border-radius:4px}.editor-field::-webkit-scrollbar-thumb{background:rgb(var(--accent-rgb) / .32);border-radius:4px}.result-box::-webkit-scrollbar-thumb:hover{background:rgb(var(--accent-rgb) / .5)}.editor-field::-webkit-scrollbar-thumb:hover{background:rgb(var(--accent-rgb) / .5)}.editor-wrapper{display:flex;gap:12px;padding:22px 24px;overflow:hidden}.editor-wrapper:focus-within{outline:none}.editor-field{flex:1;border:0;padding:0;resize:none;font-size:14px;line-height:1.74;background:transparent;color:inherit;font-family:inherit;outline:none;overflow:auto}.line-numbers{display:flex;flex-direction:column;text-align:right;-webkit-user-select:none;user-select:none;color:var(--muted);font-size:14px;line-height:1.74;font-family:IBM Plex Mono,SFMono-Regular,Consolas,monospace;opacity:.55;flex-shrink:0;overflow:hidden;min-width:2.5em;font-variant-numeric:tabular-nums;transition:color 1.2s ease}.result-box{padding:22px 24px}.code-wrapper{display:flex;gap:12px;min-height:0}.line-number{min-height:1.74em}.result-box pre{margin:0;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.74}.json-rendered{color:var(--text);flex:1;transition:color 1.2s ease}.json-key{color:var(--json-key);transition:color 1.2s ease}.json-string{color:var(--json-string);transition:color 1.2s ease}.json-number{color:var(--json-number);transition:color 1.2s ease}.json-boolean{color:var(--json-boolean);transition:color 1.2s ease}.json-null{color:var(--json-null);transition:color 1.2s ease}.json-punct{color:var(--json-punct);transition:color 1.2s ease}.result-empty{color:var(--muted);line-height:1.72;transition:color 1.2s ease}.result-error strong{color:var(--danger);transition:color 1.2s ease}.result-error p{margin:10px 0 0;line-height:1.72}.error-block{margin-top:12px;padding:12px 14px;border-radius:12px;background:rgb(var(--accent-rgb) / .08);overflow-x:auto;transition:background-color 1.2s ease}.error-pre{display:block;margin:0;padding:0;background:transparent;color:var(--text);white-space:pre;font-family:IBM Plex Mono,SFMono-Regular,Consolas,monospace;font-size:14px;line-height:1.6;transition:color 1.2s ease}.error-char{background:#b05d6a40}.result-error code{color:var(--text);transition:color 1.2s ease}.weather-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;overflow:hidden}.weather-rain{opacity:0;animation:weather-fade-in 1.2s ease forwards}.rain-drop{position:absolute;top:-30px;width:1.5px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.6));border-radius:1px;animation-name:rain-fall;animation-timing-function:linear;animation-iteration-count:infinite;transform:rotate(8deg);opacity:0}@keyframes rain-fall{0%{transform:translateY(-20px) rotate(8deg);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(calc(100vh + 20px)) rotate(8deg);opacity:0}}.weather-snow{opacity:0;animation:weather-fade-in 1.5s ease forwards}.snow-flake{position:absolute;top:-15px;border-radius:50%;background:#ffffffb3;color:#ffffffbf;animation-name:snow-fall,snow-sway;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;opacity:0}@keyframes snow-fall{0%{transform:translateY(-10px);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateY(calc(100vh + 10px));opacity:0}}@keyframes snow-sway{0%,to{margin-left:0}50%{margin-left:30px}}.weather-clouds{opacity:0;animation:weather-fade-in 2s ease forwards}.cloud{position:absolute;animation-name:cloud-drift;animation-timing-function:linear;animation-iteration-count:infinite}.cloud-puff{display:block}.cloud-puff-body{width:200px;height:70px;background:#ffffffd1;border-radius:100px;position:relative;box-shadow:0 4px 16px #0000000f,inset 0 -6px 12px #00000008}.cloud-puff-bump{position:absolute;background:#ffffffd1;border-radius:50%}.cloud-puff-bump--left{width:80px;height:80px;top:-40px;left:28px}.cloud-puff-bump--right{width:110px;height:110px;top:-60px;left:70px}@keyframes cloud-drift{0%{transform:translate(0) scale(var(--cloud-scale, 1));opacity:var(--cloud-target-opacity, 1)}to{transform:translate(var(--cloud-drift, 200px)) scale(var(--cloud-scale, 1));opacity:var(--cloud-target-opacity, 1)}}.weather-sun{opacity:0;animation:weather-fade-in 1.5s ease forwards}.sun-glow{position:absolute;top:10%;right:12%;width:140px;height:140px;animation:sun-pulse 6s ease-in-out infinite}.sun-core{position:absolute;top:20px;right:20px;bottom:20px;left:20px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,120,.9) 0%,rgba(255,180,60,.5) 60%,transparent 100%);box-shadow:0 0 40px #ffc85066,0 0 80px #ffb42833}.sun-rays{position:absolute;top:0;right:0;bottom:0;left:0;animation:sun-rays-rotate 30s linear infinite}.sun-ray{position:absolute;top:50%;left:50%;width:2px;height:70px;margin-left:-1px;margin-top:-70px;background:linear-gradient(to top,rgba(255,200,80,.3),transparent);transform-origin:50% 70px;border-radius:1px}@keyframes sun-pulse{0%,to{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}@keyframes sun-rays-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.weather-thunder{opacity:0;animation:weather-fade-in .8s ease forwards}.thunder-drop{width:2px;background:linear-gradient(to bottom,transparent,rgba(200,220,255,.7))}.lightning-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff26;opacity:0;animation:lightning 4s ease-out infinite}@keyframes lightning{0%,90%,to{opacity:0}92%{opacity:1}93%{opacity:0}94%{opacity:.6}96%{opacity:0}}.weather-fog{opacity:0;animation:weather-fade-in 2.5s ease forwards}.fog-layer{position:absolute;left:-20%;width:140%;height:180px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.25) 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.25) 70%,transparent 100%);border-radius:50%;animation-name:fog-drift;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}@keyframes fog-drift{0%{transform:translate(-5%)}to{transform:translate(5%)}}@keyframes weather-fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}.weather-layer,.rain-drop,.snow-flake,.cloud,.sun-glow,.sun-rays,.lightning-flash,.fog-layer{animation:none!important;opacity:.6!important}}@media (max-width: 980px){.workspace{grid-template-columns:1fr}.minimal-shell{min-height:auto}}@media (max-width: 680px){.app-shell{width:min(100vw - 20px,1440px);padding-top:14px}.panel-head{padding-left:16px;padding-right:16px}.editor-wrapper,.result-box{min-height:420px;padding:14px}}
