:root {
  --ink:#17231f; --forest:#143c35; --forest-2:#215e50; --mint:#eef6f1;
  --paper:#f8f9f5; --white:#fff; --line:#dce3dd; --muted:#68776f;
  --coral:#ed8a65; --shadow:0 18px 50px rgba(28,59,48,.08);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{min-width:320px;margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:Inter,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif}
button,textarea{font:inherit} button:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid rgba(237,138,101,.45);outline-offset:3px} button{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
.page-orb{position:fixed;z-index:-1;border-radius:999px;filter:blur(2px);pointer-events:none}.page-orb-one{width:430px;height:430px;right:-190px;top:-225px;background:radial-gradient(circle at 35% 62%,#f2ad83 0 8%,#8fceb0 9% 22%,#2d7563 23% 34%,transparent 35%);opacity:.45}.page-orb-two{width:300px;height:300px;left:-240px;top:560px;background:#deede4;opacity:.8}
.app-shell{width:min(1180px,calc(100% - 40px));margin:0 auto}.hero{padding:52px 4px 38px}.brand{display:flex;align-items:center;gap:9px;color:var(--forest);font-size:11px;font-weight:800;letter-spacing:.12em}.brand-mark{width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:13px 0 0 #8fc7a9}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:54px;align-items:end;margin-top:25px}.eyebrow,.step-title p{margin:0;color:#709083;font-size:10px;font-weight:800;letter-spacing:.16em}h1{margin:10px 0 0;font-size:clamp(42px,6vw,72px);line-height:1.07;letter-spacing:-.075em}h1 em{color:var(--forest-2);font-style:normal}.hero-copy{padding-bottom:7px}.hero-copy>p{margin:0;color:#52635b;font-size:15px;line-height:1.85}.privacy-pill{display:inline-flex;align-items:center;gap:8px;margin-top:19px;padding:8px 12px;border:1px solid #d4e5da;border-radius:999px;background:rgba(255,255,255,.72);color:#496658;font-size:11px;font-weight:700}.privacy-pill span{color:#69a981;font-size:8px}
.workspace{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:18px;align-items:start}.panel{min-height:585px;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:var(--shadow)}.input-panel{position:sticky;top:14px;display:flex;flex-direction:column;padding:24px}.result-panel{padding:24px;background:rgba(239,246,241,.92)}.panel-header,.corrected-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.step-title{display:flex;align-items:center;gap:11px}.step-title h2{margin:3px 0 0;font-size:16px;letter-spacing:-.025em}.step{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:9px;background:var(--forest);color:var(--white);font:800 11px/1 ui-monospace,SFMono-Regular,monospace}.step-result{background:var(--coral)}.step-corrected{background:#896f43}.text-button{padding:8px 0;border:0;background:transparent;color:var(--forest-2);cursor:pointer;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:4px}
#source-text{width:100%;flex:1;min-height:410px;margin:22px 0 16px;padding:17px;resize:vertical;border:1px solid var(--line);border-radius:14px;background:#fcfdfb;color:var(--ink);font-size:14px;line-height:1.82}#source-text::placeholder{color:#9da9a2}#source-text:focus{border-color:#75a792;box-shadow:0 0 0 4px rgba(83,146,119,.1);outline:0}.input-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}.input-meta{display:flex;flex-direction:column;gap:3px;color:#75847c;font-size:11px}.shortcut{color:#a2aba5;font-size:9px}.input-actions{display:flex;gap:8px}.primary-button,.secondary-button,.copy-button{border:0;border-radius:11px;cursor:pointer;font-size:12px;font-weight:800;transition:transform .16s ease,background .16s ease}.primary-button{padding:13px 16px;background:var(--forest);color:var(--white)}.primary-button span{margin-left:10px;font-size:16px}.secondary-button{padding:13px 14px;background:#edf1ed;color:#53635b}.primary-button:hover:not(:disabled),.copy-button:hover{transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled{cursor:not-allowed;opacity:.48}.result-count{padding:7px 10px;border-radius:999px;background:#fff;color:#51665a;font-size:11px;font-weight:800}
.placeholder-state,.success-state{min-height:495px;display:grid;align-content:center;justify-items:center;padding:40px 10px;text-align:center;color:var(--muted)}.placeholder-icon{display:flex;flex-direction:column;gap:7px;width:66px;padding:16px;border-radius:18px;background:#deebe2}.placeholder-icon span{display:block;height:4px;border-radius:3px;background:#4e8b72}.placeholder-icon span:nth-child(2){width:70%;background:var(--coral)}.placeholder-state h3,.success-state h3{margin:18px 0 7px;color:#3b4e45;font-size:17px}.placeholder-state p,.success-state p{margin:0;font-size:12px;line-height:1.7}.detection-preview{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:28px}.detection-preview span{padding:7px 9px;border:1px solid #d8e3db;border-radius:8px;background:rgba(255,255,255,.7);color:#839087;font:600 10px/1 ui-monospace,monospace}.success-check{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:#d7ebdf;color:#317150;font-size:30px;font-weight:800}
.issues-list{display:grid;gap:11px;margin-top:22px}.issue-card{padding:16px;border:1px solid #e0e6df;border-radius:15px;background:#fff}.issue-top{display:flex;align-items:center;gap:12px}.issue-number{color:#a5aea8;font:800 10px/1 ui-monospace,monospace}.issue-category{display:inline-block;margin-bottom:4px;color:#bf684c;font-size:9px;font-weight:800;letter-spacing:.09em}.issue-top h3{margin:0;font-size:14px}.variant-list{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0}.variant-chip{padding:6px 8px;border-radius:7px;background:#f1f4f1;color:#506158;font:700 10px/1.2 ui-monospace,"Yu Gothic",monospace}.suggestion{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;padding:10px 12px;border-left:3px solid #68a383;border-radius:0 9px 9px 0;background:#edf6f0}.suggestion span{color:#5d7b6b;font-size:9px;font-weight:800}.suggestion strong{color:var(--forest);font-size:13px}.suggestion p{grid-column:1/-1;margin:0;color:#697870;font-size:10px;line-height:1.55}
details{margin-top:11px;color:#6e7c74;font-size:10px}summary{width:fit-content;cursor:pointer;font-weight:700}details ul{display:grid;gap:7px;margin:10px 0 0;padding:0;list-style:none}details li{display:grid;grid-template-columns:92px 1fr;gap:7px;align-items:start}details li>span{color:#8b9690}details code{overflow:hidden;padding:5px 7px;border-radius:5px;background:#f4f5f3;color:#4c5a52;font-family:inherit;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.corrected-section{margin:18px 0 36px;padding:24px;border:1px solid #e1dccf;border-radius:22px;background:#fffdf8;box-shadow:var(--shadow)}.copy-button{padding:11px 14px;background:#816a40;color:#fff}.corrected-text{width:100%;min-height:210px;margin-top:20px;padding:17px;resize:vertical;border:1px solid #e2ded2;border-radius:13px;background:#fff;color:var(--ink);font-size:14px;line-height:1.8}.corrected-note{margin:9px 2px 0;color:#8a8578;font-size:10px}footer{width:min(1180px,calc(100% - 40px));display:flex;justify-content:space-between;gap:16px;margin:0 auto;padding:0 4px 30px;color:#849088;font-size:10px}.toast{position:fixed;z-index:10;left:50%;bottom:24px;max-width:calc(100% - 32px);padding:11px 16px;border-radius:999px;background:#183a32;color:#fff;font-size:11px;font-weight:700;box-shadow:0 12px 28px rgba(0,0,0,.18);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .18s ease,transform .18s ease}.toast.is-visible{opacity:1;transform:translate(-50%,0)}.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}
@media(max-width:800px){.app-shell{width:min(100% - 28px,620px)}.hero{padding:36px 2px 28px}.brand{font-size:9px}.hero-grid{grid-template-columns:1fr;gap:19px;margin-top:20px}h1{font-size:clamp(40px,12vw,56px)}.hero-copy>p{max-width:520px;font-size:13px}.workspace{grid-template-columns:1fr}.panel{min-height:0;border-radius:18px}.input-panel{position:static;padding:18px}.result-panel{padding:18px}#source-text{min-height:300px;margin-top:18px}.placeholder-state,.success-state{min-height:330px}.corrected-section{padding:18px;border-radius:18px}}
@media(max-width:470px){.app-shell,footer{width:calc(100% - 20px)}.hero{padding-top:28px}h1{letter-spacing:-.065em}.panel-header{gap:10px}.step-title h2{font-size:14px}.input-footer{align-items:flex-end}.input-actions{flex-direction:column-reverse;width:54%}.primary-button,.secondary-button{width:100%}.shortcut{display:none}.corrected-header{align-items:center}.copy-button{max-width:118px}details li{grid-template-columns:1fr}footer{flex-direction:column;gap:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
