@charset "UTF-8";
:root{--black:#17171e;--cream:#f7f3e9;--lime:#d8f66a;--purple:#b397ff;--line:#ffffff26;--muted:#c2bfca;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--cream);background:#0c0c10;font-size:16px;line-height:1.55;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{opacity:.4;cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:4px}h1,h2,h3,p{margin:0}h1{font-size:38px;font-weight:850;line-height:1.18;letter-spacing:-1.5px}h2{font-size:27px;line-height:1.3;letter-spacing:-.8px}h3{font-size:20px;line-height:1.45}p{overflow-wrap:anywhere}img{max-width:100%;display:block}.page-shell{width:100%;max-width:480px;min-height:100svh;background:var(--black);margin:auto;overflow:hidden}.muted{color:var(--muted)}.small{font-size:16px}.space{margin-top:22px}.tight{margin-top:10px}.stack{display:grid;gap:12px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{font-size:16px;font-weight:650;letter-spacing:.5px}.pill{border:1px solid currentColor;display:inline-flex;align-items:center;padding:5px 12px;border-radius:99px;font-size:16px;line-height:1.4}.pill.lime{color:var(--black);background:var(--lime);border-color:var(--lime)}.button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:14px 18px;border:1px solid var(--cream);border-radius:16px;font-size:17px;font-weight:750;text-align:center;text-decoration:none;background:transparent;color:var(--cream)}.button.primary{background:var(--lime);border-color:var(--lime);color:var(--black);box-shadow:0 4px 0 #8a9c47}.button.light{background:var(--cream);border-color:var(--cream);color:var(--black)}.button.ghost{border-color:transparent;background:transparent;color:var(--muted);font-weight:500;box-shadow:none}.button:active:not(:disabled){transform:translateY(2px);box-shadow:none}.button.inline{width:auto;min-height:44px;padding:9px 13px;font-size:16px}.actions{display:grid;gap:12px;margin-top:24px}.action-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.text-button{border:0;background:none;min-height:44px;padding:8px 0;color:var(--cream);text-decoration:underline;text-underline-offset:5px}.panel{padding:21px;border:1px solid var(--line);border-radius:22px;background:#ffffff05}.note{padding-left:13px;border-left:2px solid var(--purple);color:var(--muted);font-size:16px;line-height:1.7;margin-top:21px}.rule{height:1px;background:var(--line);margin:24px 0}.view{padding:22px 22px 28px;animation:appear .25s ease-out}.lede{font-size:17px;line-height:1.7;color:var(--muted);margin-top:14px}.badge{background:var(--lime);color:var(--black);font-size:16px;font-weight:700;padding:9px 18px;text-align:center}.masthead-line{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:16px 22px}.wordmark{font-size:17px;font-weight:800;letter-spacing:1px}.edition{font-size:16px;color:var(--muted)}.steps{display:flex;list-style:none;margin:0;padding:14px 22px 0;gap:8px}.steps li{flex:1;height:4px;border-radius:99px;background:#ffffff25}.steps li.done{background:var(--lime)}.step-caption{display:flex;justify-content:space-between;padding:9px 22px 0;font-size:16px;color:var(--muted)}.step-caption strong{color:var(--cream);font-weight:600}
.outfit-stage{position:relative;isolation:isolate;height:340px;border-radius:28px;margin:23px 0 16px;overflow:hidden;background:var(--outfit-bg);color:var(--outfit-ink);border:1px solid #ffffff30}.outfit-stage:before{position:absolute;content:"";inset:30px 22px;border:1px solid currentColor;border-radius:50%;opacity:.25;transform:rotate(-18deg)}.outfit-stage:after{content:"";position:absolute;z-index:-1;right:-60px;bottom:-50px;width:250px;height:250px;background:var(--outfit-accent);border-radius:50%;opacity:.75}.stage-corner{position:absolute;z-index:3;top:18px;left:18px;font-size:16px;font-weight:750}.stage-number{position:absolute;right:13px;top:10px;font-size:66px;font-weight:850;line-height:1;letter-spacing:-4px;opacity:.2}.art-shell{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.art-shell img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 14px 11px #0002);opacity:0;transition:opacity .25s}.art-shell.ready img{opacity:1}.asset-fallback{position:absolute;display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;z-index:0;font-size:16px;max-width:70%;color:inherit}.asset-fallback .abstract-pet{height:125px;width:125px;background:currentColor;border-radius:45% 55% 55% 45%;opacity:.12;transform:rotate(-15deg)}.art-shell.ready .asset-fallback{display:none}.outfit-stage>.art-shell{padding:27px 25px 10px}.outfit-meta{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:17px 0}.outfit-meta h2{font-size:30px}.outfit-meta p{margin-top:5px;font-size:16px;color:var(--muted)}.outfit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.outfit-choice{padding:0 0 9px;border:1px solid #ffffff30;border-radius:17px;overflow:hidden;background:var(--outfit-bg);color:var(--outfit-ink);min-height:112px;font-size:16px;position:relative}.outfit-choice[aria-checked=true]{outline:3px solid var(--lime);outline-offset:2px}.outfit-choice .art-shell{height:78px;padding:6px 5px 1px}.outfit-choice .asset-fallback{font-size:0;gap:0}.outfit-choice .abstract-pet{width:48px;height:48px}.outfit-choice strong{font-size:16px;font-weight:700}.outfit-choice .picked{position:absolute;right:6px;top:5px;z-index:3;background:var(--lime);color:var(--black);width:22px;height:22px;border-radius:50%;font-size:16px;line-height:22px}.refresh-wrap{display:flex;justify-content:flex-end;margin-top:10px}
.preference-hero{display:grid;grid-template-columns:1fr 160px;gap:12px;align-items:center;margin-bottom:24px}.preference-hero .art-shell{height:195px;color:var(--purple)}.question-index{color:var(--lime);font-size:20px;font-weight:700;letter-spacing:2px;margin-bottom:12px}.preference-hero h1{font-size:30px;line-height:1.35;letter-spacing:-.8px}.choice-list{display:grid;gap:12px}.choice{display:flex;align-items:center;gap:13px;padding:19px;border-radius:18px;min-height:72px;border:1px solid #ffffff4f;background:#ffffff06;text-align:left;font-size:18px;line-height:1.6}.choice[aria-checked=true]{border-color:var(--lime);background:var(--lime);color:var(--black);font-weight:700}.radio-dot{width:24px;height:24px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;flex:0 0 24px;font-size:15px}.preference-nav{display:grid;grid-template-columns:1fr 1.7fr;gap:12px;margin-top:26px}.mini-progress{display:flex;gap:7px;margin-top:23px}.mini-progress span{height:7px;flex:1;background:#ffffff25;border-radius:99px}.mini-progress span.done{background:var(--purple)}
.card-stage{perspective:1100px;margin-top:20px}.flip-card{width:100%;height:540px;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.22,.8,.2,1)}.flip-card.is-back{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;padding:23px;border-radius:25px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border:1px solid #ffffff44;background:var(--outfit-bg);color:var(--outfit-ink)}.card-face.back{transform:rotateY(180deg);background:var(--cream);color:var(--black)}.card-face.front:after{content:"";position:absolute;width:330px;height:330px;background:var(--outfit-accent);opacity:.6;border-radius:50%;left:50%;top:150px;transform:translateX(-50%);z-index:0}.card-face .card-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px}.card-mark{font-size:16px;font-weight:750;letter-spacing:1px}.card-face h2{font-size:42px;font-weight:850;line-height:1.15;letter-spacing:-1.5px;margin-top:16px;position:relative;z-index:2}.card-face.front>.art-shell{position:absolute;inset:120px 12px 68px;width:auto;height:auto;z-index:1}.card-bottom{position:absolute;bottom:21px;left:23px;right:23px;font-size:16px;display:flex;justify-content:space-between;gap:10px;align-items:center;z-index:2}.back h2{font-size:27px;line-height:1.35;max-width:250px;margin:25px 0 12px}.back-caption{font-size:16px;opacity:.7}.back-lines{display:grid;gap:13px;margin-top:20px}.back-line{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding-bottom:14px;border-bottom:1px solid #17171e26;font-size:18px;line-height:1.6}.back-line span:first-child{font-size:16px;font-weight:800;padding-top:3px}.back .mini-qr{width:88px;height:88px;background:white;padding:0}.back-qr-row{display:flex;gap:15px;align-items:center;margin-top:20px}.back-qr-row div{font-size:16px;line-height:1.5}.sample-note{display:flex;gap:14px;align-items:flex-start;padding:18px;background:#b397ff12;border:1px solid #b397ff55;border-radius:18px;margin-top:22px}.sample-code{font-size:30px;line-height:1;font-weight:800;color:var(--purple);padding-top:4px}.sample-note p{font-size:16px;line-height:1.7;color:var(--muted)}.flip-button{margin-top:17px}
.share-panel{margin-top:20px;padding:20px;background:#fffefa08;border:1px solid #ffffff26;border-radius:22px}.check-row{display:grid;grid-template-columns:25px 1fr;gap:13px;align-items:start;padding:16px 0}.check-row+.check-row{border-top:1px solid var(--line)}.check-row input{width:25px;height:25px;appearance:none;border:1px solid #ffffff70;border-radius:7px;background:transparent;margin:2px 0 0;position:relative}.check-row input:checked{background:var(--lime);border-color:var(--lime)}.check-row input:checked:after{content:"✓";position:absolute;inset:0;color:var(--black);font-size:20px;line-height:23px;text-align:center;font-weight:700}.check-row input:disabled{opacity:.3}.check-row strong{font-size:18px;font-weight:650}.check-row p{font-size:16px;color:var(--muted);line-height:1.65;margin-top:6px}.mbti-panel{margin-top:18px;padding-top:19px;border-top:1px solid var(--line)}.mbti-panel select{width:100%;background:var(--cream);color:var(--black);min-height:52px;padding:12px;border:0;border-radius:12px;margin-top:13px;font-size:17px}.privacy-warning{margin-top:13px;padding:14px;border:1px solid #f3a99a88;border-radius:13px;background:#f3a99a10;color:#ffcdc3;font-size:16px;line-height:1.7}.qr-info{display:flex;gap:15px;align-items:center;margin-top:21px;padding:18px;border:1px solid var(--line);border-radius:18px}.qr-info img{width:104px;height:104px;flex:none;background:#fff}.qr-info p{font-size:16px;line-height:1.6}.qr-info .pill{font-size:16px;padding:3px 8px;margin-bottom:8px}.preview-frame{margin-top:25px}.preview-frame>img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--cream);-webkit-touch-callout:default;user-select:auto}.preview-frame h2{font-size:24px;margin-bottom:15px}.preview-spinner{min-height:140px;display:grid;place-items:center;font-size:17px;color:var(--muted)}.save-confirm{margin-top:13px}.entry-link{margin-top:18px}.error-panel{padding:28px 22px;min-height:60svh;display:grid;align-content:center;gap:24px}.error-panel h1{font-size:28px;line-height:1.5}footer{margin:0 22px;padding:21px 0 calc(25px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:16px;line-height:1.75;color:var(--muted)}#notice{position:fixed;left:50%;bottom:calc(23px + env(safe-area-inset-bottom));transform:translate(-50%,15px);z-index:30;width:max-content;max-width:calc(100vw - 36px);padding:14px 18px;border:1px solid #f7f3e950;border-radius:16px;background:#f7f3e9;color:var(--black);box-shadow:0 8px 35px #0005;pointer-events:none;opacity:0;font-size:16px;line-height:1.55;transition:opacity .2s,transform .2s}#notice.show{opacity:1;transform:translate(-50%,0)}.loading-mark{width:55px;height:55px;border:3px solid #ffffff30;border-top-color:var(--lime);border-radius:50%;margin:30vh auto;animation:spin 1s linear infinite}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes appear{from{opacity:.6;transform:translateY(7px)}to{opacity:1;transform:none}}@media(min-width:600px){.page-shell{margin:24px auto;border:1px solid #ffffff15;border-radius:30px;min-height:calc(100svh - 48px)}}@media(max-width:360px){.view{padding-inline:18px}.masthead-line{padding-inline:18px}.outfit-stage{height:300px}.outfit-grid{gap:7px}.outfit-choice{min-height:102px}.outfit-choice .art-shell{height:70px}.preference-hero{grid-template-columns:1fr 135px}.preference-hero h1{font-size:28px}.preference-hero .art-shell{height:175px}.flip-card{height:570px}.card-face{padding:19px}.back-line{font-size:17px;gap:8px}.back h2{font-size:25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.flip-card{transform:none!important}.card-face{backface-visibility:visible;transform:none!important}.flip-card:not(.is-back) .back{visibility:hidden}.flip-card.is-back .front{visibility:hidden}}

.qr-image{position:relative;width:104px;height:104px;flex:none;background:#fff;display:grid;place-items:center;overflow:hidden;border-radius:4px}.qr-image img{display:block;width:100%;height:100%;object-fit:contain;opacity:0}.qr-image.ready img{opacity:1}.qr-loading{position:absolute;inset:8px;display:grid;place-items:center;color:#17171e;font-size:16px;line-height:1.35;text-align:center}.qr-image.ready .qr-loading{display:none}.qr-error{width:100%;padding:13px;border:1px solid currentColor;border-radius:12px;font-size:16px;line-height:1.5}.qr-error .button{margin-top:10px;min-height:44px}.back .qr-error .button{color:#17171e;border-color:#17171e66}.back .qr-error p{font-size:16px}